gpt4 book ai didi

javascript - Deck.gl,如何根据列中的值定义不同颜色的散点图

转载 作者:行者123 更新时间:2023-11-30 19:18:49 26 4
gpt4 key购买 nike

这实际上是我的第一个 JS 代码,所以请耐心等待,我设法改编了 Deck.Gl 中的示例以显示散点图,现在我不确定如何根据列的值更改颜色“状态”,我知道如何为 1 个值执行此操作,但不确定如何使用 if then else here 执行其余操作

getFillColor: d => (d[2] === '1-pile' ? [0, 128, 255] : [255, 100, 128])

这里是一个完整的可重现的例子

 <html>
<head>
<title>deck.gl solar Farm Example</title>
<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript">
const {DeckGL, ScatterplotLayer} = deck;
new DeckGL({
mapboxApiAccessToken: 'xxxxx',
mapStyle: 'mapbox://styles/mapbox/satellite-streets-v9',
longitude: 5.2,
latitude: 35.49,
zoom: 15,
minZoom: 5,
maxZoom: 20,
pitch: 40.5,
layers:[
new ScatterplotLayer({
id: 'scatter-plot',
data: 'https://raw.githubusercontent.com/djouallah/interactivie_map/master/data.json',
radiusScale: 3,
radiusMinPixels: 0.25,
getPosition: d => [d[0], d[1], 0],
getFillColor: d => (d[3] === '1-pile' ? [0, 128, 255] : [255, 100, 128])
})
]
});
</script>
</html>

最佳答案

一个简单的解决方案(我也不是 javascript 开发人员)可能是创建一个根据变量返回颜色的函数

function get_colour( d ) {
if( d === '1-pile' ) {
return [0,128,255]
} else if ( d === '2-Tracker') {
return [255,100,128]
} else if ( d === '3-module') {
return [128, 128, 128]
} else {
return [255, 255, 255]
}
}

然后你可以为 getFillColor 属性调用它

getFillColor: d => get_colour( d[3] )

关于javascript - Deck.gl,如何根据列中的值定义不同颜色的散点图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57703751/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com