官方文档

基本概念

Map地图

OpenLayers的核心组件是map（ol/map），被呈现到目标容器当中（例如，包含地图的网页上的div元素）；所有的地图元素要么在构造时配置所有映射属性

下面的标记可用于创建包含地图的 div 元素：

<div id="map" style="width: 100%, height: 400px"></div>

1
2

View视图图层

View是指地图视图图层，包括中心点、缩放等级、分辨率等数据都是依赖图层去展示的；

import View from 'ol/View';

map.setView(new View({
  center: [0, 0],
  zoom: 2
}));
1
2
3
4
5
6

Source数据源

为了获取层的远程数据，OpenLayers使用ol/source/source子类。这些可用于OpenStreetMap或Bing等免费和商业地图平铺服务、WMS或WMT等OGC源以及GeoJSON或KML等格式的矢量数据。

import OSM from 'ol/source/OSM';

var osmSource = OSM();
1
2
3

Layer图层

图层是源数据的可视化表示形式，OpenLayers有四种基本类型的层：

• ol/layer/Tile：瓦片图层——平铺-渲染网格中提供平铺图像的源，网格按特定分辨率的缩放级别组织。

• ol/layer/Image：图像——渲染以任意范围和分辨率提供地图图像的源。

• ol/layer/Vector：矢量图层——在客户端呈现向量数据。

• ol/layer/VectorTile：矢量瓦片——作为矢量分幅提供的数据呈现。

import TileLayer from 'ol/layer/Tile';

var osmLayer = new TileLayer({source: osmSource});
map.addLayer(osmLayer);
1
2
3
4

vue openlayers应用

<template>
    <div>
        <div class="ol-map" ref="olMap"></div>

        <!--可以给元素设置一些样式-->
        <div class="ol-popup" ref="olPopup">{{ olPopupText }}</div>
    </div>
</template>

<script>
import Map from "ol/Map";
import View from "ol/View";
import { Tile as TileLayer } from "ol/layer";
import { OSM, XYZ, WMTS } from "ol/source";
import { fromLonLat } from "ol/proj";
import {
    defaults as defaultInteractions,
    DragRotateAndZoom,
} from "ol/interaction";
import { defaults, FullScreen, MousePosition, ScaleLine } from "ol/control";
import Overlay from "ol/Overlay";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import { Style, Icon } from "ol/style";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import { Translate } from "ol/interaction";
import { Draw } from "ol/interaction";
import GeometryType from "ol/geom/GeometryType";
import { createRegularPolygon, createBox } from "ol/interaction/Draw";
import { Modify } from "ol/interaction"

export default {
    name: "exm1",
    data () {
        return {
            olPopupText: "default text"
        }
    },
    created () { },
    mounted () {
        // 使用内置的osm
        //  const tileLayer = new TileLayer({
        //      source: new OSM()
        //  });

        // 使用 天地图 的瓦片数据
        // const tileLayer = new TileLayer({
        //     source: new XYZ({
        //         url: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=9b21fa580b77ebbb20ee6245e2fc96eb"
        //     })
        // })

        // ??? 如何加载 wmts 服务， 下面有问题代码
        // const tileLayer = new TileLayer({
        //     source: new WMTS({
        //         url: "http://t1.tianditu.gov.cn/vec_c/wmts?tk=9b21fa580b77ebbb20ee6245e2fc96eb"
        //     })
        // })

        // 使用 高德 的瓦片数据
        const tileLayer = new TileLayer({
            source: new XYZ({
                url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
            }),
        });
        let map = new Map({
            layers: [tileLayer],
            view: new View({
                center: fromLonLat([120.771441, 30.756433]), // 地图中心点
                zoom: 15, // 缩放级别
                minZoom: 0,
                maxZoom: 18,
                constrainRotation: true, // 因为存在非整数的缩放级别，所以设置参数true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
            }),
            target: this.$refs.olMap,
            controls: defaults().extend([
                new FullScreen(), // 显示全屏
                new MousePosition(), // 显示鼠标当前位置的经纬度
                new ScaleLine(), // 显示比例尺
            ]),
        });
        map.on("click", (e) => {
            console.log("地图点击", e);
        });
    },
};
</script>

<style scope>
.ol-map {
    height: 90vh;
}

.ol-popup {
    width: 40px;
    height: 30px;
    font-size: 14px;
    text-align: center;

}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102