当前位置: 首页 > Web前端 > HTML

OpenLayers6学习笔记(一)——初始化一张地图

时间:2023-03-28 00:00:50 HTML

一、OpenLayers概述Map、Layer、Source和View是OpenLayers框架体系中的核心类,几乎所有的动作都围绕着这些核心类来实现地图的加载和加载相关操作。在OpenLayers框架体系中:将整个地图看成一个容器(Map),核心是地图层(Layer),每一层都有对应的数据源(Source),地图的显示由地图视图控制(看法)。地图容器还支持一些与用户交互的控件(Control和Interaction),OpenLayers也支持事件机制。2、简单的地图显示importOSMfrom'ol/source/OSM';import'ol/ol.css';exportdefaultfunctionIndex(){useEffect(()=>{//初始化地图initMap();},[])/***初始化地图*/constinitMap=()=>{newMap({//使用idmaptarget:'map',//挂载到div容器,//设置地图层layers:[//创建地图使用OpenStreetMapThetilelayerofthemapsourcenewTileLayer({source:newOSM()})],//设置地图视图view:newView({//设置空间参考系统为'EPSG:3857'projection:'EPSG:3857',//地图中心的显示中心:fromLonLat([0,0]),//地图的显示级别zoom:3})})}return(

)}调用Map类生成一个地图容器对象,并关联到id为div的容器是通过目标参数映射的。通过layers参数设置要加载的瓦片层(TileLayer)。这个瓦片图层包含一个数据源(OSM),即OpenStreetMap的地图数据。通过view参数设置地图视图(View),在地图视图中设置对应的空间参考系(projection)、地图视图中心点(center)、地图视图缩放级别(zoom)。3、OpenLayers的DOM元素组织结构OpenLayers会在自定义的div容器中创建viewport容器,地图中的所有内容都会放在viewport中进行展示。视口容器中有三个关键元素层:地图渲染层(ol-layers):这是一个canvas元素,地图是基于canvas2D渲染的。内容叠加层(ol-overlaycontainer):用于放置叠加层(Overlay),比如在地图上添加弹窗。地图控制层(ol-overlaycontainer-stopevent):用于放置控件。默认情况下,Zoom(用于控制地图放大缩小)、Rotate(用于控制地图旋转)、Attribution(用于控制地图右下角)这三个控件。参考文章:OpenLayers教程一:OpenLayers概述OpenLayers教程二:实现简单的地图显示