Vue+OpenLayers中文教程推荐,不同于OpenLayers官方文档使用html+js原生原生教程,博主专栏包含大量vue整合案例和实际开发案例,非常适合地图开发小白快速入门。
- vue整合OpenLayers6入门教程: 《Vue+OpenLayers入门教程汇总目录》
- vue整合OpenLayers6实战中文教程,包含大量OpenLayers官方文档没有涉及到的实际开发案例: 《Vue+OpenLayers实战进阶专栏目录》
OpenLayers介绍
OpenLayers
是一个开源的JavaScript库,用于显示交互式的地图和地理数据,支持多种地图数据源和格式。主要用途是在Web应用程序中呈现地图,并且可以进行各种交互操作。使用OpenLayers
可以轻松创建地图应用程序,包括地图的显示、地图上的标记、地图缩放、平移、定位、测量等。OpenLayers
支持的地图格式包括WMS
、WFS
、WMTS
、KML
、GeoJSON
等格式。
同时,OpenLayers也支持自定义图层和数据源,可以轻松实现和集成各种第三方地图数据。
OpenLayers模块化支持
OpenLayers
使用 Canvas 2D
、WebGL
和 HTML5
的所有最新功能,并且OpenLayers自身实现了模块化,可以轻松与Vue
、React
等现代Web UI库进行集成。
OpenLayers与GeoServer关系
GeoServer
内置的二维地图引擎库就是OpenLayers
,方便快速生成和预览通过GeoServer发布的地图服务。
OpenLayers如何集成三维地图引擎Cesium
OpenLayers维护了ol-cesium
库用来扩展Cesium来支持三维地图交互能力,可以在2D和3D引擎间切换使用,ol-cesium
维护地址:https://github.com/openlayers/ol-cesium
OpenLayers支持的瓦片格式
OpenLayers支持多种瓦片格式,包括:
-
Google Maps/Google Earth(.png)
-
OSM(.png、.jpeg、.gif)
-
WMS(Web Map Service)格式(.png、.jpeg、.gif、.tif等)
-
XYZ格式
-
Mapbox Vector Tiles
-
Mapbox MVT(Mapbox Vector Tile)瓦片格式
-
GeoPackage
-
WMTS(Web Map Tile Service)格式
-
Bing Maps瓦片格式
-
Esri REST API瓦片格式等等。
OpenLayers支持的矢量格式
支持GeoJSON、TopoJSON、KML、GML、Mapbox 矢量瓦片和其他格式的矢量数据
OpenLayers第三方扩展库
下面的库通过扩展 OpenLayers 或与之很好地集成来提供额外的功能。
扩展库 | 描述 | 维护者 |
---|---|---|
OL-Cesium | Cesium integration library. | OpenLayers |
ol-mapbox-style | Create OpenLayers maps from Mapbox Style objects. | OpenLayers |
OL-LayerSwitcher | Layer control for OpenLayers. | Matt Walker |
OL-Popup | Basic popup overlay for OpenLayers. | Matt Walker |
JSTS | JavaScript Topology Suite. | Björn Harrtell |
OL-Geocoder | Geocoder Nominatim for OpenLayers. | Jonatas Walker |
OL3-Photon | Photon geocoder for OpenLayers. | Thomas Gratier |
ol-opencage-geosearch | OpenCage GeoSearch for OpenLayers. | OpenCage |
OL-ContextMenu | Custom Context Menu for OpenLayers. | Jonatas Walker |
OL-Google-Maps | Google Maps integration library. | Mapgears |
OL3-PanZoom | PanZoom and PanZoomBar controls for OpenLayers. | Mapgears |
OL-Ext | Miscellaneous classes and functions for OpenLayers. | Jean-Marc Viglino |
OL3-Projection-Switcher | An OpenLayers Control to switch between projections. | NSIDC |
Olé | Integration of OpenLayers and Esri ArcGIS REST services. | Boundless |
React OpenLayers | A minimal React wrapper of OpenLayers 3+ written in TypeScript | Allen Kim |
GWT-OpenLayers 3+ | A GWT wrapper for OpenLayers 3+ written in Java | Tino Desjardins |
react-geo | A set of geo related modules to use in combination with React, Ant Design UI and OpenLayers | terrestris |
ol-opacity | A layer switcher control with opacity sliders for overlays. | dayjournal |
ol-grid | A dynamic grid for OpenLayers - intended for use as part of advanced snapping controls. | Symbioquine |
vue3-openlayers | vue3-openlayers is a components library that brings the power of OpenLayers to the Vue3 reactive world. | Melih Altıntaş |
ol-marker-feature | The OpenLayers Marker Feature plugin provides an easy way to add markers to a map and associate them with popups, e.g. using OL-Popup. | Andreas Hocevar |
OL STAC | STAC support for OpenLayers. Automatically fills an OpenLayers LayerGroup with data extracted from various STAC entities, e.g. geometry and imagery. | Matthias Mohr |
Vue+OpenLayers中文教程推荐,不同于OpenLayers官方文档使用html+js原生原生教程,博主专栏包含大量vue整合案例和实际开发案例,非常适合地图开发小白快速入门。
- vue整合OpenLayers6入门教程: 《Vue+OpenLayers入门教程汇总目录》
- vue整合OpenLayers6实战中文教程,包含大量OpenLayers官方文档没有涉及到的实际开发案例: 《Vue+OpenLayers实战进阶专栏目录》