OpenLayer4调用GeoServer发布的矢量切片

首先设置矢量切片数据源,可以选择pbf格式或者geojson格式,其中pbf格式数据加密性较好,读取速度快:

var vector = new ol.layer.VectorTile({  
            source: new ol.source.VectorTile({  
                projection: projection4326,  
                <!-- format: new ol.format.GeoJSON(), -->//geojson格式
                format: new ol.format.MVT(),//pbf格式             
                tileGrid: ol.tilegrid.createXYZ({  
                    extent: ol.proj.get('EPSG:4326').getExtent(),  
                    maxZoom: 32  
                }),  
                tilePixelRatio: 1,
                // 矢量切片服务地址  
                tileUrlFunction: function(tileCoord){  
                    return 'http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/'  
                        +lyr+'@EPSG%3A4326@pbf/'+(tileCoord[0]-1)  
                        + '/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) + '.pbf';//pbf矢量切片  
                }
                <!-- tileUrlFunction: function(tileCoord){   -->
                    <!-- return 'http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/'   -->
                        <!-- +lyr+'@EPSG%3A4326@geojson/'+(tileCoord[0]-1)   -->
                        <!-- + '/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) + '.geojson'; -->
                <!-- }               -->//geojson矢量切片
            })  
            <!-- style:initStyle  --> 
        });

设置Map对象,并自定义矢量切片符号:

//设置POI图标
        var iconStyle = new ol.style.Style({
                            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                              anchor: [0.5, 46],
                              anchorXUnits: 'fraction',
                              anchorYUnits: 'pixels',
                              src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
                            }))
                        }); 
//设置Map对象
var map = new ol.Map({  
            layers: [    
                vector  
            ],  
            target: 'map',  
            controls: ol.control.defaults().extend([  
                new ol.control.MousePosition({  
                    className:"ol-mouseposition",  
                    coordinateFormat: ol.coordinate.createStringXY(5)  
                })  
            ]),  
            view: new ol.View({  
                projection: projection4326,  
                minZoom:1,  
                maxZoom:32,  
                center: [-103.774,44.440],  
                zoom: 8  
            })  
        });
//将默认样式切换成自定义符号
vector.setStyle(iconStyle); 

具体效果如下图所示:


默认样式效果图
动态渲染效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,833评论 25 708
  • 你就是你呀,干嘛要为了别人改自己,如果自己要改变自己,那是不一样的。 讲个小故事吧,以前我是从开不在外面吃一个叫做...
    桧枫阅读 470评论 0 0
  • 大学教育 大学教育的五个话题: 在大学做什么 在大学学什么 大众教育-知识和技能概念命运的重要性 如何在一个二流大...
    马骋阅读 523评论 0 0
  • 文/月中山 上一章 / 简介+目录 /下一章 九月如期而至,盛夏的风吹在教室里,吹开了一页一页的书卷,也聚拢起一...
    月中山阅读 898评论 0 2