echarts map 黑龙江补全大兴安岭地图地理测绘数据type为MultiPolygon

132 阅读1分钟

*注:单纯觉得自己该记录一下

WX20240929-163041@2x.png

      /**hlj.json地址**/
      https://gitee.com/hyyyhuoyang/hlj.-geo-json-multi-polygon/raw/master/hlj.json

      const myChart = echarts.init(document.getElementById('map'));
      const uploadedDataURL = /hlj.json";
      const center = {
        "哈尔滨市": [126.642464, 45.756967],
        "齐齐哈尔市": [123.95792, 47.342081],
        "牡丹江市": [129.618602, 44.582962],
        "佳木斯市": [130.361634, 46.809606],
        "大庆市": [125.11272, 46.590734],
        "鸡西市": [130.975966, 45.300046],
        "伊春市": [128.899396, 47.724775],
        "双鸭山市": [131.157304, 46.643442],
        "七台河市": [131.015584, 45.771266],
        "绥化市": [126.99293, 46.637393],
        "鹤岗市": [130.277487, 47.332085],
        "黑河市": [127.499023, 50.249585],
        "大兴安岭地区": [124.711526, 52.335262]
      }
      var option = null;
      $.get(uploadedDataURL, function (json) {
        echarts.registerMap('js', json);
        option = {
          visualMap: {
            show: false,
            max: 100,
            seriesIndex: [1],
          },
          geo: [{
            map: 'js',
            roam: false, //是否允许缩放
            zoom: 1, //默认显示级别
            top: '5%',
            left: '7%',
            bottom: '3%',
            scaleLimit: {
              min: 0,
              max: 3
            }, //缩放级别
            itemStyle: {
              normal: {
                areaColor: '#d35442',
                // shadowColor: '#fefcf9',
                // shadowBlur: 20,
                // shadowOffsetX: -5,
                // shadowOffsetY: 15,
              }
            },
            tooltip: {
              show: false
            }
          }],
          series: [
            //地图
            {
              type: 'map',
              mapType: 'js',
              geoIndex: -1,
              zoom: 1, //默认显示级别
              top: '5%',
              left: '7%',
              bottom: '3%',
              label: {
                show: true,
                color: '#313131',
                emphasis: {
                  color: '#fef0e4',
                  show: false
                },
                fontSize: 16,
              },
              itemStyle: {
                normal: {
                  borderColor: '#d35442',
                  borderWidth: 1,
                  areaColor: '#fefcf9'
                },
                emphasis: {
                  areaColor: 'rgba(254,240,228, 0.2)',
                  borderWidth: 0,
                }
              },
              data: Object.keys(center).map(name => {
                return {
                  name: name,
                  value: Math.random() * 100
                }
              })
            }
          ]
        };
        myChart.setOption(option);
        //绑定点击事件,这里是新窗口打开地址
        myChart.on('click', function (param) {
          let url = {
            哈尔滨市: "",
            齐齐哈尔市: "",
            牡丹江市: "",
            佳木斯市: "",
            大庆市: "",
            鸡西市: "",
            双鸭山市: "",
            七台河市: "",
            伊春市: "",
            绥化市: "",
            鹤岗市: "",
            黑河市: "",
            大兴安岭地区: ""
          };
          if (param.name === '') {
            return false;
          }
          window.open(url[param.name]);
        });
        // 地图双击方法
        myChart.on('dblclick', function (param) {
          let url = {
            哈尔滨市: "",
            齐齐哈尔市: "",
            牡丹江市: "",
            佳木斯市: "",
            大庆市: "",
            鸡西市: "",
            双鸭山市: "",
            七台河市: "",
            伊春市: "",
            绥化市: "",
            鹤岗市: "",
            黑河市: "",
            大兴安岭地区: ""
          };
          window.open(url[param.name]);
        });
        window.addEventListener('resize', () => {
          myChart.resize();
        });
      });