11

lixuliang

2024-01-09 cbde2b4fb938ce62c204390544c52935906c8962

11

 config/index.js

@@ -37,7 +37,7 @@
    proxyTable: {
      // è¿™é‡Œé…ç½® '/api' å°±ç­‰ä»·äºŽ target , ä½ åœ¨é“¾æŽ¥é‡Œè®¿é—® /api === http://localhost:54321
      '/JiangSu': {
        target: 'http://localhost/JiangSu',
        target: 'http://192.168.20.83/JiangSu',
        // secure: true, // å¦‚果是 https ,需要开启这个选项
        changeOrigin: true, // æ˜¯å¦æ˜¯è·¨åŸŸè¯·æ±‚?肯定是啊,不跨域就没有必要配置这个proxyTable了.
        pathRewrite: { // é‡å†™è·¯å¾„  ä¾‹å¦‚浏览器请求地址http://localhost:12345/xxx,实际请求的是你代理的地址：http:xxx/11111

 src/assets/js/Layer/batchAddGrid.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,158 @@
import * as turf from '@turf/turf';
import store from '../../../store';
var batchAddGrid = {
    id: "Rectangle",
    drawRect: function () {
        this.handler = new Cesium.ScreenSpaceEventHandler(Viewer.canvas);
        var points = [];
        var shape = this.renderRect(points);
        var step = 0;
        var $this = this;

        this.handler.setInputAction(function (e) {
            var cartesian = Viewer.scene.pickPosition(e.position);
            if (!Cesium.defined(cartesian)) {
                var ray = Viewer.camera.getPickRay(e.position);
                cartesian = Viewer.scene.globe.pick(ray, Viewer.scene);
            }
            points[step] = cartesian;
            step++;
            if (step === 3) {
                $this.handler.destroy();
                store.state.isshowBatchGrid = true;
                store.state.batchShape = shape;
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        this.handler.setInputAction(function (e) {
            var cartesian = Viewer.scene.pickPosition(e.startPosition);
            if (!Cesium.defined(cartesian)) {
                var ray = Viewer.camera.getPickRay(e.startPosition);
                cartesian = Viewer.scene.globe.pick(ray, Viewer.scene);
            }
            points[2] = cartesian;
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },
    renderRect: function (points) {
        var shape = Viewer.entities.add({
            id: this.id,
            polygon: {
                hierarchy: new Cesium.CallbackProperty(function () {
                    if (points[0] && points[1] && points[2]) {
                        var r0 = Cesium.Cartographic.fromCartesian(points[0]);
                        var r1 = Cesium.Cartographic.fromCartesian(points[1]); // è¾…助点
                        var r2 = Cesium.Cartographic.fromCartesian(points[2]);

                        var p0 = turf.point([
                            (r0.longitude * 180) / Math.PI,
                            (r0.latitude * 180) / Math.PI
                        ]);
                        var p1 = turf.point([
                            (r1.longitude * 180) / Math.PI,
                            (r1.latitude * 180) / Math.PI
                        ]);
                        var p2 = turf.point([
                            (r2.longitude * 180) / Math.PI,
                            (r2.latitude * 180) / Math.PI
                        ]);

                        this.rectanglePoint = p1;
                        var bearing1 = turf.rhumbBearing(p0, p1);
                        var bearing2 = turf.rhumbBearing(p0, p2);
                        var angle1 = bearing2 - bearing1;

                        // å¯¹è§’长度
                        var length = turf.distance(p0, p2, { units: "meters" });

                        var len1 = Math.cos((angle1 / 180) * Math.PI) * length;
                        var dest1 = turf.destination(p0, len1, bearing1, { units: "meters" });

                        var angle2 = 90 - angle1;
                        var len2 = Math.cos((angle2 / 180) * Math.PI) * length;
                        var dest2 = turf.destination(p0, len2, 90 + bearing1, {
                            units: "meters",
                        });

                        var coordinates = [
                            points[0],
                            Cesium.Cartesian3.fromDegrees(dest1.geometry.coordinates[0], dest1.geometry.coordinates[1]),
                            points[2],
                            Cesium.Cartesian3.fromDegrees(dest2.geometry.coordinates[0], dest2.geometry.coordinates[1])
                        ];
                        return new Cesium.PolygonHierarchy(coordinates);
                    }
                }, false),
                material: Cesium.Color.CYAN.withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.BLACK,
            },
        });

        return shape;
    },
    drawPoint: function (res) {
        var rect = Viewer.entities.getById(this.id);
        if (!rect) return;

        var points = rect.polygon.hierarchy.getValue().positions;
        //var r0 = Cesium.Cartographic.fromCartesian(points[0]);
        //var r1 = Cesium.Cartographic.fromCartesian(points[1]);
        //var r2 = Cesium.Cartographic.fromCartesian(points[2]);

        var r0 = Cesium.Cartographic.fromCartesian(points[0]);
        var r1 = Cesium.Cartographic.fromCartesian(points[1]);
        var r2 = Cesium.Cartographic.fromCartesian(points[2]);

        var p0 = turf.point([(r0.longitude * 180) / Math.PI, (r0.latitude * 180) / Math.PI]);
        var p1 = turf.point([(r1.longitude * 180) / Math.PI, (r1.latitude * 180) / Math.PI]);
        var p2 = turf.point([(r2.longitude * 180) / Math.PI, (r2.latitude * 180) / Math.PI]);

        // åšæˆ 3 * 4 çš„网格
        var wCount = res.col, hCount = res.row;

        var wStep = turf.distance(p0, p1, { units: "meters" }) / (wCount - 1);
        var hStep = turf.distance(p1, p2, { units: "meters" }) / (hCount - 1);

        var wAngle = turf.bearing(p0, p1);
        var hAngle = turf.bearing(p1, p2);
        var op = { units: "meters", };

        var arr = [p0.geometry.coordinates];

        for (var i = 1; i < wCount; i++) {
            var dest = turf.destination(p0, wStep * i, wAngle, op);
            arr.push(dest.geometry.coordinates);
        }

        for (var i = 0; i < wCount; i++) {
            var p = arr[i];
            for (var j = 1; j < hCount; j++) {
                var dest = turf.destination(p, hStep * j, hAngle, op);
                arr.push(dest.geometry.coordinates);
            }
        }

        store.state.batchGridArr = arr;
        // æ˜¾ç¤ºç‚¹
        // for (var i = 0; i < arr.length; i++) {
        //     var p = arr[i];
        //     console.log(arr[i])
        //     Viewer.entities.add({
        //         name: "点",
        //         show: true,
        //         position: Cesium.Cartesian3.fromDegrees(p[0], p[1], 0),
        //         point: {
        //             color: Cesium.Color.RED,
        //             pixelSize: 5,
        //             heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        //             // æ— è®ºå¦‚何缩放，标记点不被地形遮挡
        //             disableDepthTestDistance: Number.POSITIVE_INFINITY
        //         }
        //     });
        // }
    },
    setGridRowCol: function (res) {
        store.state.isshowBatchGrid = false;
        this.drawPoint(res);
    },
};
export default batchAddGrid

 src/assets/js/Layer/drawGrid.js

@@ -3,17 +3,17 @@
var drawGrid = {
    id: "Rectangle",
    drawRect: function () {
        this.handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
        this.handler = new Cesium.ScreenSpaceEventHandler(Viewer.canvas);
        var points = [];
        var shape = this.renderRect(points);
        var step = 0;
        var $this = this;

        this.handler.setInputAction(function (e) {
            var cartesian = viewer.scene.pickPosition(e.position);
            var cartesian = Viewer.scene.pickPosition(e.position);
            if (!Cesium.defined(cartesian)) {
                var ray = viewer.camera.getPickRay(e.position);
                cartesian = viewer.scene.globe.pick(ray, viewer.scene);
                var ray = Viewer.camera.getPickRay(e.position);
                cartesian = Viewer.scene.globe.pick(ray, Viewer.scene);
            }
            points[step] = cartesian;
            step++;
@@ -23,16 +23,16 @@
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        this.handler.setInputAction(function (e) {
            var cartesian = viewer.scene.pickPosition(e.startPosition);
            var cartesian = Viewer.scene.pickPosition(e.startPosition);
            if (!Cesium.defined(cartesian)) {
                var ray = viewer.camera.getPickRay(e.startPosition);
                cartesian = viewer.scene.globe.pick(ray, viewer.scene);
                var ray = Viewer.camera.getPickRay(e.startPosition);
                cartesian = Viewer.scene.globe.pick(ray, Viewer.scene);
            }
            points[2] = cartesian;
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },
    renderRect: function (points) {
        var shape = viewer.entities.add({
        var shape = Viewer.entities.add({
            id: this.id,
            polygon: {
                hierarchy: new Cesium.CallbackProperty(function () {
@@ -89,7 +89,7 @@
        return shape;
    },
    drawPoint: function ( res) {
        var rect = viewer.entities.getById(this.id);
        var rect = Viewer.entities.getById(this.id);
        if (!rect) return;

        var points = rect.polygon.hierarchy.getValue().positions;
@@ -117,24 +117,25 @@

        var arr = [p0.geometry.coordinates];
  
        // for (var i = 1; i < wCount; i++) {
        //     var dest = turf.destination(p0, wStep * i, wAngle, op);
        //     arr.push(dest.geometry.coordinates);
        // }
        for (var i = 1; i < wCount; i++) {
            var dest = turf.destination(p0, wStep * i, wAngle, op);
            arr.push(dest.geometry.coordinates);
        }
 
        // for (var i = 0; i < wCount; i++) {
        //     var p = arr[i];
        //     for (var j = 1; j < hCount; j++) {
        //         var dest = turf.destination(p, hStep * j, hAngle, op);
        //         arr.push(dest.geometry.coordinates);
        //     }
        // }
        for (var i = 0; i < wCount; i++) {
            var p = arr[i];
            for (var j = 1; j < hCount; j++) {
                var dest = turf.destination(p, hStep * j, hAngle, op);
                arr.push(dest.geometry.coordinates);
            }
        }
 
        console.log(arr);
        // æ˜¾ç¤ºç‚¹
        // for (var i = 0; i < arr.length; i++) {
        //     var p = arr[i];
        //     console.log(arr[i])
        //     viewer.entities.add({
        //     Viewer.entities.add({
        //         name: "点",
        //         show: true,
        //         position: Cesium.Cartesian3.fromDegrees(p[0], p[1], 0),

 src/assets/js/Layer/mapViewer.js

@@ -37,6 +37,9 @@
                store.state.isShowMeasureCoord= true;
            }
            if (Cesium.defined(nPickFeature)) {
                console.log(nPickFeature);
                if (nPickFeature.id && nPickFeature.id.id == 'Rectangle') 
                return
                if(nPickFeature.id && nPickFeature.id.properties){
                    mapInfo.setGeoJsonInfo(nPickFeature.id.properties)
                }else if(nPickFeature && nPickFeature.getProperty("name")){

 src/assets/js/Layer/model.js

@@ -11,6 +11,10 @@
        this.title = item;
        this.setModelMouseMove();
    },
    changeBatchLayer(item, res) {
        store.state.addModelFlag = res;
        this.title = item;
    },
    deleteAll() {
        if (!this.modelLayer) return;
        for (var i = 0; i < this.modelLayer._primitives.length; i++) {
@@ -21,9 +25,18 @@
    },
    setModelCoord(res) {
        store.state.addModelFlag = false;
        this.setModelMouseMove();
        // this.setModelMouseMove();
        if (res) {
            var id = new Date().getTime();
            // é•¿åº¦ä¸º62的数码数组
            var result = []
            var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
            for (var i = 0; i < 4; i++) {
                var num = Math.floor(Math.random() * 62);
                result.push(arr[num]);
            }
            result.join('')
            var id = new Date().getTime() - Math.floor(Math.random() * 9000) + result;

            var obj = {
                id: id,
                sourceType: 'GLB',
@@ -42,11 +55,10 @@
                    id: id,
                    sourceType: 'GLB',
                }

            }
            Bus.$emit("addOtherData", "对象", obj);

        }

    },
    setModelMouseMove() {
        if (store.state.addModelFlag) {
@@ -166,7 +178,6 @@
        var sm = Cesium.Matrix4.fromScale(new Cesium.Cartesian3(res.scale, res.scale, res.scale), new Cesium.Matrix4());
        model.modelMatrix = Cesium.Matrix4.multiply(model.modelMatrix, sm, model.modelMatrix);
    },

    getModelMatrix(res) {
        var headingPitchRoll = new Cesium.HeadingPitchRoll(res.heading, res.pitch, res.roll);
        var position = Cesium.Cartesian3.fromDegrees(res.longitude, res.latitude, res.altitude);
@@ -176,7 +187,6 @@
            new Cesium.Matrix4());
        return modelMatrix;
    },

    getModelLayer() {
        if (this.modelLayer == null) {
            this.modelLayer = new Cesium.PrimitiveCollection();

 src/components/index.vue

@@ -58,6 +58,7 @@
    <zhai-hai-info v-if="$store.state.isshowZhaiHai"></zhai-hai-info>
    <img-up v-if="$store.state.isShowImgUpDate"></img-up>
    <meu-grid v-if="$store.state.isshowGrid"></meu-grid>
    <batch-grid-menu v-if="$store.state.isshowBatchGrid"></batch-grid-menu>
    <map-video  v-if="$store.state.isShowVideo"></map-video>
  </div>
</template>
@@ -81,7 +82,9 @@
import zhaiHaiInfo from "./left/layerTree/zhaiHaiInfo.vue";
import ImgUp from "@/components/left/layerTree/ImgUp.vue";
import meuGrid from "@/components/left/layerTree/meuGrid.vue";
import batchGridMenu from "@/components/left/layerTree/batchGridMenu.vue";
import mapVideo from "@/components//left/layerTree/mapVideo.vue";
import BatchGridMenu from './left/layerTree/batchGridMenu.vue';
export default {
  name: "index",
  components: {
@@ -102,7 +105,9 @@
    zhaiHaiInfo,
    ImgUp,
    meuGrid,
    mapVideo
    batchGridMenu,
    mapVideo,
    BatchGridMenu
  },
  data() {
    return {

 src/components/left/layerTree/Layer.vue

@@ -627,7 +627,7 @@
        if (isCheck) {
          mapOL.addLayerData(treeNode);
        } else {
          mapOL.removeLayerD(treeNode);
          mapOL.removeLayerData(treeNode);
        }
      }
      // åªèƒ½åŒæ—¶åŠ è½½ä¸€ä¸ªåœ°å½¢

 src/components/left/layerTree/batchGridMenu.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,142 @@
<template>
  <div id="mapInfo" class="modelBox">
    <div>
      <div class="modleTitle ">
        <div>批量行列选择</div>
        <div class="modelClose" @click="$store.state.isshowBatchGrid = false"> X</div>
      </div>
    </div>
    <div class="modelContent">

      <el-form :model="modelOption" style="width: 100%;">
        <el-form-item label="行数">
          <el-input-number  v-model="row "></el-input-number>
        </el-form-item>
        <el-form-item label="列数">
          <el-input-number  v-model="col "></el-input-number>
        </el-form-item>
        <el-form-item >
          <el-button @click="setBatchMenuRowsCols" size="mall">提交</el-button>
        </el-form-item>
      </el-form>
    </div>



  </div>
</template>

<script>
import batchAddGrid from "../../../assets/js/Layer/batchAddGrid";
export default {
  name: "modelEdit",
  components: {

  },

  data() {
    return {
      modelOption: {
       
      },
       
      row: 3,
      col: 3,
    };
  },
  mounted() {
    this.setLayerStart();
  },
  destroyed() {

  },
  methods: {

    setLayerStart() {
      this.modelOption = mapInfo.mssageInfo;
    },
    setBatchMenuRowsCols(){
        batchAddGrid.setGridRowCol({row:this.row,col:this.col});
    }
  }
};
</script>

<style scoped lang="less">
.modelBox {
  width: 370px;
  height: 22%;
  border: 1px solid white;
  top: 30%;
  left: calc(50% - 180px);

  background-color: rgba(0, 0, 0, 0.6); // #0048fd69 !important
  z-index: 9999;
  position: absolute;


  .modleTitle {
    height: 42px;
    width: 90%;
    background: #0048fd69 !important;
    border-bottom: 1px solid white;
    color: white;
    font-weight: 700px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0% 5%;

    .modelClose {
      height: 16px;
      width: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(128, 128, 128, 0.6);
      font-size: 14x;

    }
  }

  .modelContent {
    width: 88%;
    height: calc(95% - 62px);
    margin: 5%;
    // display: flex;
    // justify-content: space-between;

    overflow-y: auto;
    overflow-x: hidden;

    .contentMessage {
      width: 100%;
      color: white;
      display: flex;
      border: 1px solid white;
      border-top: transparent;

      div {
        width: calc(50% - 2px);
        text-align: center;
        // margin-bottom: 5%;
        line-height: 50px;
        border-right: 1px solid white;
      }

      div:first-child {
        border-right: 1px solid white;

      }

    }

    .contentMessage:first-child {
      border-top: 1px solid white;
      ;
    }
  }


}
</style>

 src/components/left/layerTree/modelLayer.vue

@@ -3,51 +3,77 @@
    <div>
      <div class="modleTitle "  >
        <div>模型添加</div>
        <div class="modelClose" @click="$store.state.showModelFlag = false"> X</div>
        <el-button size="mini" @click="batchAdd">批量添加</el-button>
        <div class="modelClose" @click="$store.state.showModelFlag = false">
          X
        </div>
      </div>
    </div>
    <div class="modelContent">
      <div class="modelType" v-for="(item, index) in modelOption" :key="index" @click="setModelAddLayer(item)">
        <img class="imgIcon" :src="require('../../../assets/img/model/' + item.imgUrl)" />
      <div
        class="modelType"
        v-for="(item, index) in modelOption"
        :key="index"
        @click="setModelAddLayer(item)"
      >
        <img
          class="imgIcon"
          :src="require('../../../assets/img/model/' + item.imgUrl)"
        />
      </div>
    </div>


  </div>
</template>

<script>
import model from '../../../assets/js/Layer/model';
import model from "../../../assets/js/Layer/model";
import batchAddGrid from "../../../assets/js/Layer/batchAddGrid";

export default {
  name: "modelLayer",
  components: {

  },
  components: {},

  data() {
    return {
      modelOption: [

      ],
      modelOption: [],
    };
  },
  mounted() {
    this.setLayerStart();
  },
  destroyed() {

  },
  destroyed() {},
  methods: {
    setLayerStart() {
      this.modelOption = layerData.modelData;
 
    },
    setModelAddLayer(item) {
      if (this.$store.state.batchGridArr == []) {
      // model
      model.changeLayer(item,true);
    },
      } else {
        model.changeBatchLayer(item, true);

        let coordinates = this.$store.state.batchGridArr;
        let shape = this.$store.state.batchShape;
        Viewer.entities.remove(shape);
        coordinates.forEach((element) => {
          let coordinate = {
            longitude: Number(element[0].toFixed(6)),
            latitude: Number(element[1].toFixed(6)),
            altitude: 0,
            heading: 0,
            pitch: 0,
            roll: 0,
            scale: 1,
          };
          model.setModelCoord(coordinate);
        });
  }
    },
    batchAdd() {
      batchAddGrid.drawRect();
    },
  },
};
</script>

@@ -61,7 +87,11 @@
  background-color: rgba(0, 0, 0, 0.6); // #0048fd69 !important
  z-index: 9999;
  position: absolute;
.el-button {
  background-color: #0051e9;
  color: #fff;

}
  .modleTitle {
    height: 42px;
    width: 90%;
@@ -102,11 +132,10 @@
        width: 100%;
        height: 100%;
      }

    }

    .modelType :hover {
      border: 1px solid #409EFF;
      border: 1px solid #409eff;
    }
  }
}

 src/store/index.js

@@ -51,6 +51,8 @@
    isShowImgUpDate: false,
    isshowGrid:false,
    isShowVideo:false,
    isshowBatchGrid: false,
    batchGridArr: [],
  },
  mutations: {
    selectedLayer(state, b) {

 static/layers.json

@@ -100,7 +100,11 @@
                    "checked": true,
                    "rename": false,
                    "effectsMaxHeight": 0,
                    "zIndex": 5
                    "zIndex": 5,
                    "skipLevelofDetail": true,
                    "preferLeaves": true,
                    "maximumScreenSpaceError": 24,
                    "maximumMemoryUsage": 1024
                },
                {
                    "id": "482040AD2",
@@ -110,7 +114,11 @@
                    "checked": true,
                    "rename": false,
                    "zIndex": 2,
                    "effectsMaxHeight": 0
                    "effectsMaxHeight": 0,
                    "skipLevelofDetail": true,
                    "preferLeaves": true,
                    "maximumScreenSpaceError": 24,
                    "maximumMemoryUsage": 1024
                },
                {
                    "id": "482040AD3",
@@ -120,7 +128,11 @@
                    "checked": true,
                    "rename": false,
                    "zIndex": 2,
                    "effectsMaxHeight": 0
                    "effectsMaxHeight": 0,
                    "skipLevelofDetail": true,
                    "preferLeaves": true,
                    "maximumScreenSpaceError": 24,
                    "maximumMemoryUsage": 1024
                },
                {
                    "id": "482040AD4",
@@ -130,7 +142,11 @@
                    "checked": false,
                    "rename": false,
                    "zIndex": 2,
                    "effectsMaxHeight": 0
                    "effectsMaxHeight": 0,
                    "skipLevelofDetail": true,
                    "preferLeaves": true,
                    "maximumScreenSpaceError": 24,
                    "maximumMemoryUsage": 1024
                }
            ],
            "rename": false,