自己写的切图工具（转）

最新推荐文章于 2020-06-24 22:05:26 发布

weixin_34331102

最新推荐文章于 2020-06-24 22:05:26 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

文章标签：游戏 json 大数据

原文链接：http://www.cnblogs.com/lianghong/p/8617592.html

本文介绍了一种矢量瓦片切割工具及其在OpenLayers中的应用方法。该工具能够将矢量数据切割成256*256大小的GeoJSON文件，用于解决大数据量的交互问题。文中详细描述了如何利用Tilestache进行矢量数据的预切片及通过OpenLayers加载这些切片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

矢量瓦片切割工具，注意不是切图工具哦

矢量瓦片切割工具，顾名思义：就是把矢量切成矢量的。
尺寸大小还是256*256，只不过生成不是图片而是geojson的文本文件。

矢量瓦片用途见http://www.openlayers.cn/portal.php?mod=view&aid=33

用途往简单的说就是大数据量交互

就像百度地图麻点图那样。

如下：

以前都是把矢量切成图片--

主要是解决客户端加载大数量数据问题。

先来几张程序截图。
<ignore_js_op>

<ignore_js_op>

矢量瓦片内容如下：

<ignore_js_op>

另一篇： http://www.openlayers.cn/portal.php?mod=view&aid=33

OpenLayers中加载矢量切片，可有效解决大数据量的问题

2013-1-6 14:55| 发布者: fengl| 查看: 32155| 评论: 17

摘要: 1.首先我们对矢量数据进行切片可使用tilestachehttp://www.openlayers.cn/forum.php?mod=viewthreadtid=141这个是预先切好的数据也可以实时去获取切片数据（使用OL-- utfgrid）详见http://blog.perrygeo.net/2012/0 ...

1.首先我们对矢量数据进行切片可使用tilestache
http://www.openlayers.cn/forum.php?mod=viewthread&tid=141这个是预先切好的数据
也可以实时去获取切片数据（使用OL-- utfgrid）详见http://blog.perrygeo.net/2012/02 ... ers-and-tilestache/

2.下面讲下在Openlayers中如何加载预先切好的数据

添加OL的策略拓展文件 OpenLayers.Strategy.Grid.js

Grid.zip

加载图层：

[代码]js代码：

 
            01var style = new OpenLayers.Style();

            02          var ruleAmenity = new OpenLayers.Rule({

            03               symbolizer: {fillColor: 'none', strokeOpacity: 0, pointerEvents: 'all'}

            04           });

            05          

            06           style.addRules([ruleAmenity]);

            07             var styleMap = new OpenLayers.StyleMap({

            08               'default': style,

            09               'select': new OpenLayers.Style({

            10                   strokeWidth: 5,

            11                   strokeColor: "blue",

            12                   strokeOpacity: 1

            13               })

            14             });

            15           var baseName = "http://localhost/basicmap/data/${z}/${x}/${y}";

            16           format = new OpenLayers.Format.GeoJSON();

            17           strategy = new OpenLayers.Strategy.Grid();

            18           protocol = new OpenLayers.Protocol.HTTP({

            19               url: baseName + ".geojson",

            20               format: format

            21           });

            22           vectors = new OpenLayers.Layer.Vector("Vector", {

            23               strategies: [strategy],

            24               protocol: protocol,

            25               styleMap:styleMap,

            26               projection: new OpenLayers.Projection("EPSG:4326")

            27           });

            28       this.map.addLayer(vectors);

            29       var options = {

            30               hover: true

            31           };

            32           var select = new OpenLayers.Control.SelectFeature(vectors, options);

            33           this.map.addControl(select);

            34           select.activate();

下面说下要注意的几点：

1.默认下tilestache切出的数据是按EPSG：900913投影切的

所以我这里的map也是EPSG：900913投影

[代码]js代码：

 
            01   var mapOptions = {

            02maxExtent : new OpenLayers.Bounds(-20037508.3427892, -20037508.3427892,

            03        20037508.3427892, 20037508.3427892),

            04        numZoomLevels : 19,

            05        maxResolution : 156543.0339,

            06         controls: [],

            07        units : 'm',

            08        projection : "EPSG:900913",

            09        displayProjection : new OpenLayers.Projection("EPSG:4326"),

            10        theme : 'css/OlTheme/default/style.css'

            11   };

            12    this.map = new OpenLayers.Map('map', mapOptions);