OpenLayers简介（一）

从'ol/Map'导入地图从'ol/View'导入视图从'ol/layer'导入{XYZ,OSM}from'ol/source'import{fromLonLat}from'ol/proj'//fromLonLat方法可以将坐标从经度/纬度转换为其他投影//使用内置OSM//consttileLayer=newTileLayer({//source:newOSM()//})//使用高德consttileLayer=newTileLayer({source:newXYZ({url:'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'})})letmap=newMap({layers:[tileLayer],view:newView({center:fromLonLat([120.771441,30.756433]),//地图中心点zoom:15,//缩放级别minZoom:0,//最小缩放级别maxZoom:18,//最大缩放级别constraintResolution:true//因为有非整数缩放级别，设置这个参数为true表示每次缩放后自动缩放到最接近的整数级别，这个必须设置，非整数级别缩放时，地图会变成蓝色rred}),target:this.$refs.olMap//DOMContainer})这样就可以显示一个基本的地图：可以拖动和缩放，但不能旋转。如果需要支持旋转，需要添加旋转交互：import{defaultsasdefaultInteractions,DragRotateAndZoom,}from'ol/interaction'letmap=newMap({//...interactions:defaultInteractions().extend([newDragRotateAndZoom()])})这样你就可以在按住鼠标的同时传递鼠标shift键旋转地图OpenLayers内置了许多开箱即用的控件，常用如下：import{defaults,FullScreen,MousePosition,ScaleLine}from'ol/control'letmap=newMap({//...controls:defaults().extend([newFullScreen(),//全屏newMousePosition(),//显示鼠标当前位置的经纬度newScaleLine()//显示比例尺])})地图也有很多事件，你可以监听你需要的事件来执行相应的操作，使用如下：map.on('moveend',e=>{//console.log('mapmovement',e)})map.on('rendercomplete',()=>{//console.log('渲染完成')})map.on('click',e=>{//console.log('mapclick',e)})显示地图基本就到这里了，我们来看看一些常见的使用场景。显示元素在地图上显示一些自定义元素可以说是最基本也是最普遍的需求。如果要展示的元素结构或者样式比较复杂，可以使用Overlay，它可以在地图上展示DOM元素，并且会和地图一起移动。importOverlayfrom'ol/Overlay'//可以给元素添加任意内容或者属性或者样式，也可以给元素绑定事件letel=document.createElement('div')letmarker=newOverlay({element:el,//要显示的元素position:fromLonLat([longitude,latitude],'EPSG:4326'),//地图投影的位置offset:[-17,-17],//像素点元素显示的偏移量autoPan:true,//自动移动地图使元素完全显示小图标、多边形、线条类需要用到矢量对象Feature。首先，让我们看看如何显示一个图片图标：/source'import{Style,Icon}from'ol/style'//实例化特征letfeature=newFeature({geometry:newPoint([120.12636255813723,30.313142215804806])//地理几何Geometry的选择点})//如果feature.set('data',data)//设置样式，这里是显示一个图片iconfeature.setStyle([newStyle({image:newIcon({anchor:[0.5,1],//显示位置size:[18,28],//sizesrc:require('../../assets/images/mouse_location_ing.png')//Imageurl})})])//Vectorsourceletsource=newVectorSource({features:[feature]})//实例化的时候不需要加feature，按照-upmethodAdd:source.addFeatures([feature])//清除feature:source.clear()//Vectorlayerletvector=newVectorLayer({source:source})//可以在单个特征上设置样式或者在单个特征上统一设置在矢量图层上/*letvector=newVectorLayer({source:source,style:newStyle({image:newIcon({anchor:[0.5,1],//显示位置size:[18,28],//sizesrc:require('../../assets/images/mouse_location_ing.png')//imageurl})})})*/map.addLayer(vector)上面实现添加一个icon如果你想在地图上添加多个功能，只需实例化多个功能。效果如下：有时候需要支持拖动特性来修改它的位置。为此，需要Translate交互的支持：import{Translate}from'ol/interaction'//...//...lettranslate=newTranslate({layers:[vector]})map.addInteraction(translate)//可以监听拖拽开始和结束事件，拖拽最终的经纬度可以从e中获取translate.on('translateend',(e)=>{console.log(e)})translate.on('translatestart',(e)=>{console.log(e)})删除为了直接显示在地图上，也可以自己添加，即在鼠标点击的位置添加一个元素，需要使用Draw交互：import{Draw}from'ol/interaction'letdraw=newDraw({source:source,type:'Point',style:newStyle({image:newIcon({anchor:[0.5,1],//显示位置size:[18,28],//大小src:require('../../assets/images/mouse_location_ing.png')//图片url})})})//监听完成事件draw.on('drawend',(e)=>{console.log(e)//如果你只需要放置一个，你可以移除交互，否则你可以随时添加map.removeInteraction(draw)})map.addInteraction(draw)因为如果图标太多，你不知道一个icon代表什么，所以经常需要给icon添加一个tooltip，当鼠标上移时显示。如何实现？事实上，工具提示本质上是一个DOM元素。Overlay上面已经介绍过了，用它来实现。请看：{{olPopupText}}