openlayers初始化

1.安装ol（官网ol已更新到openlayers7版本，我所用的是v6.14.1）

yarn add ol     //安装openlayers

2.初始化openlayer地图

先创建一个容器来存放map，设置好id

 引入初始化地图所需要的ol参数

import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ'
import View from 'ol/View';
import control, { defaults as defaultControls } from 'ol/control'

地图初始化（这里我只是封装的初始化的方法）

 //初始化olMap
    static init() {
        this.map = new Map({
            layers: [this.gaodeLayers],   //这里采用的是高德矢量图层作为地图底图
            // layers: [
            //     new TileLayer({
            //         source: new OSM()     //openlayers的底图
            //     })
            // ],
            target: 'olMap',   //对应容器id
            interactions: defaults({
                "altShiftDragRotate": true, // 按住shift和Alt，拖动鼠标左键进行地图旋转
            }),
            view: new View({
                center: this.defaultLonLat,
                zoom: this.defaultZoom,
                projection: "EPSG:4326",
                maxZoom: 18,
                extent: [-180, -90, 180, 90]
            }),
            //加载控件到地图容器中

            // ol.control.Attribution: 右下角的地图信息控件
            // ol.control.FullScreen: 全屏控件
            // ol.control.MousePosition: 鼠标位置控件
            // ol.control.OverviewMap: 鸟瞰图控件
            // ol.control.Rotate: 指北针控件
            // ol.control.ScaleLine: 比例尺控件
            // ol.control.Zoom: 缩放按钮控件
            // ol.control.ZoomSlider: 缩放滚动条控件
            // ol.control.ZoomToExtent: 放大到设定区域控件
            controls: defaultControls({
                zoom: false,  
                rotate: false,        
                attribution: false,
            })
        })

    }

3.底图自定义

可以自定义openlayers地图底图，如腾讯，高德，天地图，都有提供矢量地图影像，加载效果来说高德，ol原生加载速度很快，天地图会稍微慢一点（老毛病了），去官网申请对应的key即可，添加底图的方式为加载XYZ矢量图层

  //天地图图层 
    static TDTLayer = new TileLayer({
        source: new XYZ({
            url: ` http://t0.tianditu.com/DataServer?T=img_w&tk=${env.TDTKEY}&x={x}&y={y}&l={z}`
        }),
    })
    //高德地图图层
    static gaodeLayers = new TileLayer({
        source: new XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6',
            wrapX: false
        })
    })
    //天地图影像底图
    static TDTSelfLayer = new TileLayer({
        source: new XYZ({
            url: `http://t3.tianditu.com/DataServer?T=img_w&tk=${env.MESELFKEY}&x={x}&y={y}&l={z}`
        }),
    })

4.效果图（这里选用的高德底图）