揭秘10分钟内搞定Vue3+高德地图AMap+GeoJSON地块批量绘制地图的诀窍

2023-05-03 01:59:55

引入依赖与初始化地图

在开始之前，确保已经安装了vue-amap和对应的高德地图API。使用npm或yarn来引入所需组件。

npm install vue-amap --save
# 或者
yarn add vue-amap

初始化Vue3项目时，需要在main.js中注册AMap插件：

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

const app = createApp(App)
app.use(Amap)

配置高德地图API

通过AMap.initAMapApiLoader方法配置高德地图的初始化参数，包括密钥和所需的插件列表。

AMap.initAMapApiLoader({
    key: '你的高德地图Key',
    plugin: ['AMap.GeometryUtil', 'AMap.GeoJSON'],
})

确保在实际开发中替换上述代码中的'你的高德地图Key'为自己的密钥，获取方式可以参考官方文档。

使用GeoJSON数据

准备好包含地块信息的GeoJSON格式的数据。接下来通过Vue3组件和AMap的API来加载并展示这些数据。

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

<script>
import { onMounted } from 'vue'
export default {
  setup() {
    let map = null

    const loadGeoJSONData = async () => {
      try {
        const response = await fetch('path/to/your/geojson/data.json')
        const geojsonData = await response.json()
        
        AMap.load({
          GeoJSON: true
        }).then((AMap) => {
          map = new AMap.Map('mapContainer', {
            zoom: 10,
            center: [经度, 纬度]
          })
          
          const geojsonLayer = new AMap.GeoJSON({
            url: 'path/to/your/geojson/data.json',
            getPolygon: function (geoJsonFeature) {
              return new AMap.Polygon({
                path: geoJsonFeature.geometry.coordinates[0],
                strokeColor: "#FF33FF",
                strokeWeight: 6,
                fillColor: '#1791fc',
                fillOpacity: 0.5
              })
            }
          })

          geojsonLayer.setMap(map)
        })
      } catch (error) {
        console.error('加载GeoJSON数据失败', error);
      }
    }

    onMounted(() => {
      loadGeoJSONData();
    });

    return {}
  }
}
</script>

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