Vue+OpenLayers天地图【四】

<template>
    <div id="map" ref="rootmap"></div>
</template>
<script>
import "ol/ol.css";
import { get as getProjection } from "ol/proj";
import { getWidth, getTopLeft } from "ol/extent";
import View from "ol/View";
import Map from "ol/Map";
import TileLayer from "ol/layer/Tile";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";

/* eslint-disable */
export default {
    name: "map",
    data () {
        return {
            map: null,
            routeLayer: null,
            routeFeature: null,
            lineData: [],
            map1: null,
            view: null,
            vectorSource: null,
        }
    },
    mounted () {
        // 渲染地图
        var projection = getProjection('EPSG:4326')
        var projectionExtent = projection.getExtent()
        var size = getWidth(projectionExtent) / 256
        var resolutions = new Array(18)
        var matrixIds = new Array(18)
        for (var z = 1; z < 19; ++z) {
            resolutions[z] = size / Math.pow(2, z)
            matrixIds[z] = z
        }
        var webKey = '这里需要改为你的key值' // 这里需要改为你的key值
        var wmtsUrl_1 = 'http://t{0-7}.tianditu.gov.cn/vec_c/wmts?tk=' // 矢量底图
        var wmtsUrl_2 = 'http://t{0-7}.tianditu.gov.cn/cva_c/wmts?tk=' // 矢量注记
        this.view = new View({
            center: [112.55, 37.87],
            projection: projection,
            zoom: 5
        })
        this.map1 = new Map({
            layers: [
                new TileLayer({
                    opacity: 0.7,
                    source: new WMTS({
                        url: wmtsUrl_1 + webKey,
                        layer: 'vec',
                        matrixSet: 'c',
                        format: 'tiles',
                        style: 'default',
                        projection: projection,
                        tileGrid: new WMTSTileGrid({
                            origin: getTopLeft(projectionExtent),
                            resolutions: resolutions,
                            matrixIds: matrixIds
                        }),
                        wrapX: true
                    })
                }),
                new TileLayer({
                    opacity: 0.7,
                    source: new WMTS({
                        url: wmtsUrl_2 + webKey,
                        layer: 'cva',
                        matrixSet: 'c',
                        format: 'tiles',
                        style: 'default',
                        projection: projection,
                        tileGrid: new WMTSTileGrid({
                            origin: getTopLeft(projectionExtent),
                            resolutions: resolutions,
                            matrixIds: matrixIds
                        }),
                        wrapX: true
                    })
                })
            ],
            target: 'map',
            view: this.view
        })
        this.vectorSource = new VectorSource({
            features: []
        })
        // 初始化矢量图层
        var vectorLayer = new VectorLayer({
            source: this.vectorSource
        })
        // 将矢量图层添加到map
        this.map1.addLayer(vectorLayer)
    },
    methods: {}
}
</script>
<style>
#map {
    width: 1000px;
    height: 600px;
}
</style>