欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

echarts map地图geojson/json格式的简单使用

程序员文章站 2022-03-22 10:13:13
**echarts地图简单使用方法 (geojson格式/json格式)**首先贴两个非常有用的地图网站地图下载网站:http://datav.aliyun.com/tools/atlas/#可以下载精确到县区的geojson格式地图文件(地图更新有一定迟滞性,新成立的区可能没有标注需要自己用下面那个网站修改)自定义修改地图网站:http://ghttp://datav.aliyun.com/tools/atlas/简单使用1.引入echarts不多赘述,但要注意echarts5以后引入方式...

**

echarts地图简单使用方法 (geojson格式/json格式)

**
首先贴两个非常有用的地图网站
地图下载网站:http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
可以下载精确到县区的geojson格式地图文件(地图更新有一定迟滞性,新成立的区可能没有标注需要自己用下面那个网站修改)
自定义修改地图网站:http://geojson.io/#map=2/20.0/0.0

简单使用

1.引入echarts不多赘述,但要注意echarts5以后引入方式以官网为准。
2.下载所需的地图文件
进入http://datav.aliyun.com/tools/atlas/#下载
echarts map地图geojson/json格式的简单使用
3.echarts相关代码

//写在vueData中的地图数据
mapDataArr: [{
        name: '平泉县',
        value: 0,
      },
      {
        name: '宽城县',
        value: 42,
      },
      {
        name: '兴隆县',
        value: 342,
      },
      {
        name: '鹰手营子矿区',
        value: 12,
      },
      {
        name: '承德县',
        value: 132,
      },
      {
        name: '双桥区',
        value: 322,
      },
      {
        name: '双滦区',
        value: 0,
      },
      {
        name: '滦平县',
        value: 25,
      },
      {
        name: '丰宁县',
        value: 125,
      },
      {
        name: '隆化县',
        value: 425,
      },
      {
        name: '围场县',
        value: 23,
      },
      {
        name: '高新区',
        value: 74,
      },
      ],
//以下为数据处理和地名自定义移动与地名字体大小,不需要可不用
let _this = this;
for (let i in _this.mapDataArr) {
//修改地图名称大小(有需要也可在地图上显示自定义文字在formatter中添加即可)
  _this.mapDataArr[i].label = {
    show: true,
    formatter: "{b}",
    fontSize: 15,
    offset: [0, -38],
  };
  //通过修改offset更改地图名称的位置避免遮挡
  if (_this.mapDataArr[i].name == "承德县") {
    _this.mapDataArr[i].label.offset = [50, -80];
  } else if (_this.mapDataArr[i].name == "兴隆县") {
    _this.mapDataArr[i].label.offset = [0, 0];
  } else if (_this.mapDataArr[i].name == "兴隆县") {
    _this.mapDataArr[i].label.offset = [0, 0];
  } else if (_this.mapDataArr[i].name == "高新区") {
    _this.mapDataArr[i].label.offset = [0, 0];
  } else if (_this.mapDataArr[i].name == "双滦区") {
    _this.mapDataArr[i].label.offset = [0, 0];
  } else if (_this.mapDataArr[i].name == "滦平县") {
    _this.mapDataArr[i].label.offset = [30, 0];
  }
}
//以下为echartsmap相关代码
$.get('chengde.geojson', function (chengde) {//我的geojson文件是放在public下的
        echarts.registerMap('chengde', chengde);
        var chart = echarts.init(document.getElementById('eChartsMap'));
        chart.setOption({
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{b}:{c}户',
            backgroundColor: 'rgb(0,0,0,0.5)',
            textStyle: {
              color: 'white',
              fontSize: 15,
            }
          },
          roam: 'scale',//仅支持缩放不能平移
          scaleLimit: {//缩放限制
            max: 2,
            min: 1
          },
          dataRange: {
            left: '0',
            bottom: '0',
            splitList: [{
              start: 300,
              label: '客户数大于300',
              color: 'rgb(233,182,55)'
            },
            {
              start: 101,
              end: 200,
              label: '客户数100 ~ 200',
              color: 'rgb(73,207,242)'
            },
            {
              start: 1,
              end: 100,
              label: '客户数1 ~ 100',
              color: 'rgb(141,214,19)'
            },
            {
              start: 0,
              end: 0,
              label: '客户数为0',
              color: 'rgb(225,225,225)'
            }
            ],
            color: ['rgb(225,225,225)', 'rgb(141,214,19)', 'rgb(73,207,242)', 'rgb(233,182,55)'],
            textStyle: {
              fontSize: 15,
            }
          },
          legend: {
            show: false,
          },
          series: [{
            type: 'map',
            name: '承德市',
            map: 'chengde',

            nameMap: {
              '平泉市': '平泉县',
              '宽城满族自治县': '宽城县',//此处为更改县区名称
              '丰宁满族自治县': '丰宁县',
              '围场满族蒙古族自治县': '围场县',
            },
            itemStyle: {
              areaColor: 'green',
              borderColor: 'white',
              borderWidth: '5',
            },
            data: _this.mapDataArr,
          }],

        });
      });

4.效果图如下
您也可以访问我的私人站 antinfield.com查看动态实例
echarts map地图geojson/json格式的简单使用

地图的修改

如果你细心的话可能发现最后的效果图中的中间部分有一个高新区,但下载下来的却没有,这个就是通过上文中的地图修改网站修改的了。由于文章过长具体修改方式请点击:
echarts使用之 geojson.io 自定义修改geojson地图文件

本文地址:https://blog.csdn.net/wallace_yang/article/details/111058917