繁体   English   中英

铯:根据缩放级别显示/隐藏标签

[英]Cesium: display / hide Labels depending on the Zoom level

当缩放比例增加到一定程度以上时,我想隐藏地图的标签。

对于此示例,我要在缩放级别5之后隐藏与collection1相关的所有标签: https : //codepen.io/ollazarev/pen/XBWEEq

let viewer = new Cesium.Viewer('cesiumContainer', {
  animation: false,
  baseLayerPicker: false,
  fullscreenButton: false,
  geocoder: false,
  homeButton: false,
  infoBox: false,
  sceneModePicker: false,
  timeline: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
});

let collection1 = new Cesium.LabelCollection();
collection1.add({
  position: Cesium.Cartesian3.fromDegrees(-101.678, 57.7833),
  text: 'Canada',
});
collection1.add({
  position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
  text: 'Philadelphia',
});
viewer.scene.primitives.add(collection1);

let collection2 = new Cesium.LabelCollection();
collection2.add({
  position: Cesium.Cartesian3.fromDegrees(-74.0059728, 40.7127753),
  text: 'New York',
});
collection2.add({
  position : Cesium.Cartesian3.fromDegrees(-79.38318429999998, 43.653226),
  text: 'Toronto',
});
viewer.scene.primitives.add(collection2);

Cesium的3D相机并没有意识到“缩放级别”,但是您可以使用translucencyByDistance在一定距离后关闭标签。

例如,以下是您的演示,其中已将translucencyByDistance添加到每个标签:

let viewer = new Cesium.Viewer('cesiumContainer', {
  animation: false,
  baseLayerPicker: false,
  fullscreenButton: false,
  geocoder: false,
  homeButton: false,
  infoBox: false,
  sceneModePicker: false,
  timeline: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
});

let collection1 = new Cesium.LabelCollection();
collection1.add({
  position: Cesium.Cartesian3.fromDegrees(-101.678, 57.7833),
  text: 'Canada',
  translucencyByDistance : new Cesium.NearFarScalar(6.0e7, 1.0, 7.0e7, 0.0)
});
collection1.add({
  position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
  text: 'Philadelphia',
  translucencyByDistance : new Cesium.NearFarScalar(4.0e7, 1.0, 7.0e7, 0.0)
});
viewer.scene.primitives.add(collection1);

let collection2 = new Cesium.LabelCollection();
collection2.add({
  position: Cesium.Cartesian3.fromDegrees(-74.0059728, 40.7127753),
  text: 'New York',
  translucencyByDistance : new Cesium.NearFarScalar(1.0e7, 1.0, 3.0e7, 0.0)
});
collection2.add({
  position : Cesium.Cartesian3.fromDegrees(-79.38318429999998, 43.653226),
  text: 'Toronto',
  translucencyByDistance : new Cesium.NearFarScalar(3.0e7, 1.0, 5.0e7, 0.0)
});
viewer.scene.primitives.add(collection2);

有人知道是否有解决此问题的解决方案时考虑了屏幕尺寸吗? 摄像头距离与标签大小的变化可能会发生根本性的变化,例如从iPhone上的标签混乱和重叠,到大屏幕的显示器(有足够的空间来显示所有标签)。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM