VUE中天地图基于maptalks加载（影像）

VUE中天地图基于maptalks加载（影像）_maptalks 加载天地图_不想学习只想玩的博客-CSDN博客

## 天地图基于maptalks加载

在index.html里面写

    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=0c005ba20f7255ad23ebd218a6f2acdd" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
    <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>

vue页面中
注意：id="yxMap"中的yzMap要与地图初始化中的保持一致

<div id="yzMap" style="position: absolute; width: 99%; height: 95%"></div>

首先npm install

npm install maptalks.wmts -dev-save

然后在vue页面中引入

import { WMTSTileLayer } from 'maptalks.wmts'

地图初始化

init() {
          this.map = new maptalks.Map('yzMap', {
            center: [117.174955, 37.941390], //地图的初始中心
            zoom: this.size, //地图的初试缩放
            dragPitch: true, //是否可以倾斜（Ctrl+鼠标操作实现）
            dragRotate: true, //是否可以旋转
            dragRotatePitch: false, //是否旋转倾斜可以同时操作
            baseLayer: new WMTSTileLayer('base', {
                urlTemplate: 'https://t5.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=自己申请的',
                subdomains: ["a", "b", "c", "d"],
                // attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            }),
            layers: [
                new maptalks.VectorLayer('v', [new maptalks.Marker([117.174955, 37.941390])]) //红色位置图标
            ]
        });
        console.log("");
    },