vue高德地图绘制geojson

高德地图绘制geojson矢量图形

高德地图api链接

https://lbs.amap.com/demo/javascript-api/example/overlayers/geojson

一、实现功能

二、准备工作

1.下载geojson文件

在项目中添加对应的区域的geojson矢量图形需要先下载对应的geojson文件。
推荐使用阿里云下载链接如下：
http://datav.aliyun.com/portal/school/atlas/area_selector
下载你所需要的geojson文件保存到项目中或者服务器上。

2.初始化高德地图

新来的小伙伴可以参照我的另一篇博客初始化你的高德地图在这里不在赘述，链接如下：
https://blog.csdn.net/pizixian_/article/details/122853901?spm=1001.2014.3001.5502

3.关键代码实现

<template>
  <div id="map"></div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // eslint-disable-next-line no-undef
      this.map = new AMap.Map("map", {
        resizeEnable: true,
        zoom: 1,
        center: [118.035, 36.62],
      });
      this.addGeoJson();
    },
    // 添加geo
    addGeoJson() {
      axios.get("geojson文件路径").then((geojson) => {
        let geojson = new AMap.GeoJSON({
          geoJSON: geojson,
          // 还可以自定义getMarker和getPolyline
          getPolygon: (geojson, lnglats) => {
            // 计算面积
            var area = AMap.GeometryUtil.ringArea(lnglats[0]);
            return new AMap.Polygon({
              path: lnglats,
              fillOpacity: 1 - Math.sqrt(area / 8000000000), // 面积越大透明度越高
              strokeColor: "rgba(190, 161, 58, 1)",
              strokeWeight: 1,
              fillColor: "rgba(151 ,255 ,255,.2)",
            });
          },
        });
        geojson.setMap(this.map);
      });
    },
  },
};
</script>

<style lang="less" scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
</style>

至此，你已经在地图上添加了你所需要的geojson矢量图形