Question

我使用插件@ planetaryjs.com（＆amp; d3）将地球仪渲染到屏幕上。教程展示了如何添加＆＃34; ping＆＃34;在使用canvas命令的特定位置，这很棒......

但是我想在特定的纬度/经度上添加一个图像，然后用三维变换显示它，看起来好像它在旋转着这个星球......

不幸的是我不知所措 - 我尝试导入SVG和png图片，但只能让它们显示在＆＃39; 2d＆＃39;中，并且不要旋转这个星球。

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

Answer 1

我一直在网上寻找像这样的东西，没有任何东西存在，所以我制作了一个直接与planet.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)
}

上面是我制作的插件的片段，我基本上复制了＆＃34; ping＆＃34;已存在的插件，并改为更改代码以创建对象/图像。

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

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

1 个答案: