vue 引入 maptalks

vue 引入 maptalks基础

//添加maptalks.js依赖
npm install maptalks

//vue引入maptalks
<template lang="pug">
    #map.container
</template>
<script>
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";
export default {
  data() {
    return {
      map: "",
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.map = new maptalks.Map("map", {
        center: [120.20377025390627, 30.19386063195693], //中心坐标位置
        zoom: 14, //地图层级
        dragPitch: true, //是否可以倾斜
        dragRotate: true, //是否可以旋转
        dragRotatePitch: false, //是否旋转倾斜可以同时操作
        baseLayer: new maptalks.TileLayer("base", {
          urlTemplate:
            "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
          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")],
      });
      //   移动地图选择器
      var toolbar = new maptalks.control.Toolbar({
        items: [
          {
            item: "↑",
            click: this.up,
          },
          {
            item: "↓",
            click: this.down,
          },
          {
            item: "←",
            click: this.left,
          },
          {
            item: "→",
            click: this.right,
          },
          {
            item: "pan to",
            click: this.toCoordinate,
          },
        ],
      }).addTo(this.map);
      console.log("map: ", this.map);
    });
  },
  methods: {
    //   上移
    up() {
      this.map.panBy([0, -200]);
    },
    // 下移
    down() {
      this.map.panBy([0, 200]);
    },
    // 左移
    left() {
      this.map.panBy([-200, 0]);
    },
    // 右移
    right() {
      this.map.panBy([200, 0]);
    },
    toCoordinate() {
      var symbol = {
        markerType: "x",
        markerLineColor: "#f00", //标记颜色
        markerLineWidth: 4, //标记粗细
        markerWidth: 20, //标记宽度
        markerHeight: 20, //标记高度
      };
      var coordinate = this.map.getCenter().add(0.008, 0.008);
      this.map
        .getLayer("v")
        .clear()
        .addGeometry(new maptalks.Marker(coordinate, { symbol: symbol }));
      this.map.panTo(coordinate);
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>