openLayers

1. 开源的javascript的库，用来在web浏览器显示地图，提供的API类似于Google地图和Bing地图
2. 使用的默认投影坐标：EPSG：3857，和OSM(OpenStreetMap)/Google Map/Bing Map默认坐标一致; 不同于高德百度地图的数据格式('EPSG:4326' WGS 84)，使用前注意转换
3. 坐标格式：coordinate: [lon,lat] [(longitude)经度, (Latitude)纬度]

注意点

1. 如果该应用程序旨在在Internet Explorer或Android 4.x等旧平台上运行，则在OpenLayers之前需要包含另一个脚本：<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
2. 加载问题：加载场景，地图加载

初始化一个简单的 map

1. 引入
   

   CDN

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
   
   <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
   
   

   NPM

   npm install ol

   import { Map, View} from "ol";
   import TileLayer from "ol/layer/Tile"; 
   import { XYZ, OSM } from "ol/source";
   

2. 创建map

   <div id="mapTarget" class="map"></div>
   <style>.map {width:800px;height:600px;}</style>
   <script type="text/javascript">
   let mapView = new View({
       center: [lon, lat],
       zoom: 4
     })
   let map = new Map({
     target: 'mapTarget',
     layers: [
       new TileLayer({
         source: new XYZ({url:'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scl=1&style=7&x={x}&y={y}&z={z}'}) //引入高德地图
         //source: new OSM() //使用OSM地图
       }),
     ],
     view: mapView
   })
   </script>
   

   CDN引入的创建方式也类似，只是需要格式有些变化，例如：new ol.map({})

为Map添加标记点

1. 添加标记点

   import VectorLayer from "ol/layer/Vector";
   import Feature from "ol/Feature";
   import Point from "ol/geom";
   import VectorSource from "ol/source/Vector";
   
   let feature =  new Feature({ geometry: new Point([lon, lat]) })
   let pointLayer = new VectorLayer({
     source: new VectorSource({
       features:[feature]
     })
   })
   
   map.addLayer(pointLayer)
   
   

2. 标记点样式 (图文标记)
   

   Style: 元素的样式

   Icon: 图标

   Text: 文字

   Fill: 元素填充样式

   图文样式
   
   import { Style, Icon, Text, Fill, Stroke } from "ol/style";
   
   let style = new Style({
      image: new Icon({
         anchor: [0.5, 0.5],
         anchorYUnits: "pixels",
         anchorOrigin: "bottom-right",
         offsetOrigin: "top-right",
         offset: [0, 0],
         opacity: 1,
         crossOrigin: "Anonymous",
         scale: 1,
         src: './img/starticon.png',
       }),
   
       text: new Text({
         text: '航线起点',
         font: "normal 16px Source Han Sans CN",
         textAlign: "center",
         fill: new Fill({ color: "#000000" }),
       }) // 标记文字的样式
   })
   
   feature.setStyle(style)
   

为Map 添加串线(由标记点连接而成)

1. 使用openlayers 的 LineString (串线) api

Stroke: 串线样式

2. 添加线

   import VectorLayer from "ol/layer/Vector";
   import VectorSource from "ol/source/Vector";
   import Feature from "ol/Feature";
   import LineString from "ol/geom";
   import { Style, Stroke } from "ol/style";
   
   let lineGeometry =  new LineString([coordinate0, coordinate1, ...])
   let lineStringLayer = new VectorLayer({
   source: new VectorSource({
     features: [
       new Feature({
         geometry: lineGeometry,
       }),
     ],
     wrap: false,
   }),
   style: new Style({
     stroke: new Stroke({
       color: "#4ed8aa",
       width: 6,
     }),
   }),
   });
   
   

openlayers 的 overlay 为地图添加覆盖层

1. 添加overlay

   <div id="realAir"><img src="@/assets/demo/drone.gif" style="width: 40px;"></div>
   
   import { Map, View, Overlay } from "ol"; 
   
   let overlay =  new Overlay({
   id: "realair",
   element: document.getElementById("realAir"),
   position: realFeatures,
   positioning: "center-center"
   })
   
   map.addOverlay(overlay)
   
   

地图居中的两方式

1. center: [lon, lat], zoom: 4
2. mapView.fit(lineGeometry) //按当前串线的最适合尺寸缩放地图