echarts地图获取地市省会坐标方法

编程入门 行业动态 更新时间:2024-10-25 13:24:29

echarts地图获取<a href=https://www.elefans.com/category/jswz/34/1701015.html style=地市省会坐标方法"/>

echarts地图获取地市省会坐标方法

echarts地图做地图城市添加点、图形标记或柱形时需要获取对应坐标,话不多说,直接上代码

var geoCoordMap = {};/*获取地图数据*/var mapFeatures = echarts.getMap(mapName).geoJson.features;
mapFeatures.forEach(function (item) {// 地区名称var name = item.properties.name;// 地区经纬度geoCoordMap[name] = item.properties.cp;
});var pointData = []for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {pointData.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}
}

下述在城市添加动态点与图标

 {type: 'effectScatter',coordinateSystem: 'geo',rippleEffect: {brushType: 'fill',},label: {show: true,color: '#fff',formatter: function (obj) {return obj.name;},},symbolSize: function (val) {var value = val[2];if (value < max) {return 15;}return 20;},showEffectOn: 'render', //加载完毕显示特效itemStyle: {normal: {color: '#FEBE13', // 圆点的颜色shadowBlur: 10,shadowColor: '#333',},},zlevel: 6,data: pointData,},{type: 'custom',coordinateSystem: 'geo',renderItem: function (params, api) {//具体实现自定义图标的方法return {type: 'image',style: {image: uploadedDataURL, // 自定义的图片地址x:api.coord([pointData[params.dataIndex].value[0], pointData[params.dataIndex].value[1]])[0] -6, // 数据的设置y:api.coord([pointData[params.dataIndex].value[0], pointData[params.dataIndex].value[1]])[1] -34,},};},zlevel: 10,data: pointData,},

更多推荐

echarts地图获取地市省会坐标方法

本文发布于:2023-11-15 17:54:57,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1603751.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:地市   省会   坐标   地图   方法

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!