ECharts合并地图上的区域

对于某些特定需求，官方下载的地图数据可能并不能完全满足。例如，要求显示中国地图，但需要将山东江苏和浙江这3个省合并起来，显示“东部区域”。其他省份不变。

于是就需要对官方提供的地图数据进行修改。

一个思路是借助第三方工具，生成新区域的轮廓点，然后删除原来的3个区域。例如http://geojson.io/就提供了这样一种方式。但这样费时费力，且精度无法保证。

实际上，直接将这三个省的轮廓点合并即可。

对于地图，使用json格式引入：

$.get('js/china.json', function(chinaJson) {echarts.registerMap('china', chinaJson);var chart = echarts.init(document.getElementById('main'));chart.setOption({series: [{type: 'map',map: 'china'}]});
});

其中引入的json会解析为参数chinaJson。而一个地图的json格式如下：

{"type": "FeatureCollection","features": [{"type": "Feature","id": "01","properties": {"name": "辽宁","cp": [文本经纬度坐标]//先经度后纬度，保留到小数点后六位},"geometry": {"type": "Polygon","coordinates": [[[坐标对0], [坐标对1]...//同cp属性]]}},{省份2},{省份3},...]
}

可见，每个省的数据主要包含在两个属性中：properties和geometry。

properties用于设置显示的文本和文本的位置。

geometry绘制地图一定是用的Polygon，其coordinates属性是所有坐标点对的集合。然而，考虑到一个完整的区域可能并不相连，例如群岛等，所以coordinates其实是一个二维数组，也就是一个Polygon的一维数组。其含义是一个区域是由多个Polygon构成，而每个Polygon是由多个点构成。

于是，我们要合并山东江苏和浙江这3个省，那么只需要将这3个省的Polygon都放到同一个coordinates数组中即可。

// 合并多个省为一个
var mergeProvinces = function(chinaJson, names, properties) {var features = chinaJson.features;var polygons = [];// 将指定省的polygon保存下来，并将省的数据从地图中删除for(var i = 0, iLen = names.length; i < iLen; i++) {for(var j = 0, jLen = features.length; j < jLen; j++) {if(features[j].properties.name == names[i]) {polygons = polygons.concat(features[j].geometry.coordinates);features.splice(j, 1);break;}}}// 构建新的合并区域var feature = {type: "Feature",id: "" + features.length,properties: {name: properties.name || ""},geometry: {type: "Polygon",coordinates: polygons}};if(properties.cp) {feature.properties.cp = properties.cp;}// 将新的合并区域添加到地图中features.push(feature);
};$.get('js/china.json', function(chinaJson) {var params = {names: ["山东", "江苏", "浙江"],properties: {name: "东部区域",cp: [119.553222,33.724339]}};mergeProvinces(chinaJson, params.names, params.properties);echarts.registerMap('china', chinaJson);var chart = echarts.init(document.getElementById('main'));chart.setOption({series: [{type: 'map',map: 'china'}]});
});

这样，在地图引入后就对区域进行了合并与删除，那么后续的操作跟正常引入的地图就相同了。

另外，关于地图上的坐标点，使用的是常规的经纬度。坐标对的x为经度，y为纬度。

要想查看某个地点的具体经纬度，可以借助各种在线网站，例如：http://www.gpsspg.com/maps.htm

ECharts合并地图上的区域相关推荐

ECharts合并地图上的区域（济南市合并莱芜市）
将两个的coordinates,encodeOffsets合并 "coordinates": ["@@PAROBBLIAGMCGBH@DDE@K@MEE@KCDAJKP@ ...
java echarts 散点图,echarts在地图上绘制散点图（任意点）
项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/ed ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
Echarts 在地图上绘制流向图
首先需要获取地图JSON数据包,点此下载(Echarts官方地图数据,包含世界.中国,及国内各省数据). 实现效果如图: 代码如下: <!-- 此示例下载自 https://echarts.ap ...
echarts合并地图区域去除区域交界线（以合并泰州两个区为例）
需求客户要求合并泰州海陵区和泰州高港区,综合统计两个区的业务数据实现如果有了解过echarts地图json,应该知道地图点是由coordinates这个属性渲染的那么只需要复制海陵区和高港区的 ...
echarts 百度地图，城市区域场景标识参数意义配置分析
有不足或者错误的请大佬指出,仅仅个人的分析结果. 由于颜色貌似用16进制才能使用或者识别,先来个进制的颜色参照表吧,颜色可以直接在这个网页上ctrl+f查找颜色对照表http://www.fsskq ...
github 地图上画区域的工程_筑工程测量区别
吉林省锦程测绘有限公司为您详细解读JOAhdp筑工程测量区别的相关知识与详情,(一)控造丈量取控造网控造丈量指为成立丈量控造网而停止的丈量工做,包罗平面控造丈量.高程控造丈量和三维控造丈量.工程控造 ...
echarts在地图上标记县
1.先有省级的china.js 使用工具noped++:安装插件选择JsTools安装 2.找到对应县级的js数据拷贝到china.js中, 3.
地图上分成一块一块区域高德地图_在谷歌地图上绘制行政区域轮廓【结合高德地图的API】...
实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百 ...

ECharts合并地图上的区域

ECharts合并地图上的区域相关推荐

最新文章

热门文章