首页 总结 友情链接

Echarts 部分地图展示

时间 2021/7/15 16:35:02 加载中...

功能

最近要实现如下这样的功能

效果查看：
http://sqber.com/file/map/jingjidemo.html

部分省份地图

中国地图

实现思路

实现思路如下：

思路一

通过 Echarts 的地图功能来实现，在 Geo 属性 中添加两个地图，一个是世界地图，另一个就是我们要突出显示的地图。

当前我们要获取到对应的 GeoJSON 数据。比如第一个只显示部分省份的，就可以只用部分省份的 GeoJSON 数据。

GeoJSON 获取
https://github.com/echarts-maps
http://datav.aliyun.com/tools/atlas/index.html#&lat=31.769817845138945&lng=104.29901249999999&zoom=4

然后调整两个地图的 中心点 和 缩放 级别，另两个地图重合显示。
设置 Roam 属性为 true，可以进行调整，调整好之后，通过控制台调用 getInfo 方法记录下中心点和缩放级别的信息。

上面的黄点信息是设置 series 来实现的，series 中的地图要使用高亮的地图，保证点的位置的准确性。

思路二

Geo 中引入一个地图，然后在 Series 中引入高亮的地图。

思路三

Geo 中只引入一个地图，通过 Region 属性高亮显示的区域。
这个比较麻烦，可能得把所有的高亮 Region 都得列举出来。且你要分别控制不同区域的鼠标移动上去的效果。

具体代码

思路一的具体实现：（另外两个不考虑了）

效果查看：
http://sqber.com/file/map/jingjidemo.html

具体代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>北京地图</title>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.     }
  14.     #container {
  15.       margin: 0 auto;
  16.       position: absolute;
  17.       top:0;
  18.       right:0;
  19.       bottom: 0;
  20.       left:0;
  21.     }
  23.   </style>
  24. </head>
  26. <body style="">
  27.   <div id="container"></div>
  28.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  29.   <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  30.   <script src="worldGeo.json"></script>
  31.   <script src="lnglat.json"></script>
  33.   <script>
  35.     var myChart = echarts.init(document.getElementById('container'));
  37.     function getGeoJson() {
  38.       // var arr = [
  39.       //   'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=510000', //四川
  40.       //   'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=530000', //云南
  41.       //   'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=520000', //贵州
  42.       //   'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=500000', //重庆
  43.       //   'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=420000', //湖北
  44.       //   'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=430000', //湖南
  45.       //   'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=340000', // 安徽
  46.       //   'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=360000', // 江西
  47.       //   'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=310000', // 江西
  48.       //   'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=320000', // 江西
  49.       //   'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=330000', // 江西
  50.       //   //'http://sqber.com/file/echarts/wordGeo',
  51.       // ]
  53.       var mapJson = { "type": "FeatureCollection", "features": [] }
  55.       worldGeo.features.map(fitem => mapJson.features.push(fitem))
  57.       // arr.map(item => {
  58.       //   $.ajax({
  59.       //     type: "GET",
  60.       //     url: item,
  61.       //     async: false,
  62.       //     success: function (data) {
  63.       //       data.features.map(fitem => mapJson.features.push(fitem))
  64.       //     },
  65.       //     error: function (msg) {
  66.       //       console.error(msg);
  67.       //     }
  68.       //   })
  69.       // })
  72.       return mapJson
  73.     }
  74.     var mapJson = getGeoJson()
  76.     echarts.registerMap('world', mapJson);
  79.     function getGeoJson2() {
  80.       var arr = [
  81.           // 如果报错的话，把下面的 JSON 文件放在本地
  82.         'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=510000', //四川
  83.         'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=530000', //云南
  84.         'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=520000', //贵州
  85.         'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=500000', //重庆
  86.         'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=420000', //湖北
  87.         'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=430000', //湖南
  88.         'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=340000', // 安徽
  89.         'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=360000', // 江西
  90.         'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=310000', // 江西
  91.         'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=320000', // 江西
  92.         'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=330000', // 江西
  93.       ]
  95.       var mapJson = { "type": "FeatureCollection", "features": [] }
  97.       //worldGeo.features.map(fitem => mapJson.features.push(fitem))
  99.       arr.map(item => {
  100.         $.ajax({
  101.           type: "GET",
  102.           url: item,
  103.           async: false,
  104.           success: function (data) {
  105.             data.features.map(fitem => mapJson.features.push(fitem))
  106.           },
  107.           error: function (msg) {
  108.             console.error(msg);
  109.           }
  110.         })
  111.       })
  113.       return mapJson
  114.     }
  116.     var mapJson2 = getGeoJson2()
  118.     echarts.registerMap('hunhe2', mapJson2);
  120.     // 渐变色
  121.     var areaColor = {
  122.         type: 'radial',
  123.         x: 0.5,
  124.         y: 0.5,
  125.         r: 0.5,
  126.         colorStops: [{
  127.             offset: 0, color: '#2381F3' // 0% 处的颜色
  128.         }, {
  129.             offset: 1, color: '#2C54CE' // 100% 处的颜色
  130.         }],
  131.         global: false // 缺省为 false
  132.     }
  134.     var option = {
  135.       tooltip: {
  136.         trigger: 'item',
  137.         formatter:function(params, ticket, callback){
  138.           if(params.data){
  139.            return params.name + " : " + params.data.value[2]
  140.           }
  141.           else{
  142.             return params.name
  143.           }
  144.        }
  145.       },
  146.       title: {
  147.         text: '',
  148.         x: "center",
  149.       },
  150.       backgroundColor: {
  151.         type: 'linear',
  152.         x: 0,
  153.         y: 0,
  154.         x2: 1,
  155.         y2: 1,
  156.         colorStops: [
  157.           {
  158.             offset: 0,
  159.             color: '#0f378f', // 0% 处的颜色
  160.           },
  161.           {
  162.             offset: 1,
  163.             color: '#00091a', // 100% 处的颜色
  164.           },
  165.         ],
  166.         globalCoord: false, // 缺省为 false
  167.       },
  168.       visualMap: {
  169.         show: false,
  170.         min: 0,
  171.         max: 500,
  172.         left: 'left',
  173.         top: 'bottom',
  174.         text: ['高', '低'], // 文本，默认为数值文本
  175.         calculable: true,
  176.         seriesIndex: [1],
  177.         inRange: {},
  178.       },
  179.       geo: [
  180.         {
  181.           map: 'world',
  182.           label: {
  183.             show:false
  184.           },
  185.           silent:true,
  186.           roam: true,
  187.           center: [110.39276699313069,28.723695629153493],
  188.           zoom: 12.9687122980557,
  189.           itemStyle: {
  190.             normal: {
  191.               areaColor: '#06235F',
  192.               borderColor: '#0C4BAA',
  193.               borderWidth: 1,
  194.             },
  195.             emphasis: {
  196.               areaColor: '#FFAE00',
  197.             }
  198.           }
  199.         },
  200.         {
  201.           map: 'hunhe2',
  202.           label: {
  203.             show:true,
  204.             color:'white',
  205.             fontSize:20
  206.           },
  207.           silent:true,
  208.           roam: true,
  209.           center: [110.44997122677593, 28.753268447939853],
  210.           zoom: 0.9090909090909095,
  211.           itemStyle: {
  212.             normal: {
  213.               areaColor: areaColor,
  214.               borderColor: '#0C4BAA',
  215.               borderWidth: 1,
  216.             },
  217.             emphasis: {
  218.               areaColor: '#FFAE00',
  219.             }
  220.           }
  221.         },
  222.       ],
  223.       series: [
  224.         // {
  225.         //   name: '这是个地图',
  226.         //   type: 'map',
  227.         //   mapType: 'hunhe2',
  228.         //   label: {
  229.         //     normal: {
  230.         //       textStyle: {
  231.         //         fontSize: 15,
  232.         //         fontWeight: 'bold',
  233.         //         color: '#fff',
  234.         //       },
  235.         //     },
  236.         //   },
  237.         //   //aspectScale: 1,
  238.         //   roam: true,
  239.         //   center: [107.51392060163428,35.18339937096202],  
  240.         //   zoom: 1.610510000000001,
  241.         //   itemStyle: {
  242.         //     normal: {
  243.         //       label: { show: false }, // 不显示地图上得省份名字
  244.         //       color: 'yellow',
  245.         //       borderWidth: 0.5, //区域边框宽度
  246.         //       borderColor: '#36D2FF', //区域边框颜色              
  247.         //       areaColor: areaColor, //区域颜色
  248.         //     },
  249.         //     emphasis: {
  250.         //       label: { show: true },
  251.         //       borderWidth: 0.5,
  252.         //       borderColor: '#4b0082',
  253.         //       areaColor: '#ffdead',
  254.         //     },
  255.         //   },
  256.         // },
  258.         {
  259.           type: 'effectScatter',
  260.           coordinateSystem: 'geo',
  261.           geoIndex: 1,   // 这里指定使用哪个地图
  262.           symbolSize: function (val, params) {
  263.             var zoom = 10
  264.             let result = val[2] / zoom
  265.             if (parseFloat(val[2]) === 0) {
  266.               result = 0.0000001 / zoom
  267.             }
  268.             result = Math.max(result, 5) // 最小是5
  269.             result = Math.min(55, result) // 最大时35
  270.             return result
  271.           },
  272.           data:[
  273.             {
  274.               name: '四川省',
  275.               value: [120.185, 30.274, 29999]
  276.             }
  277.           ],
  278.           showEffectOn: 'render',
  279.           rippleEffect: {
  280.             brushType: 'stroke'
  281.           },
  282.           hoverAnimation: true,
  283.           label: {
  284.             show: false
  285.           },
  286.           // label: {
  287.           //   show: false,
  288.           //   normal: {
  289.           //     // "formatter": "{c}",
  290.           //     formatter: function (item) {
  291.           //       // console.log(item);
  292.           //       // alert(item);
  293.           //       // return item;
  294.           //       return item.value[2]
  295.           //     },
  296.           //     position: 'right',
  297.           //     show: true
  298.           //   },
  299.           //   emphasis:{
  300.           //      label:true,
  301.           //      formatter: function (item) {
  302.           //       // console.log(item);
  303.           //       // alert(item);
  304.           //       // return item;
  305.           //       return item.value[2]
  306.           //     },
  307.           //   }
  308.           // },
  309.           itemStyle: {
  310.             show : false,
  311.             normal: {
  312.               color: '#f4e925',
  313.               shadowBlur: 10,
  314.               shadowColor: '#333'
  315.             }
  316.           },
  317.           zlevel: 1
  318.           }]
  319.     }
  320.     myChart.setOption(option);
  323.     function getInfo(){
  324.       var centerInfo = myChart.getOption().geo[0].center
  325.       var zoomInfo = myChart.getOption().geo[0].zoom
  327.       var dataCenterInfo = myChart.getOption().geo[1].center
  328.       var dataZoomInfo = myChart.getOption().geo[1].zoom
  330.       console.log('backMap:' + centerInfo + " " + zoomInfo)
  331.       console.log('frontMap:' + dataCenterInfo + " " + dataZoomInfo)
  332.     }
  334.   </script>
  335. </body>
  337. </html>

完

扫码分享
版权说明
作者：SQBER
文章来源：http://www.sqber.com/articles/echarts-part-map-show.html
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
sqber 2017-2021 冀ICP备17029815 站点地图