Можно ли поместить элемент (элемент) HTML на Cesium? - PullRequest
Новая
       12

Можно ли поместить элемент (элемент) HTML на Cesium?

0 голосов
/ 07 ноября 2019

Я пытаюсь перетащить 3d модель на холст Цезия. На приведенном ниже снимке экрана, элемент справа имеет путь к файлу 3d-модели, onDrop на Cesium, ожидаем, что модель будет визуализирована.

enter image description here

Но я не уверен, как запечатлеть событие падения на Цезии. Любое руководство будет оценено.

1 Ответ

0 голосов
/ 11 ноября 2019

Работа с 3d-моделями во фрагментах заблокирована политикой CORS, затем я добавил круги вместо моделей, но это то же самое, что и модели:

enter image description here

var extent = Cesium.Rectangle.fromDegrees(20.3,50,40.3,70);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
var viewer = new Cesium.CesiumWidget('cesiumContainer',{
    imageryProvider : Cesium.createOpenStreetMapImageryProvider({
        url: 'https://a.tile.openstreetmap.org/'
    })
});

var scene = viewer.scene;
var billboards = scene.primitives.add(new Cesium.BillboardCollection());

function dragEnter(e){
   event.preventDefault();
   return true;
}

function dragDrop(e) {

    var canvas = document.createElement('canvas');
    canvas.width = 32;
    canvas.height = 32;
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(16, 16, 15, 0, Cesium.Math.TWO_PI, true);
    ctx.closePath();
    ctx.fillStyle = `hsl(${Math.random()*360},55%,55%)`;
    ctx.fill();

    var cartesian = viewer.camera.pickEllipsoid(
      new Cesium.Cartesian3(e.clientX, e.clientY), 
      viewer.scene.globe.ellipsoid
    );

    billboards.add({
      image: canvas,
      position: cartesian
    });
}

function dragOver(e){
   e.preventDefault();
}
#dragFrom {
  position:absolute;
  top:0;
  margin:10px
}

#dragFrom span {
  background:wheat;
  color:red;
  padding:10px;
  line-height:20px;
}
<script src="https://cesiumjs.org/releases/1.36/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://cesiumjs.org/Cesium/Apps/Sandcastle/templates/bucket.css">
<div id="cesiumContainer" class="fullSize" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
<div id=dragFrom><span draggable=true>drop me</span><div>
...