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; }
