有了前面的经验，再同理做出可拉伸的圆柱体就很轻松了。
缺陷在于：
1 目前只能编辑高度，没有区分三个bill的功能；实际上也不难，下一版就可以修改好了；
2 bill没有随着圆柱的上升而变动
3 拉伸的高度计算有点问题，后续再解决
js代码
function changeLinePrimitive(options) {
let {semiMajorAxis,semiMinorAxis,extrudedHeight,position}=options
this.semiMajorAxis=semiMajorAxis
this.semiMinorAxis=semiMinorAxis
this.extrudedHeight=extrudedHeight
this.position=position
}
changeLinePrimitive.prototype.getGeometry = function () {
return new Cesium.EllipseGeometry({
center : this.position,
semiMajorAxis : this.semiMajorAxis,
semiMinorAxis : this.semiMinorAxis,
extrudedHeight: this.extrudedHeight,
})
};
changeLinePrimitive.prototype.update = function (context, frameState, commandList) {
var geometry = this.getGeometry();
if (!geometry) {
return;
}
this._primitive = new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry: geometry,
}),
releaseGeometryInstances:false,
appearance: new Cesium.EllipsoidSurfaceAppearance({
material:Cesium.Material.fromType('Stripe')
}),
asynchronous:false,
// show:true
})
var primitive=this._primitive
primitive.update(context, frameState, commandList);
};
调用代码：
var billEntity=[]
var pr=new changeLinePrimitive({
semiMajorAxis:500000.0,
semiMinorAxis : 500000.0,
extrudedHeight:0,
position:Cesium.Cartesian3.fromDegrees(119, 40.03883)
})
console.log(pr)
viewer.scene.primitives.add(pr);
function addMarker(center,max,min){
viewer.entities.removeAll()
var bill= {
show: true,
pixelOffset: new Cesium.Cartesian3(0, 0,1000),
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)
}
let positions=[]
positions.push(center)
let radiusPt={
x:center.x+max,
y:center.y,
z:center.z
}
let centerOffPt={
x:center.x+max/10+5,
y:center.y,
z:center.z
}
positions.push(centerOffPt)
positions.push(radiusPt)
positions.push()
var entity
positions.map((v,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);
console.log(lat,lng,height)
entity=viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(lng, lat, 1000),
billboard:bill,
name:"bill",
id:"bill-"+index
})
billEntity.push(entity)
})
console.log(billEntity)
}
var dragStartPostion
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var moveFlag=false
handler.setInputAction(function(movement) {
if ( moveFlag) {
let ray = viewer.camera.getPickRay(movement.endPosition);
let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
let ray2 = viewer.camera.getPickRay(dragStartPostion);
let cartesian2= viewer.scene.globe.pick(ray2, viewer.scene);
let cz=cartesian2.z-cartesian.z
console.log(cz)
pr.extrudedHeight=-cz
// pr.positions[dragId]=cartesian
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") {
dragStartPostion=movement.position
moveFlag = true
console.log("起始拖动坐标"+dragStartPostion)
viewer.scene.screenSpaceCameraController.enableRotate = false;//锁定相机
}
else{
let geometry=pick.primitive.geometryInstances.geometry
//console.log( pick.primitive.geometryInstances.geometry)
addMarker(geometry._center,geometry._semiMajorAxis,geometry._semiMinorAxis)
}
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function (movement) {
moveFlag=false
viewer.scene.screenSpaceCameraController.enableRotate = true;//锁定相机
}, Cesium.ScreenSpaceEventType.LEFT_UP);