vue项目 高德api加载本地geojson

Question

vue2项目或vue3 高德地图api加载geojson数据（本地geojson数据），如下图：

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

1. 在vue项目中引入高德地图API
首先，在vue项目中安装高德地图API的npm包。

npm install @amap/amap-jsapi-loader

然后，在main.js文件中引入高德地图API并初始化。

// main.js

import { createApp } from 'vue'
import App from './App.vue'

// 引入高德地图API
import AmapLoader from '@amap/amap-jsapi-loader'

// 初始化高德地图API
AmapLoader.load({
  key: 'YOUR_AMAP_API_KEY', // 替换为你申请的高德地图API的key
  version: '1.4.15',
}).then(() => {
  createApp(App).mount('#app')
})

2. 加载本地geojson数据
在vue组件中，可以通过高德地图的Loca库和GeoJSONLayer类来加载本地的geojson数据。

首先，创建一个Vue组件，并在模板中添加一个具有唯一ID的div元素作为地图容器。

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

<script>
export default {
  name: 'MapComponent',
}
</script>

<style>
#mapContainer {
  width: 100%;
  height: 600px;
}
</style>

然后，在组件的生命周期钩子函数中初始化地图和加载geojson数据。

<script>
import { onMounted } from 'vue'

export default {
  name: 'MapComponent',

  // 定义组件的生命周期钩子函数
  mounted() {
    // 在组件挂载后执行初始化地图和加载geojson数据
    onMounted(() => {
      // 创建地图实例
      const map = new AMap.Map('mapContainer', {
        zoom: 10,
        center: [116.397428, 39.90923], // 设置地图中心点坐标
      })

      // 加载geojson数据
      const geojsonLayer = new Loca.GeoJSONLayer({
        map: map,
        zIndex: 10,
      })

      // 读取本地geojson文件（假设文件路径为src/assets/data/geojsondata.geojson）
      fetch('src/assets/data/geojsondata.geojson')
        .then((response) => response.json())
        .then((geojson) => {
          // 加载geojson数据
          geojsonLayer.setData(geojson)
          // 渲染geojson数据
          geojsonLayer.render()
        })
    })
  },
}
</script>

上述代码假设本地的geojson数据文件为src/assets/data/geojsondata.geojson，你需要根据实际情况更改路径。

注意：

• 在以上代码中，需要将YOUR_AMAP_API_KEY替换为你申请的高德地图API的key。
• 需要在vue项目的public/index.html文件中引入高德地图的CSS文件。

  <link
    rel="stylesheet"
    href="https://webapi.amap.com/ui/1.0/main.css"
  />
  

这样，你就可以在vue项目中加载本地的geojson数据并在高德地图上显示了。