OpenLayers解决大数据量的问题

OpenLayers解决大数据量的问题


发布日期: 2015-07-21 更新日期: 2015-07-21 编辑:bukun 浏览次数: 13039

标签:

摘要: 1.首先我们对矢量数据进行切片 可使用tilestache http://www.openlayers.cn/forum.php?mod=viewthread&tid=141这个是预先切好的数据 也可以实时去获取切片数据(使用OL-- utfgrid)详见ht...

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代码:

    var style = new OpenLayers.Style();
              var ruleAmenity = new OpenLayers.Rule({
                   symbolizer: {fillColor: 'none', strokeOpacity: 0, pointerEvents: 'all'}
               });

           style.addRules([ruleAmenity]);
                 var styleMap = new OpenLayers.StyleMap({
                   'default': style,
                   'select': new OpenLayers.Style({
                       strokeWidth: 5,
                       strokeColor: "blue",
                       strokeOpacity: 1
                   })
                 });
               var baseName = "http://localhost/basicmap/data/${z}/${x}/${y}";
               format = new OpenLayers.Format.GeoJSON();
               strategy = new OpenLayers.Strategy.Grid();
               protocol = new OpenLayers.Protocol.HTTP({
                   url: baseName + ".geojson",
                   format: format
               });
               vectors = new OpenLayers.Layer.Vector("Vector", {
                   strategies: [strategy],
                   protocol: protocol,
                   styleMap:styleMap,
                   projection: new OpenLayers.Projection("EPSG:4326")
               });
           this.map.addLayer(vectors);
           var options = {
                   hover: true
               };
               var select = new OpenLayers.Control.SelectFeature(vectors, options);
               this.map.addControl(select);
               select.activate();

下面说下要注意的几点:

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

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

[代码]js代码:

       var mapOptions = {
    maxExtent : new OpenLayers.Bounds(-20037508.3427892, -20037508.3427892,
            20037508.3427892, 20037508.3427892),
            numZoomLevels : 19,
            maxResolution : 156543.0339,
             controls: [],
            units : 'm',
            projection : "EPSG:900913",
            displayProjection : new OpenLayers.Projection("EPSG:4326"),
            theme : 'css/OlTheme/default/style.css'
       };
        this.map = new OpenLayers.Map('map', mapOptions);

加载geojson切片:

可以看下这切数据

鼠标移到图标上时高亮(图标是后台geoserver渲染的):

关注公众号
获取免费资源

随机推荐


Copyright © Since 2014. 开源地理空间基金会中文分会 吉ICP备05002032号

Powered by TorCMS

OSGeo 中国中心 邮件列表

问题讨论 : 要订阅或者退订列表,请点击 订阅

发言 : 请写信给: osgeo-china@lists.osgeo.org