echarts多个地区合并并实现标注

地图合并
根据坐标定位
标注更换成自己的图片

先备注几个地址
获取json：http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4
压缩json
https://mapshaper.org/

地图合并

参考：echarts合并地图，把中国各个省份分成华北,东北,华东,华中,华南,西南,西北七个大区

需要特别注意的是，json文件需要处理下，一般的json文件会缺少下面代码中的字段名
主要代码如下：

/*** 合并多个省市* @param {*} chinaJson* @param {*} names* @param {*} properties*/
var mergeProvinces = function (chinaJson, names, properties) {//合并大区里省份的coordinatesvar features = chinaJson.featuresvar polygons = []var polygons2 = []for (var i = 0; i < names.length; i++) {var polygonsCoordinates = []var polygonsEncodeOffsets = []for (var z = 0; z < names[i].length; z++) {for (var j = 0; j < features.length; j++) {if (features[j].properties.name == names[i][z]) {if (features[j].geometry.coordinates[0].constructor == String) {//合并coordinatesfor (var l = 0; l < features[j].geometry.coordinates.length; l++) {polygonsCoordinates.push(features[j].geometry.coordinates[l])}} else if (features[j].geometry.coordinates[0].constructor == Array) {for (var k = 0; k < features[j].geometry.coordinates.length; k++) {for (var d = 0;d < features[j].geometry.coordinates[k].length;d++) {polygonsCoordinates.push(features[j].geometry.coordinates[k][d])}}}if (features[j].geometry.encodeOffsets[0].constructor == String) {//合并encodeOffsetspolygonsEncodeOffsets.push(features[j].geometry.encodeOffsets)} else if (features[j].geometry.encodeOffsets[0].constructor == Array) {for (var k = 0;k < features[j].geometry.encodeOffsets.length;k++) {if (features[j].geometry.encodeOffsets[k][0].constructor == Array) {for (var e = 0;e < features[j].geometry.encodeOffsets[k].length;e++) {polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k][e])}} else {polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k])}}}break}}}polygons.push(polygonsCoordinates)polygons2.push(polygonsEncodeOffsets)}// 构建新的合并区域var features = []for (var a = 0; a < names.length; a++) {var feature = {id: features.length.toString(),type: 'FeatureCollection',geometry: {type: 'Polygon',coordinates: polygons[a],encodeOffsets: polygons2[a]},properties: {name: properties.name[a] || '',childNum: polygons[a].length}}if (properties.cp[a]) {feature.properties.cp = properties.cp[a]}// 将新的合并区域添加到地图中features.push(feature)}chinaJson.features = features
}
// 获取地图数据
function getmapData() {$.get('../../js/common/pro.json', function (chinaJson) {data = doMap(chinaJson.features)setTimeout(() => {repRegionStrategy(series)}, 100)var params = {names: [//把各个大区的省份用二维数组分开['河北省'],['河南省'],['陕西省'],['山西省'],['湖北省'],['北京市'],['天津市']],properties: {//自定义大区的名字,要和上面的大区省份一一对应name: ['河北省','河南省','陕西省','山西省','湖北省','北京市','天津市'],cp: [//经纬度可以自己随意定义[114.502461, 38.045474],[113.665412, 34.757975],[108.948024, 34.263161],[112.549248, 37.857014],[114.298572, 30.584355],[116.405285, 39.904989],[117.190182, 39.125596]]}}// 拼接地图mergeProvinces(chinaJson, params.names, params.properties)echarts.registerMap('zhongbu', chinaJson) // 注册地图// 渲染地图})
}
var geoCoordMap = {河北省: [114.502461, 38.045474],河南省: [113.665412, 34.757975],陕西省: [108.948024, 34.263161],山西省: [112.549248, 37.857014],湖北省: [114.298572, 30.584355],北京市: [116.405285, 39.904989],天津市: [117.190182, 39.125596]
}function doMap(mapFeatures) {mapFeatures.forEach(function (v) {// 地区名称var name = v.properties.name// 地区经纬度geoCoordMap[name] = v.properties.center})return geoCoordMap
}

根据坐标定位

接口数据格式是这样的：

result: [{departName: '地点1',describe: '概述3',parentId: '2',pointAddress: '116.502461, 38.045474',children: null,typeId: '1'},{departName: '地点2',describe: '概述3',parentId: '2',pointAddress: '113.665412, 34.757975',children: null,typeId: '1'},
]

获取坐标，并处理成如下格式

 if (res.data.code == 200) {res.data.result.forEach(item => {console.log(item)var arrCP = item.pointAddress.split(',')var departName = item.departNamearr1.push({name: departName,value: item.id})arr2[departName] = arrCPconsole.log(arr2);})}

继续处理

 var echartData = convertData(arr1, arr2)
// 坐标点var convertData = function (arr1, arr2) {var res = []for (var i = 0; i < arr1.length; i++) {var geoCoord = arr2[arr1[i].name]if (geoCoord) {res.push({name: arr1[i].name,value: geoCoord.concat(arr1[i].value)})}}return res
}

接下来就需要把数据扔到echarts里了，我这边是将series定义在外面，根据业务需要，点击时根据切换的地址，然后定位标注

var series = [];for (var i = 0; i < series.length; i++) {if (series[i].type === 'scatter') {series.splice(i, 1)}}series.push({type: 'scatter',coordinateSystem: 'geo',symbol:'pin',//气泡
`      symbolSize: 30,zlevel: 6,data: echartData})
})

标注更换成自己的图片

var yy_icon = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABsElEQVQ4jdXUu2tVQRDH8c+NMUZ8/RvBB6iVYKO1f4GoRTpBBcVCxUcTQsAHlqKFYGGlbTpBERu1EFRESCeoWPhAMBIfuTIwK+vx3Hs0XX5wOGf3zH5ndmZ2LTv1IuD+8y1dca/Gqfyewddhxr3Nz4xW4xGsCj/4hsWcH8NxnM1x/Duf74GqwRtxEJ9xC0/SUUCnKrupdHoJC13giHYrDuX4DZ7iGKZb1k0n/PIg+Ej1XQxe4CEmM5+DNJOBjHWBY9vvcAYTuDYsh6lIx+FGSv8Cv8bJjOB66Zh/0MWEr2gDR77upucbbREMUQRwAUfawNGnJ3AlU/K/Gs20nE7Wb/C+zG1/CdCiH5nK/aotv8QBbMO5JYIjsDm8r8EP8v2lY/F33M7DE1uexx7swj08LoZ1kaIIazrAcUfcxGza9xMe4A21YbP6pcVe4WruII76XqzL7plPm1KPT421reCiuezPn9iOndiUHbMjHY6nk90NR0PB/er2WqhuuvGs/NHsqMXciQyiFdyrTs/aan5lAovN+nya+uPk1eCI8i0e4U41/xH38WHABV+KGPfMchV+AaU8WlFFTnNxAAAAAElFTkSuQmCC'
symbol: function (val, param) {//判断是否包含xxif (param.data.name.indexOf('xx') != -1) {return yy_icon}
}

图片的地址实在echarts官网里转的，尝试过用本地的路径，或者用网上转换图片工具，都没有办法正常展示，所以建议在官网里转换
转换方式：

echarts多个地区合并并实现标注相关推荐

Vue Echarts 显示地图且根据坐标设置标注点
Vue Echarts 显示地图且根据坐标设置标注点哎哟我去我就想用Echarts在页面上画一张地图,这张地图显示全国,然后我有几个坐标点的经纬度信息,需要在这个地图上根据经纬度标注在Echart ...
Echarts 多个地区地图可视化显示
在实际的前端开发工作中,有时候需要显示不相关的两个地区在地图上,例如:显示京津冀地区的地图,需要同时显示北京.天津和河北省,但是我们经常使用的获得各个省份,地市的地理信息的网站,每次只能下载一个地区, ...
Echarts柱形图折线图合并demo（含图例）
文章目录前言前言柱形图折线图合并demo(含图例) option = {xAxis: {type: 'category',data: [2001, 2002, 2003, 2004, 2005] ...
数据可视化ECharts:饼形图2 地区分布模块制作（南丁格尔玫瑰图）
- 官网找到类似实例, 适当分析,并且引入到HTML页面中 - 根据需求定制图表 - 需求1:颜色设置 color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7 ...
echarts地图实现地区下钻
今天使用echarts做了一个地图的下钻,上网找了各种资料之后终于完成了!具体代码可以区我的github上观看 https://github.com/yunpengLiang/echarts 下载下来 ...
如何使用 Echarts 和 SVG文件写大屏可视化地图 ?
点击上方蓝字关注趣谈前端转自: https://juejin.cn/post/7009889635618799630 契机最近公司要做一个政务大屏项目,由于在员工竞优大会上表(jing)现(chu ...
echarts地图学习（使用geoJson数据绘制地图）
参考文档使用echarts完成中国省市区县镇地图展示 echarts地图(中国地图展示各省数据) echarts实现中国地图区域分布图 vue + echarts 利用echarts中的map地图中 ...
Echarts全国地图区域合并------去掉海南子区域及南海诸岛
Echarts 地图开发中需要实现地图阴影: 下图是一个失败的demo,真正需要的是为整个地图添加边框阴影而不是为每个区域添加 1.最简单的实现方法,用geo实现 <!DOCTYPE html& ...
基于web的通用文本标注工具MarkTool in NLP
向AI转型的程序员都关注了这个号???????????? 机器学习AI算法工程公众号:datayx 由于市面上的文本标注工具无法满足实际项目的标注场景需求,因此本项目自主开发了基于web的文本标 ...

echarts多个地区合并并实现标注

echarts多个地区合并并实现标注

地图合并

根据坐标定位

标注更换成自己的图片

echarts多个地区合并并实现标注相关推荐

最新文章

热门文章