我尝试使用 HERE 和harp.gl构建一个带有标记(如谷歌地图上的标记)的地球仪。这些标记是 SVG 图像,需要从它们的文件中加载。它们还需要可点击,并附有一些元数据,如 ID。
所以我的问题是:
- 显示这些标记的最佳方式是什么?
- 我怎样才能让它们可点击?(光线投射?)
- 有没有办法附加一些元数据?
提前致谢!
编辑: 为了澄清,标记是存储在 SVG 文件中的 SVG 图像,需要加载并显示为标记。
数据由 API 提供,因此我尝试将其添加为自己的点,例如 Cube-Example,并尝试将其转换为 GeoJSON 和 FeatureSet:
const geojsonPoints: {type: "FeatureCollection", features: Feature[]} = { type: "FeatureCollection",
features: [
]
};
for(let i = 0; i < locationdata.length; i++) {
geojsonPoints.features.push({
type: "Feature",
id: i.toString(),
geometry: {
type: "Point",
coordinates: [locationdata[i]["lonlat"][1], locationdata[i]["lonlat"][0]]
},
properties: locationdata[i]
})
}
const features: MapViewFeature[] = [];
for(let i = 0; i < locationdata.length; i++) {
features.push(new MapViewPointFeature([locationdata[i]["lonlat"][1], locationdata[i]["lonlat"][0]], locationdata[i]))
}
当我尝试添加 GeoJSON-Layer 时,出现无法加载decoder.min.js 的错误,但我将其配置为:
const mapView = new MapView({
canvas: this.canvas,
projection: sphereProjection,
theme: {
extends: pluginpath + "/js/harp.gl-example/dist/resources/berlin_tilezen_base_globe.json",
styles: {
geojson: this.getStyleSet()
}
},
decoderUrl: pluginpath + "/js/harp.gl-example/dist/decoder.bundle.js"
});
pluginpath
是一个包含前缀的变量,因为 js 文件夹不像所有示例中那样直接位于根目录中。
总结一下:我需要将 API 提供的数据显示为标记。标记应该是前面提到的 SVG 图像,并且这些标记应该是可点击的。
编辑 2: 我尝试修改此示例以显示 SVG 标记。第一步工作,我只是在所需位置显示示例中的立方体,但我无法用标记替换立方体。我使用了three.js网站上的这两个文档,但它们对我不起作用:
- https://threejs.org/docs/#examples/en/renderers/SVGRenderer
- https://threejs.org/docs/#examples/en/loaders/SVGLoader
我没有收到任何错误,只是 SVG 没有出现。