cesium 隐藏entity_cesium/整理/cesium动态拖动entity并更新table.md · master · lightbook / web · CODE...

实现：通过对在cesium上绘制的点拖拽实现动态更新对应entity坐标

版本：

"vue": "^2.6.10",

"@vue/cli":"3.8.4"

"node":"v10.16.0"

"npm":"6.9.0"

画点

//画点

drawPoint_1(){

var _this = this;

if( !this.dragButton ){

this.drawPoint(function(positions){

var wgs84_positions = [];

for(var i=0; i

console.log( positions[i] )

var wgs84_point = _this.Cartesian3_to_WGS84({

x: positions[i].x,

y: positions[i].y,

z: positions[i].z

});

wgs84_point.id = i

// wgs84_positions.(wgs84_point);

wgs84_positions.push(positions);

console.log(wgs84_positions)

}

_this.Layers.map((v,index)=>{

if(v.type == 'geo'){

v.list.push( wgs84_point )

}

for( let i = 0 ; i < v.list.length;i++ ){

if( v.list[i].lat === wgs84_point.lat ){

v.list[i].positions = positions[i]

}

}

console.log( v.list )

})

console.log(wgs84_positions);

})

}

},

drawPoint(callback){

var this = this;

//坐标存储

var positions = [];

console.log( Cesium )

_this.handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas);

//单击鼠标左键画点

_this.handler.setInputAction(function (movement) {

var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid);

positions.push(cartesian);

callback(positions);

_this.viewer.entities.add({

position: cartesian,

name:'geo',

point: {

color: Cesium.Color[this.pointSymbol.type].withAlpha(this.pointSymbol.opacity),

pixelSize: _this.pointSymbol.pixelSize,

heightReference: Cesium.HeightReference.CLAMP_TO_GROUND

}

});

console.log( _this.viewer.entities )

}, Cesium.ScreenSpaceEventType.LEFTCLICK);

// callback(positions);

//单击鼠标右键结束画点

_this.handler.setInputAction(function (movement) {

_this.handler.destroy();

//callback(positions);

}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

},

//笛卡尔坐标系转WGS84坐标系

Cartesian3_to_WGS84(point) {

var cartesian33 = new Cesium.Cartesian3(point.x, point.y, point.z);

var cartographic = Cesium.Cartographic.fromCartesian(cartesian33);

var lat = Cesium.Math.toDegrees(cartographic.latitude);

var lng = Cesium.Math.toDegrees(cartographic.longitude);

var alt = cartographic.height;

return {lat: lat, lng: lng, alt: alt};

},

## 使用

> 开启可拖动按钮后，实现拖拽：

> 传参：cesium容器viewer，对应的绘制图层layer，drawBtn状态：判断是否可拖拽

```js

handleDrawBtn() {

this.drawBtn = !this.drawBtn;

if (this.drawBtn) {

this.$store.state.app.dragButton = true;

console.log( this.viewer )

var moveTool= MoveEntity({ 'viewer': this.viewer,'layer':this.Layers, "drawBtn":this.drawBtn});

} else {

console.log("不准拖动");

this.$store.state.app.dragButton = false;

var moveTool= MoveEntity({ 'viewer': '','layer':'', "drawBtn":this.$store.state.app.dragButton});

}

},

分析

拖拽--drag.js

import Cesium from 'cesium/Cesium'

var MoveEntity = (

function () {

var leftDownFlag = false;

var pointDraged = null;

var viewer;

var handler;

var layer;

var drawBtn;

var pos;

function ConstructMoveEntity(options) {

console.log( options )

layer = options.layer

viewer = options.viewer;

drawBtn = options.drawBtn;

/* 拖拽按钮为true，则创建事件处理对象 */

if( drawBtn==true ){

handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

Init();

}else{

return;

}

}

function Init() {

var positions = []

/* Select plane when mouse down */

/* 鼠标按下时，选取当前的entity，并且锁定相机不可转动地图 */

handler.setInputAction(function (movement) {

pointDraged = viewer.scene.pick(movement.position);//选取当前的entity

leftDownFlag = true;

/* 在这里记录初次按下时的entity中的position值 */

if (pointDraged) {

pos = pointDraged.id.position._value

viewer.scene.screenSpaceCameraController.enableRotate = false;//锁定相机

}

console.log( pos );

}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

// Release plane on mouse up

/* 鼠标抬起锁，解开相机*/

handler.setInputAction(function () {

leftDownFlag = false;

pointDraged = null;

viewer.scene.screenSpaceCameraController.enableInputs = true;

}, Cesium.ScreenSpaceEventType.LEFT_UP);

// Update plane on mouse move

/* 鼠标移动时，更新entity的position，并且更新图层的list中对应lat,lng,alt */

handler.setInputAction(function (movement) {

if (leftDownFlag === true && pointDraged != null) {

let ray = viewer.camera.getPickRay(movement.endPosition);

let cartesian = viewer.scene.globe.pick(ray, viewer.scene);

// console.log(cartesian);

positions.push( cartesian )

pointDraged.id.position = new Cesium.CallbackProperty(function () {

return cartesian;

}, false);//防止闪烁，在移动的过程

// console.log( pointDraged )

var wgs84_positions = [];

for(var i=0; i

var wgs84_point = Cartesian3_to_WGS84({

x: positions[i].x,

y: positions[i].y,

z: positions[i].z

});

wgs84_positions = wgs84_point;

}

console.log(wgs84_positions);

layer.map(v=>{

if(v.type == 'geo'){

v.list.map((item,index)=>{

console.log( item )

console.log( item.positions.x )

if(item.positions.x==pos.x){

item.lat = wgs84_positions.lat

item.lng = wgs84_positions.lng;

item.alt = wgs84_positions.alt;

}

})

}else if(v.type == 'line'|| v.type == 'lines'){

v.list.map(item=>{

if(item.positions.x==pos.x){

item.lat = wgs84_positions.lat

item.lng = wgs84_positions.lng;

item.alt = wgs84_positions.alt;

}

})

// v.list.push( wgs84_positions )

// console.log( v )

}else if(v.type == 'polygon'){

v.list.map(item=>{

if(item.positions.x==pos.x){

item.lat = wgs84_positions.lat

item.lng = wgs84_positions.lng;

item.alt = wgs84_positions.alt;

}

})

}

});

console.log( layer );

// Cartesian3_to_WGS84(positions);

}

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

}

/* 笛卡尔坐标系转WGS84坐标系 */

function Cartesian3_to_WGS84(point){

var cartesian33 = new Cesium.Cartesian3(point.x, point.y, point.z);

var cartographic = Cesium.Cartographic.fromCartesian(cartesian33);

var lat = Cesium.Math.toDegrees(cartographic.latitude);

var lng = Cesium.Math.toDegrees(cartographic.longitude);

var alt = cartographic.height;

return {lat: lat, lng: lng, alt: alt};

}

return ConstructMoveEntity;

})();

export default MoveEntity