vue 引入 maptalks

青旅半醒 2022-09-12 08:57 444阅读 0赞

## 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:
                '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <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>