@go-home-early/go-home-early98 0.3.1 → 0.3.2

package/src/packages/Cesium/DrawMap/DrawJs/DrawPoint.js

@@ -0,0 +1,158 @@
+// DrawPoint
+/*
+绘制点
+ */
+import imgUrl from '../../imgs/icon-position-blue.png';
+class DrawPoint {
+  constructor(arg) {
+    this.viewer = arg.viewer;
+    this.Cesium = arg.Cesium;
+    this.Text = arg.data.text || '';
+    this.Color = arg.data.color || '#000';
+    this.imgUrl = arg.data.imgUrl || '';
+    this.FontSize = arg.data.fontSize || 16;
+    this.callback = arg.data.callback || null;
+    this.pxNum = arg.data.pxNum || 5;
+    this.handler = null;
+    this._point = null; // 最后一个点
+    this._pointData = null; // 点数据用于构造点
+    this._entities = []; // 脏数据
+  }
+
+  // 返回最后活动点
+  get point() {
+    return this._point;
+  }
+
+  // 加载点
+  loadPoint(data) {
+    return this.createPoint(data);
+  }
+
+  // 返回点数据用于加载点
+  getData() {
+    return this._pointData;
+  }
+
+  // 开始绘制
+  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 (!cartesian) return;
+      var point = $this.createPoint(cartesian);
+      $this._pointData = cartesian;
+      $this._point = point;
+      if (typeof $this.callback == 'function') {
+        // 将坐标点转换为经纬度坐标
+        // 获取实体点的坐标
+        var pointData = point.position.getValue($this.Cesium.JulianDate.now());
+        var cartographic = $this.Cesium.Cartographic.fromCartesian(pointData);
+
+        var longitude = $this.Cesium.Math.toDegrees(cartographic.longitude);
+        var latitude = $this.Cesium.Math.toDegrees(cartographic.latitude);
+
+        // 创建包含图片的 GeoJSON 对象
+        var geojson = {
+          type: 'Feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [longitude, latitude]
+          },
+          properties: {
+            name: 'My Image',
+            imageUrl:
+              'https://img2.baidu.com/it/u=1022682943,197734876&fm=253&fmt=auto&app=138&f=GIF?w=956&h=500',
+            text: $this.Text,
+            fontSize: $this.FontSize,
+            color: $this.Color
+          }
+        };
+        $this.callback(geojson);
+      }
+      // $this.handler.destroy();
+    }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+  }
+
+  // 创建点击删除事件
+  creatDeleteClick(isSelect) {
+    const $this = this;
+    if (isSelect) {
+      this.handler = new this.Cesium.ScreenSpaceEventHandler(
+        $this.viewer.scene.canvas
+      );
+      this.handler.setInputAction(function(movement) {
+        var pick = $this.viewer.scene.pick(movement.position, 3, 3);
+
+        if (!pick) {
+          return;
+        }
+        $this.viewer.entities.removeById(pick.id._id);
+      }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    } else {
+      this.handler.destroy();
+      this.handler = null;
+    }
+  }
+
+  // 创建点
+  createPoint(cartesian) {
+    var $this = this;
+    var point = this.viewer.entities.add({
+      position: cartesian,
+      billboard: {
+        image:
+          'https://img2.baidu.com/it/u=1022682943,197734876&fm=253&fmt=auto&app=138&f=GIF?w=956&h=500',
+        heightReference: $this.Cesium.HeightReference.CLAMP_TO_GROUND,
+        horizontalOrigin: $this.Cesium.HorizontalOrigin.MID, // 原点X轴位置 MID
+        verticalOrigin: $this.Cesium.VerticalOrigin.BOTTOM, // 原点Y轴位置 BOTTOM
+        scale: 0.07, // 尺寸大小
+        disableDepthTestDistance: Number.POSITIVE_INFINITY // 数值无限大 不会被地形遮挡
+      },
+      label: {
+        pixelOffset: new $this.Cesium.Cartesian2(0, -45),
+        horizontalOrigin: $this.Cesium.HorizontalOrigin.CENTER,
+        verticalOrigin: $this.Cesium.VerticalOrigin.BOTTOM,
+        text: $this.Text,
+        scale: 1,
+        fillColor: $this.Cesium.Color.fromCssColorString($this.Color),
+        font: `normal ${$this.FontSize}px MicroSoft YaHei`,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        heightReference: $this.Cesium.HeightReference.CLAMP_TO_GROUND
+      }
+    });
+    $this._entities.push(point); // 加载脏数据
+    return point;
+  }
+
+  // 销毁鼠标事件
+  destroy() {
+    if (this.handler) {
+      this.handler.destroy();
+      this.handler = null;
+    }
+  }
+
+  // 清空实体对象
+  clear() {
+    for (var i = 0; i < this._entities.length; i++) {
+      this.viewer.entities.remove(this._entities[i]);
+    }
+    this._entities = [];
+    this._point = null;
+  }
+
+  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 DrawPoint;

package/src/packages/Cesium/DrawMap/DrawJs/DrawPolygon.js

@@ -0,0 +1,215 @@
+// DrawPolygon
+/*
+绘制面
+ */
+class DrawPolygon {
+  constructor(arg) {
+    // 写在这个里面实例化后不会相等不影响
+    this.drawName = 'DrawPolygon';
+    this.viewer = arg.viewer;
+    this.Cesium = arg.Cesium;
+    this.Text = arg.data.text || '';
+    this.Color = arg.data.color || '#000';
+    this.imgUrl = arg.data.imgUrl || '';
+    this.FontSize = arg.data.fontSize || 16;
+    this.callback = arg.data.callback || null;
+    this.pxNum = arg.data.pxNum || 5;
+    this.handler = null;
+    this._polygon = null; // 活动面
+    this._polygonLast = null; // 最后一个面
+    this._positions = []; // 活动点
+    this._entities_point = []; // 脏数据
+    this._entities_polygon = []; // 脏数据
+    this._polygonData = null; // 用户构造面
+  }
+
+  // 返回最后活动面
+  get polygon() {
+    return this._polygonLast;
+  }
+
+  // 修改样式
+  updateStyleFunction(data) {
+    this.Text = data.text || '';
+    this.Color = data.color || '#000';
+    this.imgUrl = data.imgUrl || '';
+    this.FontSize = data.fontSize || 16;
+    this.callback = data.callback || null;
+  }
+
+  // 返回面数据用于加载面
+  getData() {
+    return this._polygonData;
+  }
+
+  // 加载面
+  loadPolygon(data) {
+    var $this = this;
+    for (var i = 0; i < $this._entities_point.length; i++) {
+      $this.viewer.entities.remove($this._entities_point[i]);
+    }
+    return this.viewer.entities.add({
+      // id: 'DrawPolygon' + new Date().getTime() + Math.random(),
+      // id: 'DrawPolygon' + $this.viewer.entities.values.length + 1,
+      polygon: {
+        hierarchy: new $this.Cesium.PolygonHierarchy(data),
+        clampToGround: true,
+        show: true,
+        fill: true,
+        material: $this.Cesium.Color.fromCssColorString($this.Color),
+        width: 3
+        // zIndex: $this.viewer.entities.values.length + 1
+        // outlineColor: Cesium.Color.RED,
+        // outlineWidth: 10,
+        // outline: true
+      }
+    });
+  }
+
+  // 开始绘制
+  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);
+    }, $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);
+    }, $this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+    this.handler.setInputAction(function(evt) {
+      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();
+      console.log(`output->$this._polygonData`, $this._polygonData);
+      $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;
+      if (typeof $this.callback == 'function') {
+        // 提取多边形层次结构
+        var hierarchy = Polygon.polygon.hierarchy.getValue();
+        console.log(`output->hierarchy`, hierarchy);
+        // 从层次结构中提取坐标
+        var coordinates = hierarchy.positions.map(function(position) {
+          var cartographic = $this.Cesium.Cartographic.fromCartesian(position);
+          return [
+            $this.Cesium.Math.toDegrees(cartographic.longitude),
+            $this.Cesium.Math.toDegrees(cartographic.latitude)
+          ];
+        });
+
+        // 创建GeoJSON对象
+        var geojson = {
+          type: 'Polygon',
+          coordinates: [coordinates],
+          // coordinates: hierarchy.positions,
+          geometry: {
+            type: 'Polygon'
+          },
+          properties: {
+            color: $this.Color
+          }
+        };
+
+        $this.callback(geojson);
+        // $this.callback(JSON.stringify(geojson));
+      }
+      // $this.handler.destroy();
+    }, $this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+  }
+
+  // 创建面
+  createPolygon() {
+    var $this = this;
+    var polygon = this.viewer.entities.add({
+      // id: '777777777777777777' + new Date().getTime() + Math.random(),
+      polygon: {
+        hierarchy: new $this.Cesium.CallbackProperty(function() {
+          return new $this.Cesium.PolygonHierarchy($this._positions);
+        }, false),
+        clampToGround: true,
+        show: true,
+        fill: true,
+        material: $this.Cesium.Color.fromCssColorString('#fff').withAlpha(0.5),
+        width: 3,
+        outlineColor: $this.Cesium.Color.BLACK,
+        outlineWidth: 1,
+        outline: false
+      }
+    });
+    $this._entities_polygon.push(polygon);
+    return polygon;
+  }
+
+  // 创建点
+  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;
+  }
+
+  // 销毁事件
+  destroy() {
+    if (this.handler) {
+      this.handler.destroy();
+      this.handler = null;
+    }
+  }
+
+  // 清空实体对象
+  clear() {
+    for (let i = 0; i < this._entities_point.length; i++) {
+      this.viewer.entities.remove(this._entities_point[i]);
+    }
+    for (let 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; // 用户构造面
+  }
+
+  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;

package/src/packages/Cesium/DrawMap/DrawJs/DrawPolyline.js

@@ -0,0 +1,213 @@
+// DrawPolyline
+/*
+绘制线
+ */
+import * as turf from '@turf/turf';
+
+class DrawPolyline {
+  constructor(arg) {
+    this.viewer = arg.viewer;
+    this.Cesium = arg.Cesium;
+    this.Text = arg.data.text || '';
+    this.Color = arg.data.color || '#000';
+    this.imgUrl = arg.data.imgUrl || '';
+    this.FontSize = arg.data.fontSize || 16;
+    this.callback = arg.data.callback || null;
+    this.pxNum = arg.data.pxNum || 5;
+    this.handler = null;
+    this._polyline = null; // 活动线
+    this._polylineLast = null; // 最后一条线
+    this._positions = []; // 活动点
+    this._entities_point = []; // 脏数据
+    this._entities_line = []; // 脏数据
+    this._polylineData = null; // 用于构造线数据
+  }
+
+  // 返回最后活动线
+  get line() {
+    return this._polylineLast;
+  }
+
+  // 返回线数据用于加载线
+  getData() {
+    return this._polylineData;
+  }
+
+  // 加载线
+  loadPolyline(data) {
+    var $this = this;
+    for (var i = 0; i < $this._entities_point.length; i++) {
+      $this.viewer.entities.remove($this._entities_point[i]);
+    }
+    var polyline = this.viewer.entities.add({
+      polyline: {
+        positions: data,
+        show: true,
+        material: $this.Cesium.Color.fromCssColorString($this.Color),
+        width: $this.pxNum,
+        clampToGround: true
+      }
+    });
+    return polyline;
+  }
+
+  // 开始创建
+  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._positions.push(cartesian);
+      $this.createPoint(cartesian); // 绘制点
+    }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.handler.setInputAction(function(evt) {
+      // 移动时绘制线
+      if ($this._positions.length < 1) return;
+      var cartesian = $this.getCatesian3FromPX(evt.endPosition);
+      if (!$this.Cesium.defined($this._polyline)) {
+        $this._polyline = $this.createPolyline();
+      }
+      if ($this._polyline) {
+        $this._positions.pop();
+        $this._positions.push(cartesian);
+      }
+    }, $this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+    this.handler.setInputAction(function(evt) {
+      if (!$this._polyline) return;
+      var cartesian = $this.getCatesian3FromPX(evt.position);
+      $this._positions.pop();
+      $this._positions.push(cartesian);
+      $this.createPoint(cartesian); // 绘制点
+      $this._polylineData = $this._positions.concat();
+      $this.viewer.entities.remove($this._polyline); // 移除
+      $this._polyline = null;
+      $this._positions = [];
+      var line = $this.loadPolyline($this._polylineData); // 加载线
+      $this._entities_line.push(line);
+      $this._polylineLast = line;
+      if (typeof $this.callback == 'function') {
+        // 提取多边形层次结构
+        var hierarchy = line.polyline.positions.getValue();
+        // 从层次结构中提取坐标
+        var coordinates = hierarchy.map(function(position) {
+          var cartographic = $this.Cesium.Cartographic.fromCartesian(position);
+          return [
+            $this.Cesium.Math.toDegrees(cartographic.longitude),
+            $this.Cesium.Math.toDegrees(cartographic.latitude)
+          ];
+        });
+
+        // 创建GeoJSON对象
+        var geojson = {
+          type: 'LineString',
+          coordinates: coordinates,
+          geometry: {
+            type: 'LineString'
+          },
+          properties: {
+            color: $this.Color,
+            width: $this.pxNum
+          }
+        };
+        $this.callback(geojson);
+      }
+      // $this.handler.destroy();
+    }, $this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+  }
+
+  // 创建点击删除事件
+  creatDeleteClick(isSelect) {
+    const $this = this;
+    if (isSelect) {
+      this.handler = new this.Cesium.ScreenSpaceEventHandler(
+        $this.viewer.scene.canvas
+      );
+      this.handler.setInputAction(function(movement) {
+        var pick = $this.viewer.scene.pick(movement.position, 3, 3);
+
+        if (!pick) {
+          return;
+        }
+        $this.viewer.entities.removeById(pick.id._id);
+      }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    } else {
+      this.handler.destroy();
+      this.handler = null;
+    }
+  }
+
+  // 创建点
+  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;
+  }
+
+  // 创建线
+  createPolyline() {
+    var $this = this;
+    var polyline = this.viewer.entities.add({
+      polyline: {
+        // 使用cesium的peoperty
+        positions: new $this.Cesium.CallbackProperty(function() {
+          return $this._positions;
+        }, false),
+        show: true,
+        material:
+          $this.Cesium.Color.fromCssColorString('#ffffff').withAlpha(0.5),
+        width: $this.pxNum,
+        clampToGround: true
+      }
+    });
+    $this._entities_line.push(polyline);
+    return polyline;
+  }
+
+  // 销毁
+  destroy() {
+    if (this.handler) {
+      this.handler.destroy();
+      this.handler = null;
+    }
+  }
+
+  // 清空实体对象
+  clear() {
+    for (let i = 0; i < this._entities_point.length; i++) {
+      this.viewer.entities.remove(this._entities_point[i]);
+    }
+    for (let i = 0; i < this._entities_line.length; i++) {
+      this.viewer.entities.remove(this._entities_line[i]);
+    }
+    this._polyline = null;
+    this._positions = [];
+    this._entities_point = []; // 脏数据
+    this._entities_line = []; // 脏数据
+    this._polylineData = null; // 用于构造线数据
+    this._polylineLast = null;
+  }
+
+  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 DrawPolyline;