echarts-map的使用

echarts-map的使用

地图的下载：

方式一：

在安装echarts依赖时，已经将数据下载到项目中了。你想要的省级Js、Json文件，node_modules文件下全都有。

方式二：

1.外部的json数据引入使用。可以从http://datav.aliyun.com/tools/atlas/进行下载需要的json数据。（数据只到区县级）

2.要想数据到更下一级，则可以访问 http://geojson.io进行手动绘制。也可用其手绘任何区县的

方式三：也可下载我在网上搜集的地图：包含中国、省、市的js和json文件，由于搜集方式不同，json和js对应地区的文件名不太相同、对应的文件中的坐标数据，有的是压缩的字符串形式的，有的是坐标点格式：https://download.csdn.net/download/songsong9181/15893400?spm=1001.2014.3001.5501

地图内容：

打开.js或.json文件源码发现是乱码的，其实并不是，而是对坐标进行了压缩，减少了地图文件的体积。如下图所示：

具体压缩方式可详看：

火眼金睛容嬷嬷——echarts地图数据的压缩——https://my.oschina.net/rodger/blog/838763

Treant——整数压缩编码 ZigZag—— https://www.cnblogs.com/en-heng/p/5570609.html

地图使用：

官网上两种形式js文件和json文件方式，js文件中包含地图注册，所以直接引用文件使用注册名；json文件需要自己获取文件内容注册地图使用。两种方式使用如下：

在main文件中引用：

import echarts from ‘echarts’;
import ‘…/node_modules/echarts/map/js/province/zhejiang.js’;
import ‘…/node_modules/echarts/map/json/province/zhejiang.json’;

 

js文件方式：

        //  
        var myChart_js = echarts.init(document.getElementById("map_js"));
        myChart_js.setOption({
            series:[{
                type: 'map',
                map: 'china', //echarts.registerMap(’ ')中注册的名字。
            }]
        });

json文件方式：

 $.get('./china.json', function (chinaJson) {
            //注册地图
            echarts.registerMap('chinaJ', chinaJson);
            var myChart_json = echarts.init(document.getElementById("map_json"));
            myChart_json.setOption({
                series: [{
                    type: 'map',
                    mapType: 'chinaJ' //echarts.registerMap(’ ')中注册的名字。
                }] 
            });
        });

在静态网页使用json方式会出现错误提示如下（但在jsp中使用不会出现）：

jquery-3.6.0.min.js:2 Access to XMLHttpRequest at 'file:///C:/ys_Space/VS_CodeWorkspace/test/echart_map_test/china.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

原因： 采用file:///C:/ys_Space/VS_CodeWorkspace/test/echart_map_test/echarts_map%E6%98%BE%E7%A4%BA.html方式访问，会因为使用异步请求加载数据时，由于cors跨域资源共享问题导致的不能读取本地的json数据，异常截图如下：

在网上解决方式有如下几种：

 方法1： 在本地启动一个http服务，使用http://127.0.0.1:8080的方式访问即可，这里我们用http-server来搭建本地服务。

 方法2：如右键没有Open with Live Serve，vscode需安装Live Serve插件，但是图很小

 方法3：把代码放WWW服务器上，地图立马显示出来。

 

更多属性设置：可以看  ECharts Map 属性详解：https://blog.csdn.net/u014372409/article/details/91377251，

当然最全的还是在官网：可参照官网 https://echarts.apache.org/zh/option.html

 

细化到区域内各街道范围：这需要自定义，没有直接可下载好的js和json文件：

可看：https://www.jianshu.com/p/7337c2f56876

 

echarts折线图实现切断效果:https://www.cnblogs.com/codebook/p/12702647.html

 

 

参考：

易小花——Echarts实现省级地图的两种方法（以浙江省为例）

https://blog.csdn.net/weixin_44272792/article/details/108880952?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0&spm=1001.2101.3001.4242

火眼金睛容嬷嬷——echarts地图数据的压缩

https://my.oschina.net/rodger/blog/838763

Treant——整数压缩编码 ZigZag

 https://www.cnblogs.com/en-heng/p/5570609.html