（转）maptalks+vue——初始化地图

前言

maptalks配合VUE开发地图服务

一、maptalks是什么？

一个用于集成2D / 3D地图的开源javascript库。
maptalks官网
maptalks官方实例

二、使用步骤

1.引入css和js
在VUE根目录的index.html引入

代码如下（示例）：

<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>

2.初始化地图
代码如下（示例）：

export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
	var map = this.map;
	this.map = new maptalks.Map("mapZhzf", {
      center: [120.310246, 31.571705], // 默认中心点点位
      zoom: 12, // 缩放层级 
      pitch: 50, // 倾斜度
      minZoom: 1, // 最小缩放层级
      maxZoom: 18,// 最大缩放层级
      spatialReference: {
        projection: "EPSG:4326"
      },
      //底图 这里我用的是天地图的底图，各位可以根据需求自行更改
      baseLayer: new maptalks.WMTSTileLayer("base", {
        tileSystem: [1, -1, -180, 90],
        layer: "vec",
        tilematrixset: "c",
        format: "tiles",
        // css filter
        cssFilter: "sepia(100%) invert(90%)",
        urlTemplate:
          "http://t{s}.tianditu.com/vec_c/wmts?tk=天地图key",
        subdomains: ["1", "2", "3", "4", "5"],
        attribution:
          '&copy; <a target="_blank" href="http://www.tianditu.cn">Tianditu</a>'
      })
    });
    // 使用动画更新地图的视图
    this.map.animateTo(
      {
        center: [120.76017, 31.35071], // 目标点位
        zoom: 12.5, // 缩放层级
        pitch: 0, // 倾斜度
        bearing: 0 // 旋转度
      },
      {
        duration: 3000 // 移动速度
      }
    );
	}

原文链接：https://blog.csdn.net/qq_43086723/article/details/108581722