Echarts地图合并提取
Echarts简述 ：一个纯 Javascript 的图表库。
//参数配置 - 如果不熟悉请参考官网 - 此处以重庆地图为例
var options = {
"title" : {
"text": "重庆地图",
"x":"center"
},
"tooltip" : {
"trigger": "item",
"enterable":true
},
"dataRange": {
"min": 0,
"max" : 50,
"precision":0,
"text":["高","低"], // 文本，默认为数值文本
"calculable" : false,
"x": "left",
"color":["#FFA500","#93AE46","#27B78C","#93DBC5","#CCCCCC"]
},
"toolbox": {
"show" : true,
"orient" : "vertical",
"x": "right",
"y": "center",
"feature" : {
"mark" : {"show": true},
"dataView" : {"show": true, "readOnly": false},
"restore" : {"show": true},
"saveAsImage" : {"show": true}
}
},
"series" : [
{
"name": "重庆",
"type": "map",
"mapType": "重庆",
"roam": false,
"itemStyle":{
"normal":{
"label":{"show":true},
"areaStyle":{
"color":"#CCCCCC"
},
"borderColor":"#FFF"
},
"emphasis":{
"label":{"show":true},
"areaStyle":{
"color":"#2D8CD1"
}
}
},
"data":[]
}]
}
讲解使用版本：2.x。
合适人群：相对Echarts有所了解、以及对地图数据合并有所疑惑的朋友。
1.Echarts基础地图实现
这里大家不难发现，中间几个区域文字重合，不够理想化.
2.解决方式-合并区域
由于重合显示不友好，建议吧重合区域合并提出。根据源码可以看出只要将其他区域的coordinate和encodeOffsets合并到一个即可。
//将巴南区、江北区、渝北区、璧山区、北碚区、九龙坡区、沙坪坝区、大渡口区、南岸区、渝中区
//等区域的coordinates和encodeOffsets放在统一的模块就能被当作是一个区域,然后删除原模块数据
{
'type': 'Feature',
'id': '500103',
'properties': {
'name': '主城区',//自定义名称
'cp': [
106.574269,29.571625
],
'childNum': 10
},
'geometry': {
'type': 'Polygon',
'coordinates': [
'@@nxnVlJlUXLu0083¦@x@Vl@nKVVX@V_V@@KlVXUu0084@lKlxXIl@ÈĊ@Vl@n_VJlu008Enu0090Vlnbu0084²VVVJVu0081VmUUkĕUamçUu008F@»W@@ĉnu0099V@XwVU@UUJWUXUW@UKm@UVUIVaUu0099UVmLUVu0083UUu0084UWWXUakVmUkbW@UVku0083UL@VW@kUWu0083u0081@mJUXVVUu0084@lmV@zklVVkLUl@¦u009BI',
'@@nLVU@wV@lVu0084@Xllu0084ÈKlU@Lu0084@@bVKnx@I@JVaV@u0084x@Il@@Un@laVVn@mu008Fku008DUIm`k@WXu0081Jmk¯mkxWIkxWJk_UmVUUKu0083@UUu0099@u0083u0084@l',
'@@@bVVXLu0082a@lnbWn@Lu0084@XVlK@VVLUVlbkLUKVVVL@Vu009AnXu0082VL@VV@UbVb@x@¦UxVb@bUJu0083L@Lu0084VVxlK@u0099nk@U@Wu0084UVLlKXVu0084@VblU@UUKVU@wn@VJVanLlkX@VaVKu0099¯@a@U@U@u0083VaUKu0084kUUu0083±maUkm@UUkbm@@Vk@@Ju0083wU@Ub@I@JmwUL@au0083@@KkVÇLku0083Wku0083@kUU@@xUVmKUnllUb',
'@@XzVlVVkbVL@JVĀXu008Eu0082¼Vu0084u0084u0084XbW`Xu009CWVÈu008Eu0084u0084VVu009Au008EVkV@@UXa@alK@Iu0083u0083U@UKWu0081UyUI@wVUUWVak@VUku0083W¹@WXI@yVIUK@kWwkѯ±W@u0099kUb@KkVVVmXu0083J',
'@@Xu0082VLV@u0084u0084@JkL@bWb@VU@UlÆu009CVyu0084a@nV@nn@KUu008F@IVJU_lJXu0090V@VlVIV`nIn°@bu0082lUbu009Au0084u0084KVI@aUaVw@¥@wUaVaU@@UUKWu0081u0099m@UUKUUVLlKkaVUUK@UkLWUu0083@@KXmma@ku0081bWKUU@aUamLnÞ@VWLk@@Wm@ULU@@Uu0099KUVWI',
'@@XKu0082L@Vu009A@XbV@lW@UV@@VXIV@Uu0099VKlL@Knu0090nJ@VV@VU@Iu0084@@mVUVWUUmL@V¯LUK@UV@UU@a@U@yU@WLUK@X@KUVmL@u0083@aXI@w@ammVk@WÛwm@UxVu0090u0081VVbVLUJVxVUu0084V@V@X@JUIVbm@@Vk@@VkL@lVLUJ@zWJ@X',
'@@Xºlu0084UVl@UbVXUV@xVJVzXJVUu009AL@VV@VKn@@Xl@XK@UmÝnKVbVakkVm@ku0084u0083UK@UmImu008F@LkKULVu009AU@WJ@UU@@VkXU@Wau0099@@Uu0081KWL',
'@@VVu0084JVL@bUVVnl`XIlwXJlw°nnlu0082IXW@UÇĉk@WJkwkLu0083@WVkU@LU@U`W@UXUV@n',
'@@k@@U@wu0084¥WKkVkImUmwu0081a@b@xWJ@b@u0084nKVU@L@WVLXKV@@z@V@bVVU@@VVL°K@U',
'@@VLu009A@VVu0084@VL@aUKu0083IUUu0083@@JUVU@'
],
'encodeOffsets': [
[108990,30061],
[109013,30319],
[109013,30381],
[108585,30032],
[108855,30449],
[108799,30241],
[108799,30241],
[109092,30241],
[109080,30190],
[109036,30257]
]
}
}
合并后的图形
3.显示被合并区域
区域合并后，如果想要显示被合并区域则需要将其提出来这位单独模块。
//提取成单独的区域
{
'type': 'Feature',
'id': 'chong_qing_zcq_geo',
'properties': {
'name': '重庆主城区',
'cp': [
107.7539,
30.1904
],
'childNum': 40
},
'geometry': {
'type': 'Polygon',
'coordinates': ['@@əȂòɜƨu0098ѺɛƦȁ̐@ƪu0097õŏφƥòȃƥ̍Ƨôυ̏ƧôñóóôɛŏƩôƧƥôƧóυƨu009C̒ѹôu009CƦȃ@փƥɛ̑@@ɜƧó@ɚƧ@ñφσõ@ŎɝôƧu0097@ʵѷóƧʵóu0098@ŎóŐó@ôȁƥu009Bó̒υôóʶəu0098ƧȄς̎ƧȂôƨƨƨφɛ̎Őƨʷɞ@ςu052EóŌôôφ@ɜu0588̎ƨ'],
'encodeOffsets': [[
111150,
32446
]]
}
}
//为提取的区域添加数据链接指向
'重庆主城区': {
getGeoJson: function (callback) {
require(['./geoJson/chong_qing_zcq_geo'], function (md) {
callback(decode(md));
});
}
}
//为提取的区域添加地图数据
define('echarts/util/mapData/geoJson/chong_qing_zcq_geo', [], function () {
return {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'id': '500113',
'properties': {
'name': '巴南区',
'cp': [
106.7322,
29.4214
],
'childNum': 1
},
'geometry': {
'type': 'Polygon',
'coordinates': [
'@@nxnVlJlUXLu0083¦@x@Vl@nKVVX@V_V@@KlVXUu0084@lKlxXIl@ÈĊ@Vl@n_VJlu008Enu0090Vlnbu0084²VVVJVu0081VmUUkĕUamçUu008F@»W@@ĉnu0099V@XwVU@UUJWUXUW@UKm@UVUIVaUu0099UVmLUVu0083UUu0084UWWXUakVmUkbW@UVku0083UL@VW@kUWu0083u0081@mJUXVVUu0084@lmV@zklVVkLUl@¦u009BI'
],
'encodeOffsets': [[
108990,
30061
]]
}
},
{
'type': 'Feature',
'id': '500105',
'properties': {
'name': '江北区',
'cp': [
106.8311,
29.6191
],
'childNum': 1
},
'geometry': {
'type': 'Polygon',
'coordinates': ['@@nLVU@wV@lVu0084@Xllu0084ÈKlU@Lu0084@@bVKnx@I@JVaV@u0084x@Il@@Un@laVVn@mu008Fku008DUIm`k@WXu0081Jmk¯mkxWIkxWJk_UmVUUKu0083@UUu0099@u0083u0084@l'],
'encodeOffsets': [[
109013,
30319
]]
}
},
{
'type': 'Feature',
'id': '500112',
'properties': {
'name': '渝北区',
'cp': [
106.7212,
29.8499
],
'childNum': 1
},
'geometry': {
'type': 'Polygon',
'coordinates': ['@@@bVVXLu0082a@lnbWn@Lu0084@XVlK@VVLUVlbkLUKVVVL@Vu009AnXu0082VL@VV@UbVb@x@¦UxVb@bUJu0083L@Lu0084VVxlK@u0099nk@U@Wu0084UVLlKXVu0084@VblU@UUKVU@wn@VJVanLlkX@VaVKu0099¯@a@U@U@u0083VaUKu0084kUUu0083±maUkm@UUkbm@@Vk@@Ju0083wU@Ub@I@JmwUL@au0083@@KkVÇLku0083Wku0083@kUU@@xUVmKUnllUb'],
'encodeOffsets': [[
109013,
30381
]]
}
},{
'type': 'Feature',
'id': '500227',
'properties': {
'name': '璧山区',
'cp': [
106.2048,
29.5807
],
'childNum': 1
},
'geometry': {
'type': 'Polygon',
'coordinates': ['@@XzVlVVkbVL@JVĀXu008Eu0082¼Vu0084u0084u0084XbW`Xu009CWVÈu008Eu0084u0084VVu009Au008EVkV@@UXa@alK@Iu0083u0083U@UKWu0081UyUI@wVUUWVak@VUku0083W¹@WXI@yVIUK@kWwkѯ±W@u0099kUb@KkVVVmXu0083J'],
'encodeOffsets': [[
108585,
30032
]]
}
},{
'type': 'Feature',
'id': '500109',
'properties': {
'name': '北碚区',
'cp': [
106.5674,
29.8883
],
'childNum': 1
},
'geometry': {
'type': 'Polygon',
'coordinates': ['@@Xu0082VLV@u0084u0084@JkL@bWb@VU@UlÆu009CVyu0084a@nV@nn@KUu008F@IVJU_lJXu0090V@VlVIV`nIn°@bu0082lUbu009Au0084u0084KVI@aUaVw@¥@wUaVaU@@UUKWu0081u0099m@UUKUUVLlKkaVUUK@UkLWUu0083@@KXmma@ku0081bWKUU@aUamLnÞ@VWLk@@Wm@ULU@@Uu0099KUVWI'],
'encodeOffsets': [[
108855,
30449
]]
}
},{
'type': 'Feature',
'id': '500107',
'properties': {
'name': '九龙坡区',
'cp': [
106.3586,
29.4049
],
'childNum': 1
},
'geometry': {
'type': 'Polygon',
'coordinates': ['@@XKu0082L@Vu009A@XbV@lW@UV@@VXIV@Uu0099VKlL@Knu0090nJ@VV@VU@Iu0084@@mVUVWUUmL@V¯LUK@UV@UU@a@U@yU@WLUK@X@KUVmL@u0083@aXI@w@ammVk@WÛwm@UxVu0090u0081VVbVLUJVxVUu0084V@V@X@JUIVbm@@Vk@@VkL@lVLUJ@zWJ@X'],
'encodeOffsets': [[
108799,
30241
]]
}
},{
'type': 'Feature',
'id': '500106',
'properties': {
'name': '沙坪坝区',
'cp': [
106.3696,
29.6191
],
'childNum': 1
},
'geometry': {
'type': 'Polygon',
'coordinates': ['@@Xºlu0084UVl@UbVXUV@xVJVzXJVUu009AL@VV@VKn@@Xl@XK@UmÝnKVbVakkVm@ku0084u0083UK@UmImu008F@LkKULVu009AU@WJ@UU@@VkXU@Wau0099@@Uu0081KWL'],
'encodeOffsets': [[
108799,
30241
]]
}
},
{
'type': 'Feature',
'id': '500108',
'properties': {
'name': '南岸区',
'cp': [
106.6663,
29.5367
],
'childNum': 1
},
'geometry': {
'type': 'Polygon',
'coordinates': ['@@VVu0084JVL@bUVVnl`XIlwXJlw°nnlu0082IXW@UÇĉk@WJkwkLu0083@WVkU@LU@U`W@UXUV@n'],
'encodeOffsets': [[
109092,
30241
]]
}
},{
'type': 'Feature',
'id': '500104',
'properties': {
'name': '大渡口区',
'cp': [
106.4905,
29.4214
],
'childNum': 1
},
'geometry': {
'type': 'Polygon',
'coordinates': ['@@k@@U@wu0084¥WKkVkImUmwu0081a@b@xWJ@b@u0084nKVU@L@WVLXKV@@z@V@bVVU@@VVL°K@U'],
'encodeOffsets': [[
109080,
30190
]]
}
},{
'type': 'Feature',
'id': '500103',
'properties': {
'name': '渝中区',
'cp': [
106.5344,
29.5477
],
'childNum': 1
},
'geometry': {
'type': 'Polygon',
'coordinates': ['@@VLu009A@VVu0084@VL@aUKu0083IUUu0083@@JUVU@'],
'encodeOffsets': [[
109036,
30257
]]
}
}
],
'UTF8Encoding': true
}
});
通过上面方式后，你只需要修改series.mapType = '重庆主城区'（你自定义名称）,就能显示提取的区域了，此时就完成了。
4.关于其他问题
有些朋友可能对上面的地理位置编码很好奇，其实解码出来就是Array[{x,y},{x,y},...],下面是我根据源码查找的编码解码方法。
//从Echarts提取的编码解码方法
function decodePolygon(coordinate, encodeOffsets) {
var result = [];
var prevX = encodeOffsets[0];
var prevY = encodeOffsets[1]; for (var i = 0; i < coordinate.length; i+=2) {
var x = coordinate.charCodeAt(i) - 64;
var y = coordinate.charCodeAt(i+1) - 64;
// ZigZag decoding
x = (x >> 1) ^ (-(x & 1));
y = (y >> 1) ^ (-(y & 1));
// Delta deocding
x += prevX;
y += prevY; prevX = x;
prevY = y;
// Dequantize
result.push([x / 1024, y / 1024]);
} return result;
} function encodePolygon(coordinate, encodeOffsets) {
var result = ''; var prevX = quantize(coordinate[0][0]);
var prevY = quantize(coordinate[0][1]);
encodeOffsets[0] = prevX;
encodeOffsets[1] = prevY; for (var i = 0; i < coordinate.length; i++) {
var point = coordinate[i];
result+=encode(point[0], prevX);
result+=encode(point[1], prevY); prevX = quantize(point[0]);
prevY = quantize(point[1]);
} return result;
} function encode(val, prev){
val = quantize(val);
val = val - prev; if (((val << 1) ^ (val >> 15)) + 64 === 8232) {
val--;
}
val = (val << 1) ^ (val >> 15);
return String.fromCharCode(val+64);
} function quantize(val) {
return Math.ceil(val * 1024);
}
//测试写的编码方法
function testEncode(json){
var feature = json;
var coordinates = feature.geometry.coordinates;
var encodeOffsets = feature.geometry.encodeOffsets; for (var c = 0; c < coordinates.length; c++) {
var coordinate = coordinates[c]; if (feature.geometry.type === 'Polygon') {
coordinates[c] = encodePolygon(
coordinate,
encodeOffsets[c]
);
} else if (feature.geometry.type === 'MultiPolygon') {
for (var c2 = 0; c2 < coordinate.length; c2++) {
var polygon = coordinate[c2];
coordinate[c2] = encodePolygon(
polygon,
encodeOffsets[c][c2]
);
}
}
}
return json;
}
Echarts地图合并提取的更多相关文章
- 工作中遇到的有关echarts地图和百度地图的问题
工作中遇到的有关echarts地图和百度地图的问题 *** 前言:在做项目中需要制作一个场景是左边是柱状图,右边是地图,地图上悬浮一个按钮可以切换echarts地图和百度地图.*** 功能: 在点击左 ...
- Echarts 地图添加自定义区域
使用 Echarts 生成地图时,如果需要添加一些自定义区域,该怎么做呢?请看下面示例. 生成原始地图 index.hmtl 引入 Jquery 和 Echart <!DOCTYPE html& ...
- Echarts 地图上显示数值
Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...
- echarts地图扩展文件使用geoJson格式。
echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/ 这里可以生成省市区的json,但是最多生成到”区 ...
- react使用echarts地图实现中国地图大区展示
日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...
- Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
- echarts 地图 动态 展示 结合css+js
echarts地图展示功能非常强大,官网上静态展示的样例非常多了,动态的资料少.研究了下.我眼下实现的通过ajax从server获取数据动态展示地图. 另外,我们有时候希望在地图之上做些自己定义的东西 ...
- echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】
首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...
- 本周学习总结(原生+Echarts地图)
本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...
随机推荐
- 在ensp上的mstp基础配置
为什么需要mstp? 因为stp中存在阻塞端口,阻塞后不承载流量,造成了带宽浪费 实验模拟 实验拓扑 相关参数 首先我们在交换机上创建vlan 10,20 设置端口 默认是运行mstp服务看一下
- 前端HTML学习心得
学习最好的效果就是理论加实践--Hanks!!!(给大家打鸡血的哈哈哈) 前面的学习我教大家怎么搭建简单的前端开发环境,现在我教大家怎么使用工具学习(从入门到放弃哈哈,不不不,这是以前的我,现在我下了 ...
- [转帖]DCEP究竟是什么？
DCEP究竟是什么? https://www.cnblogs.com/kaixin2018/p/11795534.html DCEP (Digital Currency Electronic Paym ...
- 47 容器（六）——HashMap
HashMap的概念 HashMap底层实现了哈希表,这是一种非常重要的数据结构,对于以后我们理解很多技术都有帮助,例如 redis数据库的核心技术和HashMap一样,因此,非常有必要让大家理解. ...
- golang面对接口
- html2canvas以及domtoimage的使用踩坑总结 动态获取的二维码失效如何生成海报
//判断手机为安卓还是ios 安卓html2canvas方法 ios系统dom-to-image方法 $(".code").click(function() { var u = n ...
- PB对象Event ID说明
原地址:https://www.cnblogs.com/nickflyrong/p/5973795.html Event ID 含义 内容浅析 event可以用pb自带的id,自动触发事件,而func ...
- SpringBoot与整合其他技术
SpringBoot与整合其他技术 5.1 SpringBoot整合Mybatis 5.1.1 添加Mybatis的起步依赖 <!--mybatis起步依赖--> <dependen ...
- Redis之RDB和AOF持久化介绍
什么是数据库状态 redis是一个键值对的数据库服务器,服务器中通常包含中任意个非空的数据库,而每个数据库又可以包含任意个键值对,为了方便起见,我们将服务器中的非空数据库以及他们的键值对统称为数据库状 ...
- 浮动和渐变色，定位position，元素的层叠顺序
浮动: float 是我们网页布局的一种 浮动 可以有 left 左浮动 right 右浮动 两种 浮动的特点: 脱离正常的文档流,原本的空间不占据,浮动的标签都具有块级标签的一些特点,可以手动设置宽 ...