Openlayers API-XYZ

Openlayers API-XYZ,第1张

ol/source/XYZ 用于图层加载 XYZ 数据格式的切片。通常是按钮规格来获取切片,比如当 X 和 Y 都为0时,表示左上角的切片。加载切图的时候也是根据当前切片所处的位置来动态设置 X``Y``Z 的值,一般是直接在 url 中拼接。如 >

笔者最近实践了利用openlayers在android app中实现离线地图应用,本文记录了笔者实践的思路。

1、加载本地的地图瓦片;

2、GPS定位;

3、叠加部件(矢量)图层;

android端用webview加载在线页面或离线的html页面都是没问题的,同时,android原生与JS之间可以互相调用。这一部分不是本文的重点,参考资料如下:

笔者想到ol加载地瓦片地图时,可以用tileUrlFunction返回一个瓦片的链接,例如:

本文献给大连机场,感谢您延误航班,使我有时间有耐心写完本文,谢谢。

:一般情况下我用的最多的是"moveend"事件,为什么呢,有些时候请求的数据太多,几万甚至几十万几百万,这个时候不可能是把这些数据全部渲染到地图上,那么我们只需要渲染当前屏幕的数据就可以,也就是按需加载,移动完成一次就请求一次当前屏幕的数据渲染。

获取GeoJSON数据,可以通过>var geojsonObject = {        'type': 'FeatureCollection',        'crs': {          'type': 'name',          'properties': {            'name': 'EPSG:3857'

         }

       },        'features': [{          'type': 'Feature',          'geometry': {            'type': 'Point',            'coordinates': [0, 0]

         }

       }, {          'type': 'Feature',          'geometry': {            'type': 'LineString',            'coordinates': [[4e6, -2e6], [8e6, 2e6]]

         }

       }, {          'type': 'Feature',          'geometry': {            'type': 'LineString',            'coordinates': [[4e6, 2e6], [8e6, -2e6]]

         }

       }, {          'type': 'Feature',          'geometry': {            'type': 'Polygon',            'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]

         }

       }, {          'type': 'Feature',          'geometry': {            'type': 'MultiLineString',            'coordinates': [              [[-1e6, -75e5], [-1e6, 75e5]],              [[1e6, -75e5], [1e6, 75e5]],              [[-75e5, -1e6], [75e5, -1e6]],              [[-75e5, 1e6], [75e5, 1e6]]

           ]

         }

       }, {          'type': 'Feature',          'geometry': {            'type': 'MultiPolygon',            'coordinates': [              [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],              [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],              [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]

           ]

         }

       }, {          'type': 'Feature',          'geometry': {            'type': 'GeometryCollection',            'geometries': [{              'type': 'LineString',              'coordinates': [[-5e6, -5e6], [0, -5e6]]

           }, {              'type': 'Point',              'coordinates': [4e6, -5e6]

           }, {              'type': 'Polygon',              'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]

           }]

         }

       }]

     };

创建矢量图层Source

var vectorSource = new olsourceVector({

       features: (new olformatGeoJSON())readFeatures(geojsonObject)

     });

创建图层并绑定Source

var vectorLayer = new ollayerVector({

       source: vectorSource,

       style: ''

     });

添加到map中即可

OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers实现访问地理空间数据的方法都符合行业标准。比如OpenGIS的WMS和WFS规范。OpenLayers采用面向对象方式开发,并使用来自Prototypejs和Rico中的一些组件。OpenLayers支持的地图来源包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用简单的作为源,在这一方面OpenLayers提供了非常多的选择。 从OpenLayers22版本以后,OpenLayers已经将所用到的Prototypejs组件整合到了自身当中,并不断在Prototypejs的基础上完善面向对象的开发,Rico用到地方不多,只是在OpenLayersPopupAnchoredBubble类中圆角化DIV。OpenLayers24版本以后提供了矢量画图功能,方便动态地展现“点、线和面”这样的地理数据。 OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问 OpenLayers 支持的地图来源包括Google Maps、Yahoo! Map、微软Virtual Earth 等。用户还可以用简单的地图作为背景图,与其他的图层在OpenLayers 中进行叠加。除此之外,OpenLayers 支持Open GIS 协会制定的WMS(Web Mapping Service)和WFS(Web Feature Service)等网络服务规范,可以通过远程服务的方式,将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。 在 *** 作方面,OpenLayers 除了可以在浏览器中帮助开发者实现地图浏览的基本效果,比如放大(Zoom In)、缩小(Zoom Out)、平移(Pan)等常用 *** 作之外,还可以进行选取面、选取线、要素选择、图层叠加等不同的 *** 作。甚至可以对已有的OpenLayers *** 作和数据支持类型进行扩充,为其赋予更多的功能。例如,它可以为OpenLayers 添加网络处理服务WPS 的 *** 作接口,从而利用已有的空间分析处理服务来对加载的地理空间数据进行计算。同时,在OpenLayers提供的类库当中,它还使用了类库Prototypejs 和Rico 中的部分组件,为地图浏览 *** 作客户端增加Ajax 效果。

以上就是关于Openlayers API-XYZ全部的内容,包括:Openlayers API-XYZ、如何在openlayers中叠加高德地图,并且正确叠加WMS图层、android端实践openlayers离线地图等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/10178136.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-06
下一篇2023-05-06

发表评论

登录后才能评论

评论列表(0条)

    保存