从零搭建 Vue 项目使用 MapTalks 打造地图可视化页面

2023-10-21 15:01:43

搭建 Vue 项目

安装 Vue CLI

npm install -g @vue/cli

创建项目

vue create vue-maptalks-demo

cd vue-maptalks-demo

安装 MapTalks

npm install maptalks

使用 MapTalks 创建地图可视化页面

在 src/components/Map.vue 文件中，添加以下代码：

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

<script>
import * as maptalks from 'maptalks';

export default {
  name: 'Map',
  mounted() {
    const map = new maptalks.Map('map', {
      center: [120.19, 30.26],
      zoom: 12
    });

    const layer = new maptalks.VectorLayer('vector');
    map.addLayer(layer);

    const marker = new maptalks.Marker([120.19, 30.26]);
    layer.addGeometry(marker);
  }
};
</script>

在 src/App.vue 文件中，添加以下代码：

<template>
  <div id="app">
    <Map />
  </div>
</template>

<script>
import Map from './components/Map.vue';

export default {
  name: 'App',
  components: {
    Map
  }
};
</script>