cesium1.65api版本貼地貼模型標繪工具效果(附源碼下載)

前言

cesium 官網的api文檔介紹地址cesium官網api，里面詳細的介紹 cesium 各個類的介紹，還有就是在線例子：cesium 官網在線例子，這個也是學習 cesium 的好素材。

內容概覽

1.cesium1.65api版本貼地貼模型標繪工具效果
2.源代碼demo下載

效果圖如下：

實現思路：

• 鼠標左鍵Cesium.ScreenSpaceEventType.LEFT_CLICK
• 鼠標移動Cesium.ScreenSpaceEventType.MOUSE_MOVE
• 鼠標右鍵Cesium.ScreenSpaceEventType.RIGHT_CLICK
  鼠標左鍵事件，獲取點擊地圖的每個坐標點；鼠標移動事件，動態撲捉鼠標移動狀態，下一個坐標點位置；鼠標右鍵意味着標繪結束狀態。

• 定義封裝DrawTool標繪工具：

var DrawTool = function (obj) {
if (!obj.viewer || !obj) {
console.warn("缺少必要參數！--viewer");
return;
}
this.viewer = obj.viewer;
this.hasEdit = obj.hasEdit;
this.toolArr = [];
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.show = obj.drawEndShow;
}
DrawTool.prototype = {
startDraw: function (opt) {
var that = this;
// if (this.hasEdit) {
// this.bindEdit();
// }
if (opt.type == "polyline") {
var polyline = new CreatePolyline(this.viewer, opt.style);
polyline.start(function (evt) {
if (that.hasEdit) {
that.unbindEdit();
polyline.startModify(opt.modifySuccess);
that.lastSelectEntity = polyline;
}
if (opt.success) opt.success(evt);
if (that.show == false) polyline.setVisible(false);
});
this.toolArr.push(polyline);
}
if (opt.type == "polygon") {
var polygon = new CreatePolygon(this.viewer, opt.style);
polygon.start(function () {
if (that.hasEdit) {
that.unbindEdit();
polygon.startModify();
that.lastSelectEntity = polygon;
}
if (opt.success) opt.success(polygon);
if (that.show == false) polygon.setVisible(false);
});
this.toolArr.push(polygon);
}
if (opt.type == "billboard") {
var billboard = new CreateBillboard(this.viewer, opt.style);
billboard.start(function () {
if (that.hasEdit) {
that.unbindEdit();
billboard.startModify();
that.lastSelectEntity = billboard;
}
if (opt.success) opt.success(billboard);
if (that.show == false) billboard.setVisible(false);
});
this.toolArr.push(billboard);
}
if (opt.type == "circle") {
var circle = new CreateCircle(this.viewer, opt.style);
circle.start(function () {
if (that.hasEdit) {
that.unbindEdit();
circle.startModify();
that.lastSelectEntity = circle;
}
if (opt.success) opt.success(circle);
if (that.show == false) circle.setVisible(false);
});
this.toolArr.push(circle);
}
if (opt.type == "rectangle") {
var rectangle = new CreateRectangle(this.viewer, opt.style);
rectangle.start(function () {
if (that.hasEdit) {
that.unbindEdit();
rectangle.startModify();
that.lastSelectEntity = rectangle;
}
if (opt.success) opt.success(rectangle);
if (that.show == false) rectangle.setVisible(false);
});
this.toolArr.push(rectangle);
}
//重寫材質
if (opt.type == "flowPolyline") {
var polyline = new CreatePolyline(this.viewer, opt.style);
polyline.start(function () {
if (that.hasEdit) {
that.unbindEdit();
polyline.startModify();
}
if (opt.success) opt.success(polyline);
});
this.toolArr.push(polyline);
}
 
},
createByPositions: function (opt) {
if (this.hasEdit) {
this.bindEdit();
}
if (!opt) opt = {};
if (opt.type == "polyline") {
var polyline = new CreatePolyline(this.viewer, opt.style);
polyline.createByPositions(opt.positions, opt.success);
this.toolArr.push(polyline);
}
if (opt.type == "polygon") {
var polygon = new CreatePolygon(this.viewer, opt.style);
polygon.createByPositions(opt.positions, opt.success);
this.toolArr.push(polygon);
}
if (opt.type == "billboard") {
var billboard = new CreateBillboard(this.viewer, opt.style);
billboard.createByPositions(opt.positions, function(){
if(opt.success) opt.success(billboard)
});
this.toolArr.push(billboard);
}
},
destroy: function () {
for (var i = 0; i < this.toolArr.length; i++) {
var obj = this.toolArr[i];
obj.destroy();
}
},
lastSelectEntity: null,
bindEdit: function () {
var that = this;
this.handler.setInputAction(function (evt) { //單機開始繪制
var pick = that.viewer.scene.pick(evt.position);
if (Cesium.defined(pick) && pick.id) {
for (var i = 0; i < that.toolArr.length; i++) {
if (pick.id.objId == that.toolArr[i].objId && (that.toolArr[i].state == 1||that.toolArr[i].state == 2)) {
if (that.lastSelectEntity) {
that.lastSelectEntity.endModify();
}
that.toolArr[i].startModify();
that.lastSelectEntity = that.toolArr[i];
break;
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},
unbindEdit: function () {
for (var i = 0; i < this.toolArr.length; i++) {
this.toolArr[i].endModify();
}
}
}

• 封裝定義標繪點、線、面、矩形js類,里面涉及到細節函數，自行看對應的源碼demo：
  

• DrawTool標繪工具初始化以及調用：

• 更多詳情見下面鏈接文章：

  小專欄此文章

  文章提供源碼，對本專欄感興趣的話，可以關注一波