为什么我添加到铯的单个图像有位置偏移

问题描述

我在传单和铯中都添加了相同的图像。在传单中，图像效果很好；但在Cesium中，图像看起来在经纬度中有一些位置偏移。我该如何解决这个问题？

沙堡示例：https://codepen.io/qjvic/pen/WNwMGYr

浏览器：chrome85.0.4183.83

操作系统：win10

/******** cesium ********/
const viewer = new Cesium.Viewer("cesium",{
  sceneMode: Cesium.SceneMode.SCENE2D,infoBox: false,selectionIndicator: false,shadows: true,shouldAnimate: true,imageryProvider: new Cesium.OpenStreetMapImageryProvider({
    url: "https://a.tile.openstreetmap.org/"
  })
});

const layers = viewer.scene.imageryLayers;
const cesiumLayer = layers.addImageryProvider(
  new Cesium.SingleTileImageryProvider({
    url:
      "https://raw.githubusercontent.com/QJvic/Pics/master/img/20200908041400_cth.png",rectangle: Cesium.Rectangle.fromdegrees(60,5,139,54)
  })
);
viewer.flyTo(cesiumLayer);

/*********** leaflet *************/
const map = L.map("leaflet").setView([30,90],3);
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
  continuousWorld: false,minZoom: 0,Nowrap: true
}).addTo(map);
var url =
  "https://raw.githubusercontent.com/QJvic/Pics/master/img/20200908041400_cth.png";
var imageBounds = [
  [5,60],[54,139]
];
const leafletLayer = L.imageOverlay(url,imageBounds,{ opacity: 1 }).addTo(
  map
);

*{
  margin: 0;
  padding: 0;
}

#cesium{
  height: 100vh;
  width: 46%;
  display: inline-block;
  background-color: blue;
}

#leaflet{
  height: 100vh;
  width: 46%;
  display: inline-block;
/*   background-color: red; */
}

<script src="https://cesium.com/downloads/cesiumjs/releases/1.62/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.62/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

<div>
  <div id="cesium"></div>
  <div id="leaflet"></div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）