cesium中拾取feature 移动高亮和选中高亮

admin管理员组

文章数量:1650768

 在cesium的官方示例中Cesium Sandcastle，有移动高亮和选中高亮的示例，但是，在实际使用中，还是存在一些bug，现就调试后的程序分享一下。

/* ******************移动高亮和点击高亮*********************** */
pqhandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

//类别浮动显示
this.nameOverlay = document.createElement("div");
viewer.container.appendChild(this.nameOverlay);
this.nameOverlay.className = "backdrop";
this.nameOverlay.style.display = "none";
this.nameOverlay.style.position = "absolute";
this.nameOverlay.style.bottom = "0";
this.nameOverlay.style.left = "0";
this.nameOverlay.style["pointer-events"] = "none";
this.nameOverlay.style.padding = "4px";
this.nameOverlay.style.backgroundColor = "white";

// 移动高亮
var moveSelected = {
	feature: undefined,
	originalColor: new Cesium.Color(),
};
//点击高亮
var highlighted = {
	feature: undefined,
	originalColor: new Cesium.Color(),
};

pqhandler.setInputAction(function onMouseMove(movement) {
	var that = _this;
	// If a feature was previously highlighted, undo the highlight
	if (Cesium.defined(highlighted.feature)) {
		highlighted.feature.color = highlighted.originalColor;
		highlighted.feature = undefined;
	}
	// Pick a new feature
	var pickedFeature = viewer.scene.pick(movement.endPosition);
	if (!Cesium.defined(pickedFeature)) {
		_this.nameOverlay.style.display = "none";
		return;
	} else {
		// A feature was picked, so show it's overlay content
		_this.nameOverlay.style.display = "block";
		_this.nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + "px";
		_this.nameOverlay.style.left = movement.endPosition.x + "px";
		//如果拾取的要素包含属性信息
		if (Cesium.defined(pickedFeature.getProperty)) {
			var name = pickedFeature.getProperty("YDMC");
			that.nameOverlay.textContent = name;
		}

		// Highlight the feature if it's not already selected.
		if (pickedFeature !== moveSelected.feature) {
			highlighted.feature = pickedFeature;
			Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
			pickedFeature.color = Cesium.Color.YELLOW;
		}
	}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

pqhandler.setInputAction(function(evt) {
	var that = _this;
	_this.pickedFeaturepropertys = [];
	// If a feature was previously selected, undo the highlight
	if (Cesium.defined(moveSelected.feature)) {
		moveSelected.feature.color = moveSelected.originalColor;
		moveSelected.feature = undefined;
	}
	// Pick a new feature
	var pickedFeature = viewer.scene.pick(evt.position);
	if (!Cesium.defined(pickedFeature)) {
		that.pickedFeaturepropertys = [];
		return;
	} else if (moveSelected.feature === pickedFeature) {
		return;
	} else {
		moveSelected.feature = pickedFeature;
		if (pickedFeature === highlighted.feature) {
			Cesium.Color.clone(highlighted.originalColor, moveSelected.originalColor);
			highlighted.feature = undefined;
		} else {
			Cesium.Color.clone(pickedFeature.color, moveSelected.originalColor);
		}

		// Highlight newly selected feature
		pickedFeature.color = Cesium.Color.AQUA;
		//如果拾取的要素包含属性信息
		if (Cesium.defined(pickedFeature.getPropertyNames)) {
			var propertyNames = pickedFeature.getPropertyNames();
			var length = propertyNames.length;
			for (let i = 0; i < length; ++i) {
				var propertyName = propertyNames[i];
				var propertyValue = pickedFeature.getProperty(propertyName);
				that.pickedFeaturepropertys.push({
					name: propertyName,
					value: propertyValue,
				});
			}
		}
	}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

移动高亮效果：

 点击高亮：

本文标签： Cesiumfeature高亮