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