echarts3d地图标记点颜色动态
时间: 2025-06-23 14:27:50 浏览: 10
### 实现 ECharts 3D 地图中标记点颜色的动态变化
为了实现在 ECharts 3D 地图中动态改变标记点的颜色,可以利用 `series` 中的 `itemStyle` 属性来控制标记点样式,并通过事件监听器响应用户的交互行为从而更新这些属性。
#### 使用 JavaScript 更新标记点颜色
下面是一个简单的例子,展示了如何根据鼠标悬停事件更改特定位置上的标记点颜色:
```javascript
// 初始化echarts实例并引入gl模块
var chart = echarts.init(document.getElementById('main'), null, {renderer: 'canvas'});
require.config({
packages: [{
name: 'echarts',
location: './', // 假设 echarts 文件夹位于当前目录下
main: 'echarts'
}]
});
require(['echarts'], function (ec) {
ec.registerMap('world', worldData); // 注册世界地图数据
var option = {
globe: {
baseTexture: '/static/images/earth.jpg',
heightTexture: '/static/images/bathymetry_bw_composite_4k.jpg',
displacementScale: 0.1,
environment: '#fff',
shading: 'realistic',
realisticMaterial: {
roughness: 0.9
},
postEffect: {
enable: true
}
},
series : [
{
type: 'scatter3D',
coordinateSystem: 'globe',
data: generateScatterData(),
symbolSize: 10,
itemStyle: {
color: function(params){
return params.value[3]; // 初始颜色由data中的第四个元素决定
}
}
}
]
};
chart.setOption(option);
// 添加点击事件处理程序以改变被选中城市的颜色
chart.on('mouseover', function (params) {
if (params.seriesType === 'scatter3D') {
let dataIndex = params.dataIndex;
let oldColor = params.color;
setTimeout(() => {
updatePointColor(dataIndex, getRandomColor());
}, 50);
function updatePointColor(index, newColor) {
const scatterSeries = option.series.find(s => s.type === 'scatter3D');
scatterSeries.data[index][3] = newColor; // 修改对应索引处的数据项颜色
chart.setOption({}); // 调用 setOption() 应用新的配置
}
function getRandomColor(){
return '#' + Math.floor(Math.random()*16777215).toString(16);
}
}
});
// 模拟一些散点分布作为初始数据源
function generateScatterData () {
let result = [];
for(let i=0;i<100;i++){
result.push([
(Math.random()-0.5)*180, // 经度范围[-90°,+90°]
(Math.random()-0.5)*360, // 纬度范围[-180°,+180°]
Math.random()*1e4, // 海拔高度随机数
'#'+((1<<24)*Math.random()|0).toString(16), // 随机生成十六进制颜色字符串
]);
}
return result;
}
});
```
此代码片段创建了一个带有多个随机放置的城市点的世界地球仪视图。当用户将光标移到某个城市上方时,该城市的标记点会立即变为一个新的随机颜色[^2]。
阅读全文
相关推荐


















