Cesium:根据缩放级别显示/隐藏标签
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 相机本身并不知道 "zoom levels",但您可以使用 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);
我想在缩放比例超过一定级别时隐藏地图的标签。
对于此示例,我想在缩放级别 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 相机本身并不知道 "zoom levels",但您可以使用 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);