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>        

标签：Vue,projection,地图,ol,OpenLayers,new,var,import,resolutions
来源： https://www.cnblogs.com/zypweb/p/15089929.html