Loaded longitude and latitude #338
Comments
|
我也是我也是，请问大佬解决了吗？ |
当时比较着急，我就没有再研究了，现在我用的是高德加载的热力图 |
|
我去 这个还更新么 遇到同样的问题有人解决了么 |
|
我之前是把整个cesium js下载到本地，指定baseurl就可以，但我现在不想下载到本地，这个文件太大了，所以想看看有没有什么好的解决办法，我之前的办法：
在 2023-03-30 11:08:37，"chen" ***@***.***> 写道：
我去 这个还更新么 遇到同样的问题有人解决了么
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you commented.Message ID: ***@***.***>
|
我也有同样的问题, 请问这个问题解决了嘛? |
|
将你要显示的效果做成一个wms图层服务,在cesium viewer上叠加图层就可以了
在 2024-06-18 19:07:53，"LiShuai (阿木)" ***@***.***> 写道：
Now I have a problem，My data is a bunch of latitude and longitude, how do I convert them into data that can be loaded into a heat map?I need to show it on cesium
我也有同样的问题, 请问这个问题解决了嘛?
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you commented.Message ID: ***@***.***>
|
@eason674 感谢你的回复, 我不是专业的GIS开发工程师,目前还不会制作wms图层服务或者其他地图json数据, 这是一个pages部署的demo 点云效果无法查看,需要下载项目到本地. |
|
我大概有以下思路,你可以参考一下:
1. **捕捉鼠标事件**
2. **获取鼠标位置对应的热力图数据**
3. **显示热力图值**
这里假设你已经成功加载并显示了热力图。我们将进一步扩展功能，使其能够在鼠标悬停或点击时显示热力图值。
### 扩展步骤
1. **修改热力图生成方式，存储数据点**
2. **在 Cesium 中捕捉鼠标事件**
3. **获取热力图数据点并显示**
### 1. 修改热力图生成方式，存储数据点
首先，我们需要修改热力图生成方式，以便能够存储数据点的位置和值。这样，我们可以在鼠标事件中使用这些数据。
```javascript
// Initialize heatmap.js
const heatmap = h337.create({
container: heatmapContainer,
radius: 30,
maxOpacity: 0.6,
minOpacity: 0.1,
blur: 0.9
});
// Generate heatmap data
const heatmapData = {
max: 100,
data: [
{ x: 400, y: 300, value: 50 }, // Example data points
{ x: 420, y: 320, value: 60 },
{ x: 450, y: 350, value: 80 }
]
};
// Set heatmap data
heatmap.setData(heatmapData);
// Store the heatmap data points
const heatmapPoints = heatmapData.data;
```
### 2. 在 Cesium 中捕捉鼠标事件
接下来，我们需要在 Cesium 中捕捉鼠标事件，并获取鼠标位置对应的热力图数据。
```javascript
// Capture mouse move event
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
const pickedObject = viewer.scene.pick(movement.endPosition);
if (pickedObject) {
const cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
if (cartesian) {
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
const latitude = Cesium.Math.toDegrees(cartographic.latitude);
// Convert geographical coordinates to heatmap coordinates
const canvasWidth = heatmapContainer.width;
const canvasHeight = heatmapContainer.height;
const x = (longitude + 180) * (canvasWidth / 360);
const y = (90 - latitude) * (canvasHeight / 180);
// Find the heatmap data point closest to the mouse position
const threshold = 20; // Define a threshold for proximity
let closestPoint = null;
let minDistance = threshold;
for (const point of heatmapPoints) {
const dx = point.x - x;
const dy = point.y - y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < minDistance) {
closestPoint = point;
minDistance = distance;
}
}
// Display the value of the closest point
if (closestPoint) {
console.log(`Heatmap value: ${closestPoint.value}`);
}
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
```
### 3. 显示热力图数据点值
你可以选择在控制台打印值，或者使用一个 HTML 元素显示热力图数据点的值。这里我们演示在控制台打印值。
如果你想在地图上显示热力图数据点的值，可以使用 HTML 标签和 CSS 来显示。
```html
<div id="heatmapValue" style="position: absolute; top: 10px; left: 10px; background: white; padding: 5px; border: 1px solid black;"></div>
```
```javascript
// HTML element to display heatmap value
const heatmapValueElement = document.getElementById('heatmapValue');
// Capture mouse move event
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
const pickedObject = viewer.scene.pick(movement.endPosition);
if (pickedObject) {
const cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
if (cartesian) {
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
const latitude = Cesium.Math.toDegrees(cartographic.latitude);
// Convert geographical coordinates to heatmap coordinates
const canvasWidth = heatmapContainer.width;
const canvasHeight = heatmapContainer.height;
const x = (longitude + 180) * (canvasWidth / 360);
const y = (90 - latitude) * (canvasHeight / 180);
// Find the heatmap data point closest to the mouse position
const threshold = 20; // Define a threshold for proximity
let closestPoint = null;
let minDistance = threshold;
for (const point of heatmapPoints) {
const dx = point.x - x;
const dy = point.y - y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < minDistance) {
closestPoint = point;
minDistance = distance;
}
}
// Display the value of the closest point
if (closestPoint) {
heatmapValueElement.innerText = `Heatmap value: ${closestPoint.value}`;
} else {
heatmapValueElement.innerText = 'No heatmap value found';
}
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
```
在 2024-06-21 09:42:01，"LiShuai (阿木)" ***@***.***> 写道：
将你要显示的效果做成一个wms图层服务,在cesium viewer上叠加图层就可以了 在 2024-06-18 19:07:53，"LiShuai (阿木)" @.> 写道： Now I have a problem，My data is a bunch of latitude and longitude, how do I convert them into data that can be loaded into a heat map?I need to show it on cesium 我也有同样的问题, 请问这个问题解决了嘛? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.>
@eason674 感谢你的回复, 我不是专业的GIS开发工程师,目前还不会制作wms图层服务或者其他地图json数据,
我目前的进度是把数据转base64图片,添加到了cesium中, 但是这种方式没办法鼠标悬停显示权重值,
尝试的另一种方式用 cesium 点云效果但是效果并不好且渲染很慢,
有没有实现热力图且可以实现查看热力值的效果!
这是一个pages部署的demo 点云效果无法查看,需要下载项目到本地.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
你好伊森, 在 cesiumjs 中这样的三维地球模型中使用 heatmapjs 导致投影不正确, 会直接渲染到地图右上角. 数据渲染出的热力图并不正确, |
伊森如何邮箱联系到你! |
Now I have a problem，My data is a bunch of latitude and longitude, how do I convert them into data that can be loaded into a heat map?I need to show it on cesium
The text was updated successfully, but these errors were encountered: