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

package/src/packages/Cesium/DrawMap/index.vue

@@ -0,0 +1,272 @@
+<!--  -->
+<template>
+  <div />
+</template>
+
+<script>
+// import * as Cesium from "cesium";
+import DrawPoint from './DrawJs/DrawPoint';
+import DrawPolyline from './DrawJs/DrawPolyline';
+import DrawCircle from './DrawJs/DrawCircle';
+import DrawRectangle from './DrawJs/DrawRectangle';
+import DrawPolygon from './DrawJs/DrawPolygon';
+import DrawPolylineJT from './DrawJs/DrawPolylineJT';
+import DrawAttackArrow from './DrawJs/DrawAttackArrow';
+import DrawstraightArrow from './DrawJs/DrawstraightArrow';
+import DrawPincerArrow from './DrawJs/DrawPincerArrow';
+import MeasurePolygon from './DrawJs/MeasurePolygon';
+import MeasurePolyline from './DrawJs/MeasurePolyline';
+import CesiumEntityEdit from './DrawJs/CesiumEntityEdit';
+import slopeAspect from "./DrawJs/SlopeAspect";
+import DrawProFile from "./DrawJs/DrawProFile";
+export default {
+  name: 'DrawMap',
+  data() {
+    return {
+      drawNew: null,
+      handlerDelete: null,
+      handlerUpdateStyle: null,
+      handlerDrag: null
+    };
+  },
+
+  // components: {},
+
+  // watch: {},
+
+  // computed: {},
+
+  // created(){},
+
+  // mounted(){},
+
+  methods: {
+    // 清除绘制实体
+    cleanDrawNew() {
+      // 销毁删除功能
+      if (this.handlerUpdateStyle) {
+        this.handlerUpdateStyle.destroy();
+        this.handlerUpdateStyle = null;
+      }
+      // 销毁修改样式功能
+      if (this.handlerDelete) {
+        this.handlerDelete.destroy();
+        this.handlerDelete = null;
+      }
+      // 销毁拖动修改功能
+      if (this.handlerDrag) {
+        this.handlerDrag.destroy();
+        this.handlerDrag = null;
+      }
+      // 销毁绘画的实体
+      if (this.drawNew) {
+        // 如果有实体，就调用实例里面的销毁事件，把鼠标的事件都清掉
+        this.drawNew.destroy();
+        // 然后再清空实体
+        this.drawNew = null;
+      }
+    },
+    drawTypeFunction(type, data) {
+      if (this.drawNew) {
+        if (this.drawNew.drawName == type) {
+          return;
+          // this.drawNew.destroy();
+          // this.drawNew.startCreate();
+        } else {
+          this.drawNew.destroy();
+        }
+        // this.drawNew.clear();
+      }
+      switch (type) {
+        case 'DIAN': // 绘制点
+          this.drawNew = new DrawPoint({
+            viewer: this.viewer,
+            Cesium: Cesium,
+            data: data
+          });
+          break;
+        case 'ZHEXIAN': // 绘制折线
+          this.drawNew = new DrawPolyline({
+            viewer: this.viewer,
+            Cesium: Cesium,
+            data: data
+          });
+          break;
+        case 'YUAN': // 圆形
+          this.drawNew = new DrawCircle({
+            viewer: this.viewer,
+            Cesium: Cesium,
+            data: data
+          });
+          break;
+        case 'JUXING': // 矩形
+          this.drawNew = new DrawRectangle({
+            viewer: this.viewer,
+            Cesium: Cesium,
+            data: data
+          });
+          break;
+        case 'DUOBIANXING': // 多边形
+          this.drawNew = new DrawPolygon({
+            viewer: this.viewer,
+            Cesium: Cesium,
+            data: data
+          });
+          break;
+        case 'ZJIJIANTOU': // 直箭头
+          this.drawNew = new DrawPolylineJT({
+            viewer: this.viewer,
+            Cesium: Cesium,
+            data: data
+          });
+          break;
+        case 'JINGONGJIANTOU': // 进攻箭头
+          this.drawNew = new DrawstraightArrow({
+            viewer: this.viewer,
+            Cesium: Cesium,
+            data: data
+          });
+          break;
+        case 'FENDUIJIANTOY': // 分队箭头
+          this.drawNew = new DrawAttackArrow({
+            viewer: this.viewer,
+            Cesium: Cesium,
+            data: data
+          });
+          break;
+        case 'QIANJIJIANTOY': // 分队箭头
+          this.drawNew = new DrawPincerArrow({
+            viewer: this.viewer,
+            Cesium: Cesium,
+            data: data
+          });
+          break;
+        default:
+          break;
+      }
+      this.drawNew.startCreate();
+    },
+    drawTypeFunctionGJ(type, data) {
+      switch (type) {
+        case 'CHEJU': // 测距
+          this.drawNew = new MeasurePolyline({
+            viewer: this.viewer,
+            Cesium: Cesium,
+            data: data
+          });
+          break;
+        case 'CEMIAN': // 侧面
+          this.drawNew = new MeasurePolygon({
+            viewer: this.viewer,
+            Cesium: Cesium,
+            data: data
+          });
+          break;
+        case "CEPODU":
+          // 侧坡度
+          this.drawNew = new slopeAspect(this.viewer);
+          this.drawNew.openTip();
+          this.drawNew.createNew4Num(20);
+          break;
+        case "CEPOUMIAN":
+          // 侧剖面
+          this.drawNew = new DrawProFile({ viewer: this.viewer, Cesium: Cesium, data: data });
+          this.drawNew.Profile();
+          break;
+        default:
+          break;
+      }
+      // this.drawNew.startCreate();
+    },
+
+    drawClassDelete(data) {
+      this.cleanDrawNew();
+      // data就是删除功能的开启与关闭,boolean值
+      if (data) {
+        if (this.drawNew) {
+          // 在创建新的点击事件用于删除
+          this.creatDeleteClick();
+        } else {
+          this.creatDeleteClick();
+        }
+      }
+    },
+    drawClassUpdate(data) {
+      this.cleanDrawNew();
+      // data就是修改功能的开启与关闭,boolean值
+      if (data.active) {
+        if (this.drawNew) {
+          // 在创建新的点击事件用于修改样式
+          this.creatUpdateClick(data);
+        } else {
+          this.creatUpdateClick(data);
+        }
+      }
+    },
+    // 创建点击事件用于删除选中的绘制
+    creatDeleteClick() {
+      const $this = this;
+      this.handlerDelete = new Cesium.ScreenSpaceEventHandler(
+        $this.viewer.scene.canvas
+      );
+      this.handlerDelete.setInputAction(function (movement) {
+        var pick = $this.viewer.scene.pick(movement.position, 3, 3);
+
+        if (!pick) {
+          return;
+        }
+
+        $this.viewer.entities.removeById(pick.id._id);
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    },
+
+    // 创建点击事件用于修改选中的绘制
+    creatUpdateClick(data) {
+      const $this = this;
+      this.handlerUpdateStyle = new Cesium.ScreenSpaceEventHandler(
+        $this.viewer.scene.canvas
+      );
+      this.handlerUpdateStyle.setInputAction(function (movement) {
+        var pick = $this.viewer.scene.pick(movement.position, 3, 3);
+        if (!pick) {
+          return;
+        }
+        const entity = $this.viewer.entities.getById(pick.id._id); // 根据id获取到指定实体
+        // 多边形
+        if (entity.polygon && entity.polygon.material) {
+          entity.polygon.material = Cesium.Color.fromCssColorString(data.color);
+        }
+        // 圆形
+        if (entity.ellipse && entity.ellipse.material) {
+          entity.ellipse.material = Cesium.Color.fromCssColorString(data.color);
+        }
+        // 矩形
+        if (entity.rectangle && entity.rectangle.material) {
+          entity.rectangle.material = Cesium.Color.fromCssColorString(
+            data.color
+          );
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    },
+
+    // 修改样式
+    changeDrawStyle(data) {
+      if (this.drawNew) {
+        this.drawNew.updateStyleFunction(data);
+      }
+    },
+
+    // 启动拖拽
+    tuozhuaiFunction(data) {
+      this.cleanDrawNew();
+      if (data) {
+        // 启用交互式编辑工具
+        this.handlerDrag = new CesiumEntityEdit(this.viewer, {});
+        this.handlerDrag.start();
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/packages/Cesium/components/LocationDialog.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="dialog">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="坐标定位" name="1" class="c-tabs">
+        <el-form ref="positioningDialogForm" :model="data1" label-width="100px" :rules="data1Rules" class="mt-20">
+          <el-form-item label="经度：" prop="longitude">
+            <el-input v-model.trim="data1.longitude" style="width:100%" :placeholder="'请输入'" />
+          </el-form-item>
+          <el-form-item label="纬度：" prop="latitude">
+            <el-input v-model.trim="data1.latitude" style="width:100%" :placeholder="'请输入'" />
+          </el-form-item>
+          <el-form-item label="高度：" prop="height">
+            <el-input v-model.trim="data1.height" style="width:100%" :placeholder="'请输入'" />
+          </el-form-item>
+          <el-form-item label="朝向角：" prop="heading">
+            <el-input v-model.trim="data1.heading" style="width:100%" :placeholder="'请输入'" />
+          </el-form-item>
+          <el-form-item label="俯仰角：" prop="pitch">
+            <el-input v-model.trim="data1.pitch" style="width:100%" :placeholder="'请输入'" />
+          </el-form-item>
+          <el-form-item label="距离：" prop="range">
+            <el-input v-model.trim="data1.range" style="width:100%" :placeholder="'请输入'" />
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+
+      <el-tab-pane label="地名搜索" name="2">
+        <el-form ref="positioningDialogForm" :model="data1" label-width="100px" :rules="data1Rules" class="mt-20">
+          <el-form-item label="地名：" prop="place">
+            <el-select v-model="value" filterable placeholder="请输入地名" style="width:100%">
+              <el-option v-for="item in options" :key="item.manageCode" :label="item.atlas" :value="item.centerPoint">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+
+      </el-tab-pane>
+
+    </el-tabs>
+
+    <center>
+      <el-button type="primary" @click="handleData1">确 定</el-button>
+    </center>
+  </div>
+</template>
+<script>
+const price = (rule, value, callback) => {
+  const reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/;
+  if (!value) {
+    callback(new Error("请输入"));
+  } else if (!Number(value)) {
+    callback(new Error("请输入数字值"));
+  } else {
+    if (reg.test(value)) {
+      callback();
+    } else {
+      callback(new Error("请输入正确的数值"));
+    }
+  }
+};
+export default {
+  name: "LocationDialog",
+  props: {
+    params: {
+      type: Object,
+      default: () => ({
+      }),
+    },
+  },
+  mixins: [],
+  components: {
+  },
+  data() {
+    return {
+      activeName: "1", // 定位弹窗tab切换的值
+      data1: {
+        longitude: 113.3411,
+        latitude: 23.5,
+        height: 10000.0,
+        heading: 0,
+        pitch: -90.0,
+        range: 20000.0,
+      },
+      data1Rules: {
+        longitude: [{ required: true, validator: price, trigger: "blur" }],
+        latitude: [{ required: true, validator: price, trigger: "blur" }],
+      },
+
+      options: [
+        {
+          "manageCode": "369904",
+          "manageName": "赣江源国家级自然保护区管理局",
+          "atlas": "赣江源",
+          "centerPoint": "POINT(116.342906757501 26.0182541710683)",
+          "minLon": 116.182716369629,
+          "minLat": 25.9023208618164,
+          "maxLon": 116.486099243164,
+          "maxLat": 26.1336040496826
+        },
+        {
+          "manageCode": "369903",
+          "manageName": "齐云山国家级自然保护区管理局",
+          "atlas": "齐云山",
+          "centerPoint": "POINT(114.023194523787 25.8232927693908)",
+          "minLon": 113.908226013184,
+          "minLat": 25.6962890625,
+          "maxLon": 114.130142211914,
+          "maxLat": 25.906795501709
+        },
+        {
+          "manageCode": "369908",
+          "manageName": "铜钹山国家级自然保护区管理局",
+          "atlas": "铜钹山",
+          "centerPoint": "POINT(118.281453026375 28.1449806506755)",
+          "minLon": 118.196487426758,
+          "minLat": 28.0603046417236,
+          "maxLon": 118.363945007324,
+          "maxLat": 28.2636489868164
+        },
+        {
+          "manageCode": "369906",
+          "manageName": "九岭山国家级自然保护区管理局",
+          "atlas": "九岭山",
+          "centerPoint": "POINT(115.260736381279 28.9892435756996)",
+          "minLon": 115.056747436523,
+          "minLat": 28.8187370300293,
+          "maxLon": 115.406982421875,
+          "maxLat": 29.0547771453857
+        },
+        {
+          "manageCode": "369916",
+          "manageName": "马头山国家级自然保护区管理局",
+          "atlas": "马头山",
+          "centerPoint": "POINT(117.23584416508 27.7929721754276)",
+          "minLon": 117.167434692383,
+          "minLat": 27.7178382873535,
+          "maxLon": 117.301383972168,
+          "maxLat": 27.8793830871582
+        },
+        {
+          "manageCode": "369902",
+          "manageName": "九连山国家级自然保护区管理局",
+          "atlas": "九连山",
+          "centerPoint": "POINT(114.460703691063 24.5721806809724)",
+          "minLon": 114.38158416748,
+          "minLat": 24.4877109527588,
+          "maxLon": 114.572113037109,
+          "maxLat": 24.6869792938232
+        },
+        {
+          "manageCode": "369911",
+          "manageName": "南风面国家级自然保护区管理局",
+          "atlas": "南风面",
+          "centerPoint": null,
+          "minLon": 113.93742992800003,
+          "minLat": 26.15642968000003,
+          "maxLon": 114.12223776500002,
+          "maxLat": 26.42368951800006
+        },
+        {
+          "manageCode": "369901",
+          "manageName": "阳际峰国家级自然保护区管理局",
+          "atlas": "阳际峰",
+          "centerPoint": "POINT(117.319636121501 27.9310096921507)",
+          "minLon": 117.246017456055,
+          "minLat": 27.8712291717529,
+          "maxLon": 117.41471862793,
+          "maxLat": 27.9871425628662
+        },
+        {
+          "manageCode": "369919",
+          "manageName": "桃红岭梅花鹿国家级自然保护区管理局",
+          "atlas": "桃红岭",
+          "centerPoint": "POINT(116.623019787349 29.780639038419)",
+          "minLon": 116.55850982666,
+          "minLat": 29.6818618774414,
+          "maxLon": 116.711120605469,
+          "maxLat": 29.8806934356689
+        },
+        {
+          "manageCode": "369907",
+          "manageName": "武夷山国家级自然保护区管理局",
+          "atlas": "武夷山",
+          "centerPoint": "POINT(117.775832974413 27.901485106652)",
+          "minLon": 117.659698486328,
+          "minLat": 27.8032760620117,
+          "maxLon": 117.930526733398,
+          "maxLat": 28.0104789733887
+        },
+        {
+          "manageCode": "369905",
+          "manageName": "官山国家级自然保护区管理局",
+          "atlas": "官山",
+          "centerPoint": "POINT(114.614329094087 28.5926844410333)",
+          "minLon": 114.500732421875,
+          "minLat": 28.5367622375488,
+          "maxLon": 114.721496582031,
+          "maxLat": 28.6471939086914
+        },
+        {
+          "manageCode": "369920",
+          "manageName": "庐山国家级自然保护区管理局",
+          "atlas": "庐山",
+          "centerPoint": "POINT(115.969847989087 29.5376539290487)",
+          "minLon": 115.869468688965,
+          "minLat": 29.4221858978271,
+          "maxLon": 116.09268951416,
+          "maxLat": 29.6661624908447
+        },
+        {
+          "manageCode": "369910",
+          "manageName": "井冈山国家级自然保护区管理局",
+          "atlas": "井冈山",
+          "centerPoint": "POINT(114.174483753419 26.5752440196649)",
+          "minLon": 114.070274353027,
+          "minLat": 26.4817237854004,
+          "maxLon": 114.279144287109,
+          "maxLat": 26.6669883728027
+        },
+        {
+          "manageCode": "369918",
+          "manageName": "鄱阳湖国家级自然保护区管理局",
+          "atlas": "鄱阳湖",
+          "centerPoint": "POINT(116.007206095387 29.1790806028986)",
+          "minLon": 115.896308898926,
+          "minLat": 29.0914421081543,
+          "maxLon": 116.139221191406,
+          "maxLat": 29.2855205535889
+        },
+        {
+          "manageCode": "369917",
+          "manageName": "鄱阳湖南矶湿地国家级自然保护区管理局",
+          "atlas": "南矶湿地",
+          "centerPoint": "POINT(116.299453804744 29.0057487317529)",
+          "minLon": 116.173248291016,
+          "minLat": 28.8675632476807,
+          "maxLon": 116.403228759766,
+          "maxLat": 29.114107131958
+        },
+        {
+          "manageCode": "369909",
+          "manageName": "婺源国家级森林鸟类自然保护区管理局",
+          "atlas": "婺源",
+          "centerPoint": "POINT(117.746054066462 29.3662480494645)",
+          "minLon": 117.492813110352,
+          "minLat": 29.1328048706055,
+          "maxLon": 117.851913452148,
+          "maxLat": 29.5786743164062
+        }
+      ],
+      value: '',
+    };
+  },
+  watch: {
+
+  },
+  created() {
+
+  },
+
+  mounted() {
+
+  },
+
+  beforeDestroy() {
+  },
+
+  methods: {
+    handleData1() {
+      if (this.activeName == 1) {
+        this.data1.point = `POINT(${this.data1.longitude} ${this.data1.latitude})`;
+      } else {
+        this.data1.point = this.value;
+      }
+      this.$emit('flyToPoint', this.data1);
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.dialog {
+}
+</style>