代码更新

surprise

2024-01-09 4529e45a7a7bc438dd4fabbf177f74cb2c0aa5b5

代码更新

 src/assets/js/Layer/drawGrid.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,159 @@
import * as turf from '@turf/turf';
import store from '../../../store';
var drawGrid = {
    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.isshowGrid= true
            }
        }, 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);
        //     }
        // }
 
        // æ˜¾ç¤ºç‚¹
        // 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.isshowGrid= false;  

        this.drawPoint(res);

    },
};
export default drawGrid

 src/assets/js/Layer/mapGeo.js

@@ -49,21 +49,16 @@
        if (this.type && this.type == res) {
            this.type = null
        }
        if (res.type == "zhaiHai") {
            Viewer.dataSources.remove(Viewer.dataSources.getByName("zhaiHai2")[0])
            Viewer.dataSources.remove(Viewer.dataSources.getByName("zhaiHai1")[0])
            Viewer.dataSources.remove(Viewer.dataSources.getByName("zhaiHai3")[0])
        } else {
      
            if (!res.type) return;
            Viewer.dataSources.remove(Viewer.dataSources.getByName(res.type)[0])
        }
      

    },

    addzhaiHaiGeoJson(res) {
        var url1 = layerData.config.Model_URL + res.urls[0];
        var url2 = layerData.config.Model_URL + res.urls[1];
        var url3 = layerData.config.Model_URL + res.urls[2];
        var url1 = layerData.config.Model_URL + res.urls ;
     
        var color = Cesium.Color.fromCssColorString("rgb(255,0,255)")
        var data1 = Cesium.GeoJsonDataSource.load(url1, //要加载的 url、GeoJSON å¯¹è±¡æˆ– TopoJSON å¯¹è±¡ã€‚
            {
@@ -73,38 +68,13 @@
            }
        )
        data1.then((dataSource) => {
            dataSource.name = "zhaiHai1"
            dataSource.name = res.type
            Viewer.dataSources.add(
                dataSource
            );
        })

        var data2 = Cesium.GeoJsonDataSource.load(url2, //要加载的 url、GeoJSON å¯¹è±¡æˆ– TopoJSON å¯¹è±¡ã€‚
            {
                stroke: color, //折线和多边形轮廓的默认颜色。
                fill: Cesium.Color.WHITE.withAlpha(0.2), //多边形内部的默认颜色。
                strokeWidth: 3, //折线和多边形轮廓的默认宽度。
            }
        )
        data2.then((dataSource) => {
            dataSource.name = "zhaiHai2"
            Viewer.dataSources.add(
                dataSource
            );
        })
        var data3 = Cesium.GeoJsonDataSource.load(url3, //要加载的 url、GeoJSON å¯¹è±¡æˆ– TopoJSON å¯¹è±¡ã€‚
            {
                stroke: color, //折线和多边形轮廓的默认颜色。
                fill: Cesium.Color.WHITE.withAlpha(0.2), //多边形内部的默认颜色。
                strokeWidth: 3, //折线和多边形轮廓的默认宽度。
            }
        )
        data3.then((dataSource) => {
            dataSource.name = "zhaiHai3"
            Viewer.dataSources.add(
                dataSource
            );
        })
       
    },

    addZhongQuXianGeoJson(res) {

 src/assets/js/Layer/mapViewer.js

@@ -37,12 +37,12 @@
                store.state.isShowMeasureCoord= true;
            }
            if (Cesium.defined(nPickFeature)) {
             
                if(nPickFeature.id && nPickFeature.id.properties){
                    console.log(nPickFeature)
                    mapInfo.setGeoJsonInfo(nPickFeature.id.properties)
                }else if(nPickFeature && nPickFeature.getProperty("name") == "DLJQT0007"){
                    store.state.isShowVideo= true;
                }else if(nPickFeature && nPickFeature.getProperty("name")){
                    if(nPickFeature.getProperty("name") == "DLJQT0007"){
                        store.state.isShowVideo= true;
                    }
                }
            }
            if(store.state.isQueryFalag){

 src/assets/js/Layer/menuGrid.js

ÎļþÒÑɾ³ý

 src/components/left/layerTree/messageInfo.vue

@@ -61,26 +61,30 @@
      }
      var flag = false;
      var id=null;
      for(var i in data){
        if(data[i].name == '类型' && data[i].value =='网格'){
          flag = true;
        }
        if(data[i].name =='ID'){
          id=data[i].value;
        }
      }
      if(flag){
        this.getInfoMessage(id)
      }else{
        this.setInfoMesgData(data);
      }
      // for(var i in data){
      //   if(data[i].name == '类型' && data[i].value =='网格'){
      //     flag = true;
      //   }
      //   if(data[i].name =='ID'){
      //     id=data[i].value;
      //   }
      // }
      // if(flag){
      //   this.getInfoMessage(id)
      // }else{
      //   this.setInfoMesgData(data);
      // }

      this.setInfoMesgData(data);
    },
    setInfoMesgData(res) {
      this.modelOption = res
    },
   async getInfoMessage(res){
      const data = await Grid_SelectById(res);
      console.log(data)
       if(data.status == 200){

       }
    }
  }
};

 src/components/left/layerTree/meuGrid.vue

