maptalks使用实例

js代码

import { defineStore } from "pinia";
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";
export let useStore = defineStore("maptalks", {
  state() {
    return {
      mapObj: null,
    };
  },
  actions: {
    // 初始化地图
    mapInit(mapName) {
      let map = new maptalks.Map(mapName, {
        // 地图初始中心点坐标
        center: [-0.113049, 51.498568],
        zoom: 14,
        layerSwitcherControl: {
          position: "top-right",
          // title of base layers
          baseTitle: "Base Layers",
          // title of layers
          overlayTitle: "Layers",
          // layers you don't want to manage with layer switcher
          excludeLayers: [],
          // css class of container element, maptalks-layer-switcher by default
          containerClass: "maptalks-layer-switcher",
        },
        baseLayer: new maptalks.GroupTileLayer("Base TileLayer", [
          new maptalks.TileLayer("Carto light", {
            urlTemplate:
              "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
            subdomains: ["a", "b", "c", "d"],
          }),
          new maptalks.TileLayer("Carto dark", {
            visible: false,
            urlTemplate:
              "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
            subdomains: ["a", "b", "c", "d"],
          }),
        ]),
        // 地图可滚动最小层级
        minZoom: 1,
        // 地图可滚动最大层级
        maxZoom: 19,
        // 地图投影属性
        spatialReference: {
          projection: "baidu",
        },
        // 地图投影组 设置多个可做地图切换功能
        // 注意：base-map  这里要与页面中dom地图容器id名相同
        baseLayer: new maptalks.GroupTileLayer("base-map", [
          // 百度白色底图
          new maptalks.TileLayer("white-map", {
            // 投影路径
            urlTemplate:
              "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
            // 路径参数
            subdomains: [0, 1, 2],
            // 左下角
            attribution:
              '&copy; <a target="_blank" href="http://map.baidu.com">Baidu</a>',
          }),
          //百度深色底图
          new maptalks.TileLayer("dark-map", {
            urlTemplate:
              "http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&udt=20170620&scale=1&ak=8d6c8b8f3749aed6b1aff3aad6f40e37&styles=t%3Awater%7Ce%3Aall%7Cc%3A%23044161%2Ct%3Aland%7Ce%3Aall%7Cc%3A%23091934%2Ct%3Aboundary%7Ce%3Ag%7Cc%3A%23064f85%2Ct%3Arailway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Ahighway%7Ce%3Ag%7Cc%3A%23004981%2Ct%3Ahighway%7Ce%3Ag.f%7Cc%3A%23005b96%7Cl%3A1%2Ct%3Ahighway%7Ce%3Al%7Cv%3Aon%2Ct%3Aarterial%7Ce%3Ag%7Cc%3A%23004981%7Cl%3A-39%2Ct%3Aarterial%7Ce%3Ag.f%7Cc%3A%2300508b%2Ct%3Agreen%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%23056197%2Ct%3Asubway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Amanmade%7Ce%3Aall%7Cv%3Aoff%2Ct%3Alocal%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aarterial%7Ce%3Al%7Cv%3Aon%2Ct%3Aboundary%7Ce%3Ag.f%7Cc%3A%23029fd4%2Ct%3Abuilding%7Ce%3Aall%7Cc%3A%231a5787%2Ct%3Apoi%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aall%7Ce%3Al%7Cv%3Aoff",
            subdomains: [0, 1, 2],
            visible: false,
            attribution:
              '&copy; <a target="_blank" href="http://map.baidu.com">Baidu</a>',
          }),
        ]),
      });
      // 将地图实例存储到全局
      this.mapObj = map;
      var layer = new maptalks.VectorLayer("Vector Markers", [
        new maptalks.Marker(map.getCenter().add(0.01, 0.006)),
        new maptalks.Marker(map.getCenter().add(0.01, 0)),
        new maptalks.Marker(map.getCenter().add(0.01, -0.006)),
      ]);
      layer.addTo(map);

      var layer2 = new maptalks.VectorLayer(
        "Circle Markers",
        [
          new maptalks.Marker(map.getCenter().add(-0.01, 0.006)),
          new maptalks.Marker(map.getCenter().add(-0.01, 0)),
          new maptalks.Marker(map.getCenter().add(-0.01, -0.006)),
        ],
        {
          style: [
            {
              filter: true,
              symbol: {
                markerType: "ellipse",
                markerWidth: 20,
                markerHeight: 20,
                markerFill: "#f00",
                markerLineWidth: 2,
              },
            },
          ],
        }
      );
      layer2.addTo(map);
      // 返回地图实例
      return map;
    },
  },
});

页面文件代码:

<template>
  <div class="home">
    <!-- 地图实例 -->
    <!-- 指南针图标 -->
    <div class="compass">
      <img id="compass" src="../../assets/1.jpg" />
    </div>

    <div class="base-map" id="base-map"></div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { useStore } from "../../store/maptalks";
let store = useStore();
onMounted(async () => {
  let res = await store.mapInit("base-map");
  res.on("rotate", function (param) {
    let angle = 0;
    if (param.from === 0) {
      angle = 0;
    }
    if (param.from < 0) {
      angle = -param.from;
    } else if (param.from <= 179.9999999999999 && param.from > 0) {
      angle = 360 - param.from;
    }
    // 获取元素 ———— 指北针图标的ID
    let ele = document.getElementById("compass");
    // 设置度数
    ele.style.transform = "rotate(" + angle + "deg)";
  });
});
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  position: relative;
}
.base-map {
  width: 100%;
  height: 100%;
}
.compass {
  position: absolute;
  top: 2%;
  left: 2%;
  width: 90px;
  height: 88px;
  z-index: 2;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>