vue中，初始化maptalks

原创已于 2025-03-25 10:19:19 修改 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2025-03-25 10:12:31 首次发布

更多示例请看官网：maptalks - for building 2D/3D maps

直接上代码:

<template>
  <div>
    <div id="map" class="container"> </div>
  </div>
</template>

<script setup>
import * as maptalks from 'maptalks-gl'; // 安装 npm i maptalks-gl
import { onMounted } from 'vue'
onMounted(() => {
  const map = new maptalks.Map("map", {
    center: [-0.113049, 51.498568], // 初始化显示的地图中心点
    zoom: 14,
    baseLayer: new maptalks.TileLayer("base", { // 添加一个TileLayer作为底图  这里可以更换底图，比如天地图等
      urlTemplate: "https://{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>",
    }),
  });
})
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
}
</style>