自己写的切图工具（转）矢量瓦片切割工具，注意不是切图工具哦

矢量瓦片切割工具，顾名思义：就是把矢量切成矢量的。
尺寸大小还是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代码：

01

var 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 = {

02

maxExtent : 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);

加载geojson切片：

可以看下这切数据

鼠标移到图标上时高亮（图标是后台geoserver渲染的）：

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

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

如下：

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

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

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

<ignore_js_op>

矢量瓦片内容如下：

<ignore_js_op>