使用Planetary.js将图像放置在适当位置

Place image at location with Planetary.js

本文关键字：位置 Planetary js 图像 使用      更新时间：2023-09-26

我正在使用插件@planetaryjs.com（&d3）将地球仪渲染到屏幕上。教程展示了如何使用画布命令在特定位置添加"ping"，这很好。。。

但我想在一个特定的lat/lng中添加一张图像，并通过3d变换进行显示，这样它看起来就像是在和地球一起旋转。。。

不幸的是，我不知所措——我尝试过导入SVG和png图像，但只能将它们显示在"2d"中，并且不能随地球旋转。

有人能建议任何插件或起点来获得此功能吗？

我一直在网上寻找这样的东西，什么都不存在，所以我做了一个插件，可以直接与planetary.js 一起工作

它仍在github上更新，但基本要点是这样的。使用main planet.projection（）将lat、lng转换为投影坐标。

以下是基本用法。

var coords = planet.projection([(object.lng), object.lat])  
var img = new Image()
img.src = "/char.png";
var geoangle = d3.geo.distance([object.lng, object.lat],[-
planet.projection.rotate()[0], -planet.projection.rotate()[1]]);
//geo angle = radians (around 90 degrees)
if (geoangle > 1.57079632679490)
{
    //Behind Sphere > 90 degrees
} else {
   context.drawImage(img, coords[0] ,coords[1], 50 ,50)
}

上面是我制作的插件的一个片段，我基本上复制了已经存在的"ping"插件，并更改了代码来创建对象/图像。

github回购链接：https://github.com/Sheaffy/planetary.js-add-objects-plugin

相关文章：