@@ -1,5 +1,5 @@
<template>
  <div id="mapInfo" class="modelBox" v-drag>
  <div id="mapInfo" class="modelBox">
    <div>
      <div class="modleTitle ">
        <div>格网</div>
@@ -9,8 +9,11 @@
    <div class="modelContent">

      <el-form :model="modelOption" style="width: 100%;">
        <el-form-item label="网格大小(单位米)">
          <el-input-number  v-model="cellSide "></el-input-number>
        <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="setMenuRowsCols" size="mall">提交</el-button>
@@ -24,12 +27,7 @@
</template>

<script>
import menuGrid from '../../../assets/js/Layer/menuGrid';





import drawGrid from '../../../assets/js/Layer/drawGrid';
export default {
  name: "modelEdit",
  components: {
@@ -42,7 +40,8 @@
       
      },
       
      cellSide: 3,
      row: 3,
      col: 3,
    };
  },
  mounted() {
@@ -57,7 +56,7 @@
      this.modelOption = mapInfo.mssageInfo;
    },
    setMenuRowsCols(){
        menuGrid.setGridRowCol({cellSide:this.cellSide});
        drawGrid.setGridRowCol({row:this.row,col:this.col});
    }
  }
};

 src/components/left/leftmenu.vue

@@ -2412,8 +2412,8 @@
            "0",
            true
          );
          layer._primitive.cullingDistance = 100
          layer._primitive.cameraHeightRange = new Cesium.Cartesian3(0, 1000)
          // layer._primitive.cullingDistance = 100
          // layer._primitive.cameraHeightRange = new Cesium.Cartesian3(0, 1000)


          break;

 src/components/menu/menulist.vue

@@ -24,10 +24,10 @@
          <span>模型</span>
        </div>

        <!-- <div class="menubtn" @click="setMenuGrid()">
        <div class="menubtn" @click="setMenuGrid()">
          <img class="bhImg" title="格网" src="@/assets/img/right/cx-s.png" />
          <span>格网</span>
        </div> -->
        </div>  
        <div class="menubtn" @click="setMenuQuery()">
          <img class="bhImg" title="查询" src="@/assets/img/right/queyr.png" />
          <span>查询</span>
@@ -208,9 +208,10 @@
import zt from "@/assets/img/left/specialanalyse4.png";
import fx from "@/assets/img/right/cx-s.png";
import tx from "@/assets/img/left/leftnav2.png";
import menuGrid from '@/assets/js/Layer/menuGrid'
 
import { Img_Upload } from '@/api/api.js'
import Bus from "../tools/Bus";
import drawGrid from "../../assets/js/Layer/drawGrid";
export default {
  name: "menulist",
  components: {
@@ -268,7 +269,7 @@
      this.$store.commit("setMenuQuery", true)
    },
    setMenuGrid() {
      menuGrid.init();
      drawGrid.drawRect();
    },
    setImgUpDate() {
      // this.$store.commit("setImgUpdate",true)

 static/layers.json

@@ -39,7 +39,8 @@
                    "zIndex": 4,
                    "checked": false,
                    "rename": false
                },      {
                },
                {
                    "id": "A349C2B3",
                    "sourceType": "GEOJSON",
                    "type": "ZhongPo",
@@ -66,11 +67,7 @@
                    "sourceType": "GEOJSON",
                    "type": "zhaiHai",
                    "name": "灾害",
                    "urls": [
                        "/Data/json/zhaiHai1.geojson",
                        "/Data/json/zhaiHai2.geojson",
                        "/Data/json/zhaiHai3.geojson"
                    ],
                    "urls": "/Data/json/zhaiHai.geojson",
                    "alpha": 1,
                    "zIndex": 4,
                    "checked": false,
@@ -124,7 +121,8 @@
                    "rename": false,
                    "zIndex": 2,
                    "effectsMaxHeight": 0
                },{
                },
                {
                    "id": "482040AD4",
                    "sourceType": "b3dm",
                    "name": "压力测试模型",