标绘多边形
// DrawPolygon
/*
绘制面
*/
class DrawPolygon {
static viewer = null;
static Cesium = null;
static callback = null;
static _polygon = null;
static _polygonLast = null;
static _positions = [];
static _entities_point = [];;
static _entities_polygon = [];
static _polygonData = null;
constructor(arg) {
// this.viewer = arg.viewer;
// this.Cesium = arg.Cesium;
// this.callback=arg.callback;
// this._polygon = null; //活动面
// this._polygonLast = null; //最后一个面
// this._positions = []; //活动点
// this._entities_point = []; //脏数据
// this._entities_polygon = []; //脏数据
// this._polygonData = null; //用户构造面
}
//返回最后活动面
get polygon() {
return this._polygonLast;
}
//返回面数据用于加载面
static getData() {
return this._polygonData;
}
//加载面
static loadPolygon(data) {
var $this = this;
return this.viewer.entities.add({
polygon: {
hierarchy: new $this.Cesium.PolygonHierarchy(data),
clampToGround: true,
show: true,
fill: true,
material: new $this.Cesium.StripeMaterialProperty({
evenColor: $this.Cesium.Color.fromCssColorString('#29E4F546'),
oddColor: $this.Cesium.Color.fromCssColorString('#29E4F546'),
// repeat: 5.0,
}),
height:0,
outline : true,
outlineColor : $this.Cesium.Color.fromCssColorString('#29E4F5'),
outlineWidth: 8,
}
});
}
//开始绘制
static startCreate() {
var $this = this;
this.handler = new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.handler.setInputAction(function (evt) { //单机开始绘制
var cartesian = $this.getCatesian3FromPX(evt.position);
if ($this._positions.length == 0) {
$this._positions.push(cartesian.clone());
}
$this.createPoint(cartesian);
$this._positions.push(cartesian);
console.log('绘制点')
}, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.handler.setInputAction(function (evt) { //移动时绘制面
if ($this._positions.length < 1) return;
var cartesian = $this.getCatesian3FromPX(evt.endPosition);
if ($this._positions.length == 3) {
if (!$this.Cesium.defined($this._polygon)) {
$this._polygon = $this.createPolygon();
}
}
$this._positions.pop();
$this._positions.push(cartesian);
console.log('移动时绘制面')
}, $this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
this.handler.setInputAction(function (evt) {
console.log('移动时绘制面22')
if (!$this._polygon) { ; return};
var cartesian = $this.getCatesian3FromPX(evt.position);
$this._positions.pop();
$this._positions.push(cartesian);
$this.createPoint(cartesian);
$this._polygonData = $this._positions.concat();
$this.viewer.entities.remove($this._positions); //移除
$this._positions=null;
$this._positions = [];
var Polygon = $this.loadPolygon($this._polygonData);
$this._entities_polygon.push(Polygon);
$this._polygonLast = Polygon;
// 世界坐标转化为经纬度
let latLngArr = []
for( let item of $this._polygonData ) {
let ellipsoid=$this.viewer.scene.globe.ellipsoid;
let cartesian3=new $this.Cesium.Cartesian3(item.x, item.y, item.z);
let cartographic=ellipsoid.cartesianToCartographic(cartesian3);
let lat = $this.Cesium.Math.toDegrees(cartographic.latitude);
let lng = $this.Cesium.Math.toDegrees(cartographic.longitude);
latLngArr.push({lat, lng})
}
if(typeof $this.callback=="function"){
$this.callback(Polygon,latLngArr);
}
$this.destroy();
}, $this.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
}
//创建面
static createPolygon() {
var $this = this;
var polygon = this.viewer.entities.add({
polygon: {
hierarchy: new $this.Cesium.CallbackProperty(function () {
return new $this.Cesium.PolygonHierarchy($this._positions);
}, false),
clampToGround: true,
show: true,
fill: true,
material: new $this.Cesium.StripeMaterialProperty({
// color: $this.Cesium.Color.BLUE.withAlpha(0.5),
// oddColor: $this.Cesium.Color.BLUE.withAlpha(0.5),
evenColor: $this.Cesium.Color.fromCssColorString('#29E4F546'),
oddColor: $this.Cesium.Color.fromCssColorString('#29E4F546'),
// repeat: 5.0,
}),
height:0,
outline : true,
outlineColor : $this.Cesium.Color.fromCssColorString('#29E4F5'),
outlineWidth: 8,
}
});
$this._entities_polygon.push(polygon);
return polygon;
}
//创建点
static createPoint(cartesian) {
var $this = this;
var point = this.viewer.entities.add({
position: cartesian,
point: {
pixelSize: 10,
color: $this.Cesium.Color.YELLOW,
}
});
$this._entities_point.push(point);
return point;
}
//销毁事件
static destroy() {
if (this.handler) {
this.handler.destroy();
this.handler = null;
}
}
//清空实体对象
static clear() {
for (var i = 0; i < this._entities_point.length; i++) {
this.viewer.entities.remove(this._entities_point[i]);
}
for (var i = 0; i < this._entities_polygon.length; i++) {
this.viewer.entities.remove(this._entities_polygon[i]);
}
this._polygon = null; //活动面
this._polygonLast = null; //最后一个面
this._positions = []; //活动点
this._entities_point = []; //脏数据
this._entities_polygon = []; //脏数据
this._polygonData = null; //用户构造面
}
static getCatesian3FromPX(px) {
var cartesian;
var ray = this.viewer.camera.getPickRay(px);
if (!ray) return null;
cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
return cartesian;
}
}
export default DrawPolygon
标绘矩形
/**
* 标绘矩形
*/
class DrawRectangle {
static viewer = null;
static Cesium = null;
static callback = null;
static floatingPoint = null;
static _rectangle = null;
static _rectangleLast = null;
static _positions = [];
static _entities_point = [];;
static _entities_rectangle = [];
static _rectangleData = null;
constructor(arg) {
// this.viewer = arg.viewer;
// this.Cesium = arg.Cesium;
// this.callback=arg.callback;
// this.floatingPoint = null;//标识点
// this._rectangle = null; //活动矩形
// this._rectangleLast = null; //最后一个矩形
// this._positions = []; //活动点
// this._entities_point = []; //脏数据
// this._entities_rectangle = []; //脏数据
// this._rectangleData = null; //用于构造矩形数据
}
//返回最后图形
get line() {
return this._rectangleLast;
}
//返回矩形数据scene
static getData() {
return this._rectangleData;
}
//加载
static loadRectangle(data) {
var $this = this;
var shape = this.viewer.entities.add({
name: "rectangle",
rectangle: {
coordinates: $this.Cesium.Rectangle.fromCartesianArray(data),
// material: $this.Cesium.Color.RED.withAlpha(0.5)
material: new $this.Cesium.StripeMaterialProperty({
evenColor: $this.Cesium.Color.fromCssColorString('#29E4F546'),
oddColor: $this.Cesium.Color.fromCssColorString('#29E4F546'),
// repeat: 5.0,
}),
height: 0,
outline: true,
outlineColor: $this.Cesium.Color.fromCssColorString('#29E4F5'),
outlineWidth: 8,
}
});
$this._entities_rectangle.push(shape);
return shape;
}
//开始创建
static startCreate() {
var $this = this;
this.handler = new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.handler.setInputAction(function (evt) { //单机开始绘制
console.log('绘制点')
//屏幕坐标转地形上坐标
var cartesian = $this.getCatesian3FromPX(evt.position);
if ($this._positions.length == 0) {
$this._positions.push(cartesian.clone());
$this.floatingPoint = $this.createPoint(cartesian);
$this.createPoint(cartesian); // 绘制点
}
$this._positions.push(cartesian);
}, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.handler.setInputAction(function (evt) { //移动时绘制线
console.log('移动时绘制线')
if ($this._positions.length < 3) return;
var cartesian = $this.getCatesian3FromPX(evt.endPosition);
// $this.floatingPoint = $this.createPoint(cartesian);
if (!$this.Cesium.defined($this._rectangle)) {
console.log('创建矩形')
$this._rectangle = $this.createRectangle();
}
$this.floatingPoint.position.setValue(cartesian);
if ($this._rectangle) {
console.log('创建矩形22')
$this._positions.pop();
$this._positions.push(cartesian);
}
}, $this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
this.handler.setInputAction(function (evt) {
if (!$this._rectangle) return;
var cartesian = $this.getCatesian3FromPX(evt.position);
$this._positions.pop();
$this._positions.push(cartesian);
$this.createPoint(cartesian); // 绘制点
$this._rectangleData = $this._positions.concat();
$this.viewer.entities.remove($this._rectangle); //移除
$this._rectangle = null;
$this._positions = [];
$this.floatingPoint.position.setValue(cartesian);
var rectangle = $this.loadRectangle($this._rectangleData); //加载
$this._entities_rectangle.push(rectangle);
$this._rectangleLast = rectangle;
// 世界坐标转化为经纬度
let latLngArr = []
for (let item of $this._rectangleData) {
let ellipsoid = $this.viewer.scene.globe.ellipsoid;
let cartesian3 = new $this.Cesium.Cartesian3(item.x, item.y, item.z);
let cartographic = ellipsoid.cartesianToCartographic(cartesian3);
let lat = $this.Cesium.Math.toDegrees(cartographic.latitude);
let lng = $this.Cesium.Math.toDegrees(cartographic.longitude);
latLngArr.push({
lat,
lng
})
}
if (typeof $this.callback == "function") {
$this.callback(rectangle, latLngArr);
}
$this.destroy();
}, $this.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
}
//创建点
static createPoint(cartesian) {
var $this = this;
var point = this.viewer.entities.add({
position: cartesian,
point: {
pixelSize: 10,
color: $this.Cesium.Color.YELLOW,
}
});
$this._entities_point.push(point);
return point;
}
//创建矩形
static createRectangle() {
var $this = this;
// var material = $this.Cesium.Material.fromType('Color');
// material.uniforms.color = new $this.Cesium.Color(1.0, 0.0, 0.0, 1.0);
var shape = this.viewer.entities.add({
name: "rectangle",
rectangle: {
coordinates: new $this.Cesium.CallbackProperty(function () {
var obj = $this.Cesium.Rectangle.fromCartesianArray($this._positions);
return obj;
}, false),
// material: $this.Cesium.Material.fromType('Color', {
// color : new $this.Cesium.Color(1.0, 0.0, 0.0, 1.0)
// })
// material: $this.Cesium.Color.RED,
material: new $this.Cesium.StripeMaterialProperty({
// color: $this.Cesium.Color.BLUE.withAlpha(0.5),
// oddColor: $this.Cesium.Color.BLUE.withAlpha(0.5),
evenColor: $this.Cesium.Color.fromCssColorString('#29E4F546'),
oddColor: $this.Cesium.Color.fromCssColorString('#29E4F546'),
// repeat: 5.0,
}),
height: 0,
outline: true,
outlineColor: $this.Cesium.Color.fromCssColorString('#29E4F5'),
outlineWidth: 8,
}
});
$this._entities_rectangle.push(shape);
return shape;
}
//销毁
static destroy() {
if (this.handler) {
this.handler.destroy();
this.handler = null;
}
}
//清空实体对象
static clear() {
for (var i = 0; i < this._entities_point.length; i++) {
this.viewer.entities.remove(this._entities_point[i]);
}
for (var i = 0; i < this._entities_rectangle.length; i++) {
this.viewer.entities.remove(this._entities_rectangle[i]);
}
this.floatingPoint = null; //标识点
this._rectangle = null; //活动矩形
this._rectangleLast = null; //最后一个矩形
this._positions = []; //活动点
this._entities_point = []; //脏数据
this._entities_rectangle = []; //脏数据
this._rectangleData = null; //用于构造矩形数据
}
static getCatesian3FromPX(px) {
var cartesian;
var ray = this.viewer.camera.getPickRay(px);
if (!ray) return null;
cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
return cartesian;
}
}
export default DrawRectangle
调用方法
在需要调用的vue文件 import 引入，DrawRectangle 调用静态方法
drawPolygonFn() {
if (this.isSelect && this.isSelect !== "polygon") {
DrawRectangle.destroy();
DrawRectangle.clear();
document.getElementById("container").style.cursor = "default";
}
// console.log(this.drawRectangle, '++++++++++++++++++++++++++++++');
if (this.isSelect !== "polygon") {
this.isSelect = "polygon";
let arg = {
viewer: window.gis3dInstance.getCzmViewer(),
Cesium: window.gis3dInstance.getCzm(),
callback: (data, latLngArr) => {
console.log(data, latLngArr);
this.latLngAreaArr = latLngArr;
let _videoList = this.screenVideo("Polygon");
let _screenVideoListPopup = {
isShow: true,
videoList: _videoList,
};
this.$store.commit("screenVideoListPopup", _screenVideoListPopup);
},
};
DrawPolygon.viewer = arg.viewer;
DrawPolygon.Cesium = arg.Cesium;
DrawPolygon.callback = arg.callback;
DrawPolygon.startCreate(); //调用开始绘制的方法
// this.drawPolygon = new DrawPolygon(arg);
// this.drawPolygon.startCreate();
document.getElementById("container").style.cursor = "pointer";
} else {
this.isSelect = false;
DrawPolygon.destroy();
DrawPolygon.clear();
document.getElementById("container").style.cursor = "default";
}
},
判断坐标点
判断点位是否在 标会的不规则区域内
/*
checkPoint: [lat, lng] 需要计算的点位
polygonPoints: [ [lat, lng], [lat, lng], [lat, lng], [lat, lng], [lat, lng] ] 标绘区域的点位数值，，
*/
polygonFilter(checkPoint, polygonPoints) {
let counter = 0;
let i;
let xinters;
let p1, p2;
let pointCount = polygonPoints.length;
p1 = polygonPoints[0];
for (i = 1; i <= pointCount; i++) {
p2 = polygonPoints[i % pointCount];
if (
checkPoint.lat > Math.min(p1.lat, p2.lat) &&
checkPoint.lat <= Math.max(p1.lat, p2.lat)
) {
if (checkPoint.lng <= Math.max(p1.lng, p2.lng)) {
if (p1.lat != p2.lat) {
xinters =
((checkPoint.lat - p1.lat) * (p2.lng - p1.lng)) /
(p2.lat - p1.lat) +
p1.lng;
if (p1.lng == p2.lng || checkPoint.lng <= xinters) {
counter++;
}
}
}
}
p1 = p2;
}
if (counter % 2 == 0) {
return false;
} else {
return true;
}
},
1246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
