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) // 按当前串线的最适合尺寸缩放地图