openLayers

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

注意点

如果该应用程序旨在在Internet Explorer或Android 4.x等旧平台上运行，则在OpenLayers之前需要包含另一个脚本：
加载问题：加载场景，地图加载。

初始化一个简单的 map

引入

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";

创建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添加标记点

添加标记点

import VectorLayer from "ol/layer/Vector";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
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);

标记点样式 (图文标记)

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 添加串线(由标记点连接而成)

使用openlayers 的 LineString (串线) api。

Stroke: 串线样式

添加线

import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Feature from "ol/Feature";
import LineString from "ol/geom/LineString";
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,
    }),
  }),
});

map.addLayer(lineStringLayer);

openlayers 的 overlay 为地图添加覆盖层

添加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);

地图居中的两方式

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