gisthreemap
Version:
基于webGL的三维api
495 lines (469 loc) • 18.1 kB
JavaScript
/*
* @Descripttion:
* @version: 1.0
* @Author: zhangti
* @Date: 2019-10-22 11:18:30
* @LastEditors : sueRimn
* @LastEditTime : 2020-01-14 10:53:57
*/
/**
* 动态绘制图形
* 返回坐标点
*/
import mouseManager from './MouseManager'
import Entitys from './Mentitys'
const pospoi = require('../../assets/images/squib_y.png').default || require('../../assets/images/squib_y.png')
export default class DrawDynamicTool {
constructor(core) {
this.viewer = core;
this.removeObj = [];
/**
* 实体
* 创建绘制提示
*/
this.entitys = new Entitys(core);
this.mouseManager = new mouseManager(core);
this._resultTip = this.entitys.createMsgTip();
this.handleArr = [];
}
/**
* 删除
*/
remove() {
if (this.handleArr.length > 0) {
for (let i in this.handleArr) this.handleArr[i].destroy();
this.entitys.remove(this._resultTip);
this._resultTip = null;
this.handleArr = [];
}
if (this.removeObj.length != 0) {
for (let i in this.removeObj) {
this.viewer.entities.remove(this.removeObj[i]);
}
this.removeObj = [];
}
}
/**
* 清除事件
*/
removeHandle() {
if (this.handleArr.length > 0) {
for (let i in this.handleArr) this.handleArr[i].destroy();
this.entitys.remove(this._resultTip);
this._resultTip = null;
this.handleArr = [];
}
}
//画点
drawPoint({
label,
billboard,
defaultEnt
}, callback) {
try {
var _this = this;
//坐标存储
var positions = [];
var handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas);
if (!this._resultTip) this._resultTip = this.entitys.createMsgTip();
this.handleArr.push(handler);
//单击鼠标左键画点
handler.setInputAction(function (movement) {
// 拾取图层
// let pickRay = _this.viewer.camera.getPickRay(movement.position);
// let layers = _this.viewer.imageryLayers.pickImageryLayers(pickRay, _this.viewer.scene)
// console.log(layers,'_this.viewer_this.viewer_this.viewer_this.viewer');
var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid);
let position = _this.mouseManager.worldToLonlat(cartesian);
let pick = _this.viewer.scene.pick(movement.position);
console.log(pick,'pickpick')
// cartesian.z = 0
console.log(position,'position')
// callback(cartesian, position);
// return
if (defaultEnt) {
let entity = _this.viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(
position.lon,
position.lat,
0
)
});
// let position = _this.mouseManager.worldToLonlat(cartesian);
// entity.label = label || _this.entitys.getLabel('经度:' + position.lon.toFixed(6) + '°\n 纬度' + position.lat.toFixed(6) + '°\n 高度:' + position.alt.toFixed(2) + ' m', new Cesium.Cartesian2(0, -35));
entity.billboard = billboard || _this.entitys.getBillboard(pospoi);
_this.removeObj.push(entity);
}
positions.push(cartesian);
callback(positions, position, movement);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//单击鼠标右键结束画点
// handler.setInputAction(function (movement) {
// _this.removeHandle();
// callback(positions);
// }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
} catch (error) {
console.log(error);
}
}
//画线
drawLineString(callback) {
var _this = this;
var PolyLinePrimitive = (function () {
function _(positions) {
this.options = {
polyline: {
show: true,
positions: [],
material: Cesium.Color.CHARTREUSE,
width: 5,
clampToGround: true
}
};
this.positions = positions;
this._init();
}
_.prototype._init = function () {
var _self = this;
var _update = function () {
return _self.positions;
};
//实时更新polyline.positions
this.options.polyline.positions = new Cesium.CallbackProperty(_update, false);
_this.removeObj.push(_this.viewer.entities.add(this.options));
};
return _;
})();
var handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas);
if (!this._resultTip) this._resultTip = this.entitys.createMsgTip();
this.handleArr.push(handler);
var positions = [];
var poly = undefined;
//鼠标左键单击画点
handler.setInputAction(function (movement) {
var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid);
if (positions.length == 0) {
positions.push(cartesian.clone());
}
positions.push(cartesian);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//鼠标移动
handler.setInputAction(function (movement) {
var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.endPosition, _this.viewer.scene.globe.ellipsoid);
if (positions.length >= 2) {
if (!Cesium.defined(poly)) {
poly = new PolyLinePrimitive(positions);
} else {
if (cartesian != undefined) {
positions.pop();
cartesian.y += (1 + Math.random());
positions.push(cartesian);
}
_this.entitys.showTip(_this._resultTip, true, cartesian, '鼠标右键结束,平板长按结束');
}
} else {
_this.entitys.showTip(_this._resultTip, true, cartesian, '点击绘制');
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//单击鼠标右键结束画线
handler.setInputAction(function (movement) {
_this.removeHandle();
callback(positions);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
//画面
drawPolygon(callback) {
var _this = this;
var PolygonPrimitive = (function () {
function _(positions) {
this.options = {
name: '多边形',
polygon: {
hierarchy: [],
perPositionHeight: true,
//fill:false,
outline: false,
outlineWidth: 10.0,
material: Cesium.Color.fromCssColorString('#F44336').withAlpha(0.5),
outlineColor: Cesium.Color.CHARTREUSE,
clampToGround: true
}
};
this.hierarchy = positions;
this._init();
}
_.prototype._init = function () {
var _self = this;
var _update = function () {
return new Cesium.PolygonHierarchy(_self.hierarchy);
};
//实时更新polygon.hierarchy
this.options.polygon.hierarchy = new Cesium.CallbackProperty(_update, false);
_this.removeObj.push(_this.viewer.entities.add(this.options));
};
return _;
})();
var handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas);
if (!this._resultTip) this._resultTip = this.entitys.createMsgTip();
this.handleArr.push(handler);
var positions = [];
var poly = undefined;
//鼠标单击画点
handler.setInputAction(function (movement) {
var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid);
if (positions.length == 0) {
positions.push(cartesian.clone());
}
positions.push(cartesian);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//鼠标移动
handler.setInputAction(function (movement) {
var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.endPosition, _this.viewer.scene.globe.ellipsoid);
if (positions.length >= 2) {
if (!Cesium.defined(poly)) {
poly = new PolygonPrimitive(positions);
} else {
if (cartesian != undefined) {
positions.pop();
cartesian.y += (1 + Math.random());
positions.push(cartesian);
}
_this.entitys.showTip(_this._resultTip, true, cartesian, '鼠标右键结束,平板长按结束');
}
} else {
_this.entitys.showTip(_this._resultTip, true, cartesian, '点击绘制');
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//鼠标右键单击结束绘制
handler.setInputAction(function (movement) {
_this.removeHandle();
callback(positions);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
//画圆
circleDraw(_callBack) {
let _self = this;
//_self.viewer.scene.globe.depthTestAgainstTerrain = true;
//if(!_self.circle.entity)_self.entitys.remove(_self.circle.entity);
_self.circle = {
points: [],
rect: null,
entity: null,
r: 1
};
var tempPosition;
let cartographic1;
let p;
let tempLon;
let tempLat;
var handle = new Cesium.ScreenSpaceEventHandler(_self.viewer.scene.canvas);
if (!this._resultTip) this._resultTip = this.entitys.createMsgTip();
this.handleArr.push(handle);
//common.handlerList.push(ShapeEventHandler);
handle.setInputAction(function (click) {
tempPosition = _self.getPointFromWindowPoint(click.position);
//选择的点在球面上
if (tempPosition) {
function callBackPos() {
if (_self.circle.points.length == 0) return;
const minlon = Cesium.Math.toDegrees(_self.circle.points[0].longitude);
const minlat = Cesium.Math.toDegrees(_self.circle.points[0].latitude);
const maxlon = Cesium.Math.toDegrees(_self.circle.points[1].longitude);
const maxlat = Cesium.Math.toDegrees(_self.circle.points[1].latitude);
const r = _self.getFlatternDistance(minlat, minlon, maxlat, maxlon);
if (r) {
return r;
}
return 1;
};
if (_self.circle.points.length == 0) {
p = click.position;
cartographic1 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(tempPosition);
if (!tempPosition) return false;
_self.circle.points.push(_self.viewer.scene.globe.ellipsoid.cartesianToCartographic(tempPosition));
_self.circle.points.push(_self.viewer.scene.globe.ellipsoid.cartesianToCartographic(tempPosition));
tempLon = Cesium.Math.toDegrees(cartographic1.longitude);
tempLat = Cesium.Math.toDegrees(cartographic1.latitude);
_self.circle.entity = _self.viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(tempLon, tempLat),
ellipse: {
semiMinorAxis: new Cesium.CallbackProperty(callBackPos, false),
semiMajorAxis: new Cesium.CallbackProperty(callBackPos, false),
//fill:false,
outline: false,
outlineWidth: 10.0,
outlineColor: Cesium.Color.CHARTREUSE,
material: Cesium.Color.fromCssColorString('#F44336').withAlpha(0.5),
height: 1
}
});
_self.removeObj.push(_self.circle.entity);
} else {
var tempCircle = new Cesium.CircleOutlineGeometry({
center: Cesium.Cartesian3.fromDegrees(tempLon, tempLat),
radius: callBackPos(),
granularity: Math.PI / 2
});
var geometry = Cesium.CircleOutlineGeometry.createGeometry(tempCircle);
var float64ArrayPositionsIn = geometry.attributes.position.values;
var positionsIn = [].slice.call(float64ArrayPositionsIn);
_self.removeHandle();
//画出半径
_self.removeObj.push(_self.entitys.createPoint(Cesium.Cartesian3.fromDegrees(tempLon, tempLat), '半径 :' + parseFloat(callBackPos()).toFixed(2)));
_callBack(positionsIn, [tempLon, tempLat], callBackPos());
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handle.setInputAction(function (movement) {
var moveEndPosition = _self.getPointFromWindowPoint(movement.endPosition);
if (_self.circle.points.length == 0) {
_self.entitys.showTip(_self._resultTip, true, moveEndPosition, '点击地图');
return false;
}
_self.entitys.showTip(_self._resultTip, true, moveEndPosition, '再次点击结束');
//选择的点在球面上
if (moveEndPosition) {
_self.circle.points.pop();
_self.circle.points.push(_self.viewer.scene.globe.ellipsoid.cartesianToCartographic(moveEndPosition));
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
//画矩形
drawRect(callback) {
let _self = this;
let pointsArr = [];
_self.shape = {
points: [],
rect: null,
entity: null
};
var tempPosition;
var handle = new Cesium.ScreenSpaceEventHandler(_self.viewer.scene.canvas);
if (!this._resultTip)
if (!this._resultTip) this._resultTip = this.entitys.createMsgTip();
this.handleArr.push(handle);
//鼠标左键单击画点
handle.setInputAction(function (click) {
tempPosition = _self.getPointFromWindowPoint(click.position);
//选择的点在球面上
if (tempPosition) {
if (_self.shape.points.length == 0) {
pointsArr.push(tempPosition);
let cartesian = _self.viewer.scene.globe.ellipsoid.cartesianToCartographic(tempPosition);
_self.shape.points.push(cartesian);
_self.shape.rect = Cesium.Rectangle.fromCartographicArray(_self.shape.points);
_self.shape.rect.east += 0.000001;
_self.shape.rect.north += 0.000001;
_self.shape.entity = _self.viewer.entities.add({
rectangle: {
coordinates: _self.shape.rect,
//fill:false,
outline: false,
outlineWidth: 10.0,
outlineColor: Cesium.Color.CHARTREUSE,
material: Cesium.Color.fromCssColorString('#F44336').withAlpha(0.5),
height: 10
}
});
_self.bufferEntity = _self.shape.entity;
_self.removeObj.push(_self.shape.entity);
} else {
_self.removeHandle();
callback(pointsArr);
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//鼠标移动
handle.setInputAction(function (movement) {
if (!movement.endPosition) return false;
let moveEndPosition = _self.getPointFromWindowPoint(movement.endPosition);
if (_self.shape.points.length == 0) {
_self.entitys.showTip(_self._resultTip, true, moveEndPosition, '点击绘制');
return;
}
//选择的点在球面上
if (moveEndPosition) {
pointsArr[1] = moveEndPosition;
let cartesian = _self.viewer.scene.globe.ellipsoid.cartesianToCartographic(moveEndPosition);
_self.shape.points[1] = cartesian;
_self.shape.rect = Cesium.Rectangle.fromCartographicArray(_self.shape.points);
if (_self.shape.rect.west == _self.shape.rect.east)
_self.shape.rect.east += 0.000001;
if (_self.shape.rect.south == _self.shape.rect.north)
_self.shape.rect.north += 0.000001;
_self.shape.entity.rectangle.coordinates = _self.shape.rect;
_self.entitys.showTip(_self._resultTip, true, moveEndPosition, '再次点击结束');
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
//清除所有Entity和ImageryLayers
clearHandle() {
//移除所有实体Entity
this.viewer.entities.removeAll();
//移除cesium加载的ImageryLayer
for (var i = 0; i < this.removeImageryLayers.length; i++) {
this.viewer.imageryLayers.remove(this.removeImageryLayers[i]);
}
}
getPointFromWindowPoint(point) {
if (this.viewer.scene.terrainProvider.constructor.name == "EllipsoidTerrainProvider") {
return this.viewer.camera.pickEllipsoid(point, this.viewer.scene.globe.ellipsoid);
} else {
var ray = this.viewer.scene.camera.getPickRay(point);
return this.viewer.scene.globe.pick(ray, this.viewer.scene);
}
}
//笛卡尔坐标系转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
};
}
//WGS84坐标系转笛卡尔坐标系
WGS84_to_Cartesian3(point) {
var car33 = Cesium.Cartesian3.fromDegrees(point.lng, point.lat, point.alt);
var x = car33.x;
var y = car33.y;
var z = car33.z;
return {
x: x,
y: y,
z: z
};
}
//计算两点间距离
getFlatternDistance(lat1, lng1, lat2, lng2) {
var EARTH_RADIUS = 6378137.0; //单位M
var PI = Math.PI;
function getRad(d) {
return d * PI / 180.0;
}
var f = getRad((lat1 + lat2) / 2);
var g = getRad((lat1 - lat2) / 2);
var l = getRad((lng1 - lng2) / 2);
var sg = Math.sin(g);
var sl = Math.sin(l);
var sf = Math.sin(f);
var s, c, w, r, d, h1, h2;
var a = EARTH_RADIUS;
var fl = 1 / 298.257;
sg = sg * sg;
sl = sl * sl;
sf = sf * sf;
s = sg * (1 - sl) + (1 - sf) * sl;
c = (1 - sg) * (1 - sl) + sf * sl;
w = Math.atan(Math.sqrt(s / c));
r = Math.sqrt(s * c) / w;
d = 2 * w * a;
h1 = (3 * r - 1) / 2 / c;
h2 = (3 * r + 1) / 2 / s;
return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
}
}