echarts地图坐标系及多个省份json文件的合并

安装echarts

yarn add echarts

获取省市区数据来源的json文件
datav使用的是高德坐标系,即国测局坐标(GCJ-02)。对于GPS,即WSG84坐标系经纬度需要转GCJ-02坐标才能在地图上正确显示

生成地理坐标系


var uploadedDataURL = "./js/henan.json"; //地区的json
  (function(){
    $.getJSON(uploadedDataURL,null,function(data){
      var myChart = echarts.init(document.getElementById('chart1'), "westeros");
      echarts.registerMap('henan', data);  //将地区数据注入到地图中
      option = {
        geo: {
            show: true,
            map: 'henan',
            
            itemStyle: {
                normal: {
                    // areaColor: '#031525',
                    // borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#2B91B7',
                }
            }
        },
        series:[
        {
            type: 'map',
            map: 'henan',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
          
            
            animation: false,
            data: [
              {name:'武清区',value:39},
            ]
        },
        ]
      }
      myChart.setOption(option);
    })
  })()

多省份的json文件合并

多省份合并json地址:http://geojson.io/#map=5/33.229/108.149

使用方式

1.上传需要合并的地区json文件
在这里插入图片描述

2.上传成功后会生成合并好的json数据,将其复制到自己的项目文件中即可
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42215897/article/details/120156666
今日推荐