openlayers 6【一】Map地图详解，初始化一个map地图

地图map是由图层layers、一个可视化视图view、用于修改地图内容的交互interaction以及使用UI组件的控件control组成的。

官方文档：openlayers.org/en/latest/a…

map参数详情参考

（1）、options选项

（2）、地图事件

（3）、地图方法

完整代码分析

在vue环境下，创建一个Map地图

1、首先页面需要先创建一个 div，用来绑定 map 地图上

<div id="map" ref="map"></div>

2、安装ol

npm install ol

2、完整代码

import 'ol/ol.css';
import olMap from 'ol/Map.js';
import {
    fromLonLat,
} from 'ol/proj.js';
import View from 'ol/View.js';

import XYZ from 'ol/source/XYZ.js';
import {
    Tile as TileLayer
} from 'ol/layer.js';

export default class Map {
    constructor() {
        this.initMap();
    }

    initMap(){
        /**
        * 3857坐标类似于[14268216.554252842, 3627838.3347710525] 
        */
        this.view = new View({
            projection:'EPSG:3857',  // 默认是3857， 可以不写
            center: fromLonLat([120.15723903726405, 28.40811810432885]),  // 
            zoom: 6,
        });
        this.xyzLayer = new TileLayer({
            source: new XYZ({url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"}),
        });
        this.map = new olMap({
            target: "map",
            layers: [this.xyzLayer],
            view: this.view
        });
    }
}