vue 高德地图geojson

Vue 高德地图（AMap Vue）是一个结合了 Vue.js 和高德地图 API 的库，它使得在 Vue 应用程序中集成高德地图变得简单。当你需要处理地理空间数据时，GeoJSON (Geometrical Object Encoding JSON) 就很有用了，它是一种轻量级的数据交换格式，用于表示地理特征如点、线、面。

在 Vue 中使用 AMap 地图和 GeoJSON，你可以这样做：

1. **引入依赖**：首先，你需要安装 `vue-amap` 和 `axios` 或其他适合获取 GeoJSON 数据的工具库。

   npm install vue-amap axios

2. **配置地图实例**：在 Vue 组件中初始化高德地图，并设置地图容器。

   <amap :center="mapCenter" :zoom="mapZoom">
     <!-- ... -->
   </amap>

3. **加载并解析 GeoJSON**：通过 `axios` 获取 GeoJSON 数据，然后在响应处理函数中将其转换成可识别的地理信息。

   data() {
     return {
       mapCenter: [116.404, 39.915], // 北京坐标
       mapZoom: 8,
       geojData: {} // 存放解析后的GeoJSON数据
     }
   },
   async mounted() {
     const response = await axios.get('your.geojson.url');
     this.geojData = AMap.parseGeoJson(response.data);
     this.addGeoFeatures();
   }

4. **添加地理特征**：解析后的 GeoJSON 对象可以作为参数传递给 `addGeoFeatures` 函数，它会将 GeoJSON 特征添加到地图上。

   methods: {
     addGeoFeatures() {
       this.geojData.features.forEach(feature => {
         const marker = new AMap.Marker({
           position: feature.geometry.coordinates,
           draggable: false, // 可选，是否可拖拽
           icon: 'iconUrl', // 自定义图标URL
         });
         marker.setMap(this.map);
       });
     }
   }