学习一下openlayers里面的一些基本概念,npm地址。
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序
npm install ol
OpenLayers是一个高性能、功能丰富的库,用于在web上创建交互式地图。它可以显示地图瓷砖,矢量数据和标记加载从任何来源在任何网页。OpenLayers的开发是为了进一步使用各种地理信息。它是完全免费的,开源JavaScript。
1.Map
A map is made of layers, a view to visualize them, interactions to
modify map content and controls with UI components.
译文: 地图由层、可视化它们的视图、修改地图内容的交互和使用UI组件的控件组成。
地图是OpenLayers的核心组件。要渲染一个地图,需要一个视图、一个或多个层和一个目标容器:
import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; var map = new Map({ view: new View({ center: [0, 0], zoom: 1 }), layers: [ new TileLayer({ source: new OSM() }) ], target: 'map' });
2.View
The view manages the visual parameters of the map view, like
resolution or rotation.View with center, projection, resolution and
rotation.
视图管理地图视图的可视参数,如分辨率或旋转。 中心视图,投影,分辨率和旋转。
图不负责地图的中心、缩放级别和投影。相反,这些是ol/View实例的属性。
3.Layers
Layers are lightweight containers that get their data from sources.
图层是从数据源获取数据的轻量级容器。默认投影3857,即墨卡托投影(高纬度地区被拉升,变形严重,但低纬度地区展示数据较好直观),比如说加载天地图,默认加载_w结尾的。
高德地图中也是可以加载第三方地图服务的,只支持3857
Layers种类:
- ol/layer/Tile
- ol/layer/Image
- ol/layer/Vector
- ol/layer/VectorImage
- ol/layer/VectorTile
- ol/layer/WebGLTile
4.Controls
控件是一个可见的小部件,具有一个位于屏幕上固定位置的DOM元素。它们可以包含用户输入(按钮),也可以只是信息;位置是使用CSS确定的。默认情况下,它们被放置在CSS类名为ol-overlaycontainer-stopevent的容器中,但可以使用任何外部DOM元素。
- Map default controls
- All controls
5.Interactions
用户与地图之间的交互操作,包括:
- Map default interactions
- Interactions for vector features
- ol/interaction/Select
ol/interaction/Draw
ol/interaction/Modify - All interactions
例如:
- 地图旋转
import DragRotate from 'ol/interaction/DragRotate'
ol/interaction/DragRotate这个模块允许用户通过点击和拖动地图旋转地图,通常结合一个模块:ol/events/condition,当按住alt和shift键时限制它。
- 地图缩放
import KeyboardZoom from 'ol/interaction/KeyboardZoom';
ol/interaction/KeyboardZoom模块允许用户使用键盘+和-缩放地图。注意,虽然这种交互默认情况下包含在映射中,但只有当浏览器的焦点集中在键盘事件所附加的元素上时,才能使用键。默认情况下,这是map div,但您可以使用模块:ol/ map ~ map中的keyboardEventTarget更改它。Document永远不会失去焦点,但是对于任何其他元素,如果键要发挥作用,焦点必须是在这个元素上并返回。
6.Sources and formats
数据源和对应的格式
7.Projections
坐标系转化工具模块
All coordinates and extents need to be provided in view projection
(default: EPSG:3857). To transform coordinates from and to
geographic, use
and
For extents and other projections, use
and
ol/proj
8.Observable objects
监听器,监听ol/Objects,主要用来监听自定义的属性。
Changes to all ol/Objects can be observed by calling the
object.on(‘propertychange’) method. Listeners receive an
ol/Object.ObjectEvent with information on the changed property and old value.