标签：Vue projection 地图 ol OpenLayers new var import resolutions

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。