cesium-动态编辑primitive探索 ( 三)
在昨日基础之上改进之后可以进行正常的编辑了,目前相较于原始的逻辑,缺少点的添加逻辑和删除逻辑;
删除逻辑相对容易,添加的逻辑还需进行研究,因为原始不是每次拉动都会在两点的中间添加一个新的点。
相对上一版本,将处理逻辑放在left_down中。,构造primititive的js文件没有做任何修改;
此外,有一个问题是,每次刷新时,浏览器会异常卡。这也是后续需要解决的一个问题。
var viewer = new Cesium.Viewer('cesiumContainer', { creditContainer: "creditContainer", TerrainProvider: null, selectionIndicator: false, animation: false, baseLayerPicker: true, geocoder: false, timeline: false, sceneModePicker: true, navigationHelpButton: false, infoBox: false, fullscreenButton: true }); //取消双击事件 viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); //设置默认地图源 viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[6]; //设置homebutton的位置 Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56);//Rectangle(west, south, east, north) //设置初始位置 viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000000) }); var positionWord = []; positionWord.push(Cesium.Cartesian3.fromDegrees(110.20, 34.55, 0)); positionWord.push(Cesium.Cartesian3.fromDegrees(115.20, 34.55, 0)); positionWord.push(Cesium.Cartesian3.fromDegrees(115.20, 39.55, 0)); var pr=new changeLinePrimitive({positions: positionWord}) console.log(pr) viewer.scene.primitives.add(pr); var editFlag=false var moveFlag=false//当点击的点是bill时,开始变动primitive var billEntity=[]//记录添加的折点entity var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); var dragId=-1 handler.setInputAction(function(movement) { var pick = viewer.scene.pick(movement.position); console.log(pick) if(pick){ //pick的是bill-有leaf_down来处理逻辑,否则,添加mark if(pick.id!=null &&pick.id.name=="bill"){ } else{ editFlag=true var pos=pick.primitive.geometryInstances.geometry._positions removeMarkEntity(billEntity) billEntity=[] addMark(pos) dragId=-1 } } //没有选中任何实体 else{ removeMarkEntity(billEntity) initeventParams() } },Cesium.ScreenSpaceEventType.LEFT_CLICK); handler.setInputAction(function(movement) { if ( moveFlag && dragId!=-1) { let ray = viewer.camera.getPickRay(movement.endPosition); let cartesian = viewer.scene.globe.pick(ray, viewer.scene); pr.positions[dragId]=cartesian let cartographic = Cesium.Cartographic.fromCartesian(cartesian); let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(3); let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(3); billEntity[dragId].position=new Cesium.CallbackProperty(function () { return Cesium.Cartesian3.fromDegrees(longitudeString, latitudeString, 0); }, false);//防止闪烁,在移动的过程) } },Cesium.ScreenSpaceEventType.MOUSE_MOVE); function initeventParams(){ dragId=-1 billEntity=[] editFlag=false moveFlag=false viewer.scene.screenSpaceCameraController.enableRotate = true;//恢复相机状态 } handler.setInputAction(function (movement) { var pick = viewer.scene.pick(movement.position); if(pick) { //pick的是bill if (pick.id != null && pick.id.name == "bill") { console.log("相机锁定") dragId = pick.id.id.split("-")[1] moveFlag = true viewer.scene.screenSpaceCameraController.enableRotate = false;//锁定相机 } } }, Cesium.ScreenSpaceEventType.LEFT_DOWN); //左键弹起,仅仅标志拖动结束,但仍可能继续编辑 handler.setInputAction( function (movement) { moveFlag=false }, Cesium.ScreenSpaceEventType.LEFT_UP); function addMark(positions) { var bill= { show: true, pixelOffset: new Cesium.Cartesian2(0, 0), eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.CENTER, scale: 2.0, image: "./sampledata/images/dragIcon.png", color: new Cesium.Color(1.0, 1.0, 1.0, 1.0) } var entity positions.map((v,index) =>{ console.log(index) var cartesian3=new Cesium.Cartesian3(v.x,v.y,v.z); var cartographic=viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3); var lat=Cesium.Math.toDegrees(cartographic.latitude); var lng=Cesium.Math.toDegrees(cartographic.longitude); var height=Cesium.Math.toDegrees(cartographic.height); entity=viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(lng, lat, height), billboard:bill, name:"bill", id:"bill-"+index }) billEntity.push(entity) }) } function removeMarkEntity(entities){ entities.map(v =>{ viewer.entities.remove(v) }) }