地图三级展示

最新推荐文章于 2021-03-10 15:42:24 发布

冰原狼

最新推荐文章于 2021-03-10 15:42:24 发布

阅读量546

点赞数

分类专栏： map 文章标签： node.js html js json

本文链接：https://blog.csdn.net/qq_38025939/article/details/108866347

版权

map 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

地图三级展示

|--file
	|--get.js
	|--index.html

1、新建file 文件夹；然后新建get.js和index.html文件，并将下面代码分别复制进去。
2、进入file文件夹，执行

node get.js  //主要是获取geoJSON数据

3、然后打开index.html即可。

var http = require('https');
var fs = require('fs');

fs.mkdir('./data/',function(err) {
  if (err) {
    console.log("data文件夹已经存在");
  }
getData("100000");
})
function getData(str) {
  var html = '';
  http.get('https://geo.datav.aliyun.com/areas_v2/bound/' + str + '_full.json', function (req, res) {
    req.on('data', function (data) {
      html += data;
    });
    req.on('end', function () {
      var json = html.toString();
      if (json.indexOf('The specified key does not exist.') < 0) {
        writeJson(json, str);
        if(json.indexOf("adcode") > -1){
          var data = JSON.parse(json).features;
          for (let j = 0; j < data.length; j++) {
            getData(data[j].properties.adcode);
          }
        }
      }else{
        getDataL(str)
      }
    });
  });

}
function getDataL(str) {
  var html = '';
  http.get('https://geo.datav.aliyun.com/areas_v2/bound/' + str + '.json', function (req, res) {
    req.on('data', function (data) {
      html += data;
    });
    req.on('end', function () {
      var json = html.toString();
      writeJson(json, str);
    });
  });
}
function writeJson(json, str) {
  fs.writeFile('./data/' + str + '.json', json, function (err) {
    if (err) {
      console.log(err);
    }
    console.log('success');
  })
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Map</title>
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://www.jq22.com/demo/echarts-chinazMap201911172308/china-main-city-map.js" charset="utf-8"></script>
  </head>
<body>

<div id="main" style="width:calc(100vw);height:calc(100vh);"></div>
<script type="text/javascript">
  //https://www.jq22.com/demo/echarts-chinazMap201911172308/dblClickMap.html
  var myChart = echarts.init(document.getElementById('main'));
  //存储切换的每一级地图信息
  var mapStack = [];
  var timeFn = null;
  var curMap = {};
  var cityMap = {};
  //初始化地图
  loadMap('100000', 'china');
  /**
   绑定用户切换地图区域事件
   cityMap对象存储着地图区域名称和区域的信息(name-code)
   当mapCode有值,说明可以切换到下级地图
   同时保存上级地图的编号和名称
   */
  myChart.on('mapselectchanged', function(params) {
    clearTimeout(timeFn);
    //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
    timeFn = setTimeout(function(){
      var name = params.batch[0].name;
      var mapCode = cityMap[name];
      if (!mapCode) {
        alert('无下一级区域地图显示');
        return;
      }
      loadMap(mapCode, name);
      //将上一级地图信息压入mapStack
      mapStack.push({
        mapCode: curMap.mapCode,
        mapName: curMap.mapName
      });
    }, 250);
  });
  /**
   绑定双击事件，并加载上一级地图
   */
  myChart.on('dblclick', function(params) {
    //当双击事件发生时，清除单击事件，仅响应双击事件
    clearTimeout(timeFn);
    var map = mapStack.pop();
    if (!mapStack.length && !map) {
      alert('已经到达最上一级地图了');
      return;
    }
    loadMap(map.mapCode, map.mapName);
  });
  function loadMap(mapCode, mapName) {
    $.getJSON('./' + mapCode + '.json',
      function (data) {
      if (data) {
        if(data.features.length===1){
          cityMap[data.features[0].properties.name]=undefined;
        }else{
          data.features.map(i=>{
            cityMap[i.properties.name]=i.properties.adcode;
          });
        }
        echarts.registerMap(mapName, data);
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b}'
          },
          series: [
            {
              name: '',
              type: 'map',
              mapType: mapName,
              selectedMode : 'multiple',
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data:[
              ]
            }
          ]
        };
        myChart.setOption(option);
        curMap = {
          mapCode: mapCode,
          mapName: mapName
        };
      } else {
        alert('无法加载该地图');
      }
    });
  }
</script>
</body>
</html>