十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示【三、Geojson地图数据批量导入地图】

本章节文末，付完整代码

在public/目录新建设一个data目录，里面存放geojson数据

这里我提供部分json数据给大家用于练习使用：

逻辑分析和处理：

1.开始处理控制面板勾选年份的事件
触发选中后，需要做个判断，是否第一次读取 geojson 数据。 如果是第一次读取，则使用getdata方法去跑axios，获取数据。如果不是第一次加载数据，则跑showpolygon 或者 hidepolygon 方法来进行显示或者隐藏地块。

polygonarr 为地块数组
polygondata 为地块数据

var map  = shallowRef(null);
var amap = (null);
var checkobj ={
   }
const GetMassif = (aa:any) => {
   
    
    var checkarr = [] // 年，颜色，当前状态，是否加载
    checkarr= aa.split(',')
    if (checkobj[checkarr[0]]){
   
        
        // 不是第一次加载geojson数据
        if (checkarr[2]==1){
   
            showpolygon(checkarr[0])//展示地块
        }else{
   
            hidepolygon(checkarr[0])//隐藏地块
        }
        
    }else{
   

        checkarr.push("1")//存入第四个参数，是否加载
        checkobj[checkarr[0]]= checkarr
        //如果是第一次加载，则需要用axios读取数据；
        if (checkarr[2]==1){
   
            getdata(checkarr[0],checkarr[1]) //首次加载数据
        }

    }
    
}


//隐藏覆盖物
const hidepolygon = (year:any)=>{
   
    polygonarr.forEach(element => {
   //循环地块数组
        
        if (element.id == year){
   
            element.polygondata.hide()//隐藏地块
        }
    });
}
//显示覆盖物
const showpolygon = (year:any)=>{
   
    polygonarr.forEach(element => {
   
        if (element.id == year){
   
            element.polygondata.show()
        }
    })
}

2.走 getdata 方法直接读取arcgis 转出来的geojson 数据，我这里的数据为gps84坐标数据，需要用高德的API的convertFrom函数，转换成高德高的坐标系。

//读取geojson数据
var dataarr = []
var datalt = {
   }
const getdata = (year :any,color:any) =>{
   
    axios({
   
        method: 'get',
        url: 'public/data/dk'+year+'.json',
    }).then((res) => {
   

        datalt={
   
            "year":year,
            "data":res.data
        }
        dataarr.push(datalt)
        
        // 走转换数据的方法
        TransformationData(res.data,year,color)
        console.log('GeoJSON 数据加载完成')
    }).catch((msg) => {
   
        console.log("msg", msg)
        console.log('GeoJSON 服务请求失败')
    })

}

备注：以下为geojson数据

{
   
  "type": "FeatureCollection",
  "crs": {
    "type": "name", "properties": {
    "name": "EPSG:4326" } },
  "features": [
    {
   
      "type": "Feature",
      "id": 1,
      "geometry": {
   
        "type": "Polygon",
        "coordinates": [
          [
            [108.99980896100004, 22.999783316000048, 0],
            [108.99946594000005, 22.999994280000067, 0],
            [108.99925232000004, 22.999885560000052, 0],
            [108.99980164000004, 22.999479290000068, 0],
            [109.00005341000008, 22.999633790000075, 0],
            [109.00004999100008, 22.999635879000039, 0],
            [109.00004577600004, 22.999633789000029, 0],
            [108.99980896100004, 22.999783316000048, 0]
          ]
        ]
      },
      "properties": {
   
        "OBJECTID": 1,
        "Name": "010101002.01.韦x圆.45130210120000142300",
        "Shape_Length": 0.0019098079207306106,
        "Shape_Area": 1.633144971052641e-7,
        "MJ": 1854.2365449356753
      }
    },
    {
   
      "type": "Feature",
      "id": 2,
      "geometry": {
   
        "type": "Polygon",
        "coordinates": [
          [
            [109.00004999100008, 22.999635879000039, 0],
            [109.00051116900005, 22.999864578000029, 0],
            [109.00002288800005, 23.000301361000027, 0],
            [108.99945068400007, 23.000009537000039, 0],
            [108.99980896100004, 22.999783316000048, 0],
            [109.00004577600004, 22.999633789000029,