Cesium 绘制当前视口下需要渲染的地图瓦片的四至范围

代码

const loadingTilesTree =
   this.viewer.scene.globe._surface._tilesToRender;
const tilesList = [];
const tilesBoundings = [];
loadingTilesTree.forEach(item => {
   tilesList.push([item._x, item._y, item._level]);
   item._rectangle.level = item._level;
   tilesBoundings.push(item._rectangle);
});
console.log("当前需要加载的瓦片列表:", tilesList);
console.log(tilesBoundings);
this.tilesBoundingSource.entities.removeAll();

tilesBoundings.forEach(rec => {
   const center = Cesium.Rectangle.center(rec, new Cesium.Cartographic());
   const position = Cesium.Cartesian3.fromRadians(center.longitude, center.latitude);
   console.log(position);
   this.tilesBoundingSource.entities.add({
       position: position,
       rectangle: {
           coordinates: rec,
           outlineColor: Cesium.Color.fromAlpha(Cesium.Color.RED, 0.5),
           outlineWidth: 20,
           outline: true,
           fill: false,
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
       },
       label: {
           text: `${rec.level}`,
           font: "30px",
           fillColor: Cesium.Color.YELLOW,
           show: true,
       },
   });
});

效果

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用Cesium加载本地瓦片并将其渲染地图上,你可以按照以下步骤进行: 1. 将瓦片数据切割成256x256像素大小的瓦片,并按照TMS规范(即Google Maps瓦片规范)进行编号,编号方式为`{z}/{x}/{y}`,其中`z`表示瓦片的级别,`x`表示瓦片所在列的编号,`y`表示瓦片所在行的编号。例如,级别为0的瓦片编号为`0/0/0.jpg`。 2. 将切割好的瓦片数据保存到本地,可以使用文件夹结构来模拟瓦片的编号方式,例如,存放级别为0的瓦片数据的文件夹路径为`path/to/tiles/0/0/0.jpg`。 3. 在Cesium中创建一个`UrlTemplateImageryProvider`对象,并将其添加到地图的图层列表中。`UrlTemplateImageryProvider`对象可以使用URL模板来加载瓦片数据,其中的`{z}`、`{x}`、`{y}`分别表示瓦片的级别、列号、行号。示例代码如下: ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var imageryProvider = new Cesium.UrlTemplateImageryProvider({ url: 'path/to/tiles/{z}/{x}/{y}.jpg', credit: 'Local Tiles' }); viewer.imageryLayers.addImageryProvider(imageryProvider); ``` 在这个示例中,我们创建了一个`UrlTemplateImageryProvider`对象,并将其URL模板设置为`path/to/tiles/{z}/{x}/{y}.jpg`,这样Cesium就可以根据这个URL模板加载瓦片数据。同时,我们还将`imageryProvider`对象添加到地图的图层列表中,这样Cesium就会使用这个图层来渲染地球表面。 4. 运行代码,在浏览器中查看结果。此时,Cesium应该会加载本地的瓦片数据,并将其渲染到地球表面。你可以通过调整视角来查看地图的不同部分,以确认瓦片数据是否正确加载并渲染

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值