代码提交

surprise

2024-01-09 9398f14feea7ad8b7d00ce7d2bb2e5362cec59d3

代码提交

 src/api/api.js

@@ -39,6 +39,28 @@
  return service.get("https://apis.kuandeng.net/v1/search/mp/getMpByLocation?locations=" + params.lon + "," + params.lat + "&dataVersion=JSJK_210000");
}

export function Img_Upload(params) {
  //请求地址
  return service.post("/Img/Upload", params);
}


export function Img_SelectByPage(params) {
  //请求地址
  return service.get("/Img/SelectByPage", { params: params });
}


export function Img_DeleteByIds(params) {
  //请求地址
  return service.get("Img/DeleteByIds?ids=" + params);
}


export function Grid_SelectById(params) {
  //请求地址
  return service.get("Grid/SelectById?id=" + params);
}


//京办登录

 src/assets/img/right/queyr.png

 src/assets/img/right/upload.png

 src/assets/js/Layer/mapGeo.js

@@ -1,7 +1,12 @@
var source = []
const mapGeo = {
    source1: null,
    type: null,
    init(res) {
        if (this.type && this.type === res) {
            return this.type = null
        }
        this.type = res;
        switch (res.type) {
            case "WangGe":
                this.addWangGeGeoJson(res);
@@ -17,11 +22,33 @@
                break;
            case "zhaiHai":
                this.addzhaiHaiGeoJson(res)

                break;
            case "ZhongPo":
                this.addZhongPoGeoJson(res)
                break;
        }
    },

    addZhongPoGeoJson(res) {
        var url = layerData.config.Model_URL + res.urls;
        var data = Cesium.GeoJsonDataSource.load(url, //要加载的 url、GeoJSON å¯¹è±¡æˆ– TopoJSON å¯¹è±¡ã€‚
            {
                stroke: Cesium.Color.ORANGE, //折线和多边形轮廓的默认颜色。
                fill: Cesium.Color.WHITE.withAlpha(0.2), //多边形内部的默认颜色。
                strokeWidth: 3, //折线和多边形轮廓的默认宽度。
            }
        )
        data.then((dataSource) => {
            dataSource.name = res.type
            Viewer.dataSources.add(
                dataSource
            );
        })
    },
    delGeoSource(res) {
        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])
@@ -129,11 +156,11 @@
        })
    },
    addZhuangHaoGeoJson(res) {
        

        var url = layerData.config.Model_URL + res.urls;
        var img = layerData.config.Model_URL + '/Data/img/img1.png';
       Cesium.GeoJsonDataSource.load(url).then((dataSource) => {
      
        Cesium.GeoJsonDataSource.load(url).then((dataSource) => {

            dataSource.name = res.type
            Viewer.dataSources.add(
                dataSource

 src/assets/js/Layer/mapInfo.js

@@ -4,6 +4,7 @@
        '桩号_Point',
    ],
    mssageInfo: null,
    propertyNames:null,
    Init(html) {

        if (!html) return;
@@ -16,16 +17,28 @@
        store.state.showZhaiHaiImg = null;
        store.state.isshowZhaiHai = false;
        store.state.showMessageInfo = false;
        this.mssageInfo = null
        this.mssageInfo = null;
           store.state.isShowImgUpDate = false; 
        store.state.isShowImgUrl= null;
        this.propertyNames=null
     
    },
    setGeoJsonInfo(res) {
        if (res.projectId && res.frameNo) {
            this.setRestLayer();
            
            this.setRestLayer();      
            store.state.showZhaiHaiImg = res;
            store.state.isshowZhaiHai = true;
        } else {
        }else if(res.sourceType && res.sourceType._value == "imgUp"){
            this.setRestLayer();
    
            setTimeout(() => {
                store.state.isShowImgUrl= res._path._value;
                store.state.isShowImgUpDate = true;  
            }, 100);
         
        }else {
            var val_name = res._propertyNames;
            this.propertyNames =res._propertyNames;
            var val = [];
            for (var i = 0; i < val_name.length; i++) {
                var obj = {
@@ -34,7 +47,7 @@
                }
                val.push(obj)
            }
            if (val.length == 0) return
       
            this.showMapInfo(val);
        }
    },

 src/assets/js/Layer/mapViewer.js

@@ -37,14 +37,16 @@
                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;
                }
           
            }
            if(store.state.isQueryFalag){
                console.log(coordinate)
              
                store.state.isQyeryCoord = coordinate;
            }


 src/assets/js/Layer/menuGrid.js

@@ -1,13 +1,160 @@
import parse from "qs/lib/parse";
import store from "../../../store";
import * as turf from '@turf/turf';
const menuGrid = {
    geom: [],
    init() {
        console.log(123)
        var that = this;
        var grid = sgworld.Creator.createSimpleGraphic(
            "rectangle",
            "point",
            {
                // clampToGround: false
            }, entity => {

            }, (entity) => {
                var val = that.setCartesianToEightFour(entity.position.getValue())
                that.geom.push([parseFloat(val.lng), parseFloat(val.lat)])
                sgworld.Creator.SimpleGraphic.remove(entity.id);
                if (this.geom.length < 2) {
                    that.init();
                } else {
                    store.state.isshowGrid = true;
                }
            })
    },
    setTurfGrid(res, geom) {

        var box = [parseFloat(geom[0][0]), parseFloat(geom[0][1]), parseFloat(geom[1][0]), parseFloat(geom[1][1])]
        this.geom = [];
        var options = { units: "meters" };
        var squareGrid = turf.squareGrid(box, res.cellSide, options);
        var features = [];
        for (var i = 0; i < squareGrid.features.length; i++) {
            var coord = squareGrid.features[i].geometry.coordinates[0];
            var coordinates = [];
            for (var j in coord) {
                coordinates.push([coord[j][0], coord[j][1], 18])
            }
            features.push({
                "type": "Feature", "properties": {
                    "NAME": '新建格网' + (i + 1),
                    "bak": ''
                },
                "geometry": {
                    "type": "Polygon", "coordinates": [
                        coordinates
                    ]
                }
            })
        }
        var obj = {
            "type": "FeatureCollection",
            "name": "新建格网",
            "crs": {
                "type": "name",
                "properties": {
                    "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
                }
            },
            "features": features
        }
        this.adddDataSource(obj)
    },

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

    setOtherGrid(res, geom) {
        var maxlon, minlon, maxlat, minlat;
        console.log(geom)
        if (parseFloat(geom[0][0]) > parseFloat(geom[1][0])) {
            maxlon = parseFloat(geom[0][0]);
            minlon = parseFloat(geom[1][0]);
        } else {
            maxlon = parseFloat(geom[1][0]);
            minlon = parseFloat(geom[0][0]);
        }
        if (parseFloat(geom[0][1]) > parseFloat(geom[1][1])) {
            maxlat = geom[0][1];
            minlat = geom[1][1];
        } else {
            maxlat = geom[1][1];
            minlat = geom[0][1];
        }
        var row = 3;
        var col = 3;
        var lon_dis = (parseFloat(maxlon) - parseFloat(minlon)) / 3;
        var lat_dis = (parseFloat(maxlat) - parseFloat(minlat)) / 3;
        console.log(lon_dis, minlon)
        for (var i = 0; i < col; i++) {
            for (var j = 0; j < row; j++) {
                var startlon = parseFloat(minlon + (j * lon_dis)) 
                var startlat = parseFloat(minlat + (i * lat_dis)) 
                var endlon = parseFloat(minlon + ((j + 1) * lon_dis)) 
                var endlat = parseFloat(minlat + ((i + 1) * lat_dis)) 
                var positions = [
                    parseFloat(startlon), parseFloat(startlat),  parseFloat(endlon), parseFloat(startlat),  
                    parseFloat(endlon), parseFloat(endlat),  parseFloat(startlon), parseFloat(endlat),   parseFloat(startlon), parseFloat(startlat) 
                ]
            
                   
                Viewer.entities.add({
                    name: "polygon_height",
                    polygon: {
                        show: true,
                        hierarchy: new Cesium.Cartesian3.fromDegreesArray(positions),
                        height: 18,
                        material: Cesium.Color.CYAN.withAlpha(0.5),
                        outline: true,
                        outlineColor: Cesium.Color.BLACK,
                    }
                })
          


            }
        }
    },


    setGridRowCol(res) {
        store.state.isshowGrid = false;
        var geom = this.geom;
        // this.setTurfGrid(res,geom)
        this.setOtherGrid(res, geom);

    },
    toFixed(res) {
        return parseFloat(res).toFixed(6)
    },
    setdistance(start, end) {
        var from = turf.point(start);
        var to = turf.point(end);
        var distance = turf.distance(from, to, {
            units: 'meters'
        });
        return distance
    },


    setCartesianToEightFour(res) {
        var std = {};
        let ellipsoid = window.Viewer.scene.globe.ellipsoid;
        let cartographic = ellipsoid.cartesianToCartographic(res);
        std.lat = Cesium.Math.toDegrees(cartographic.latitude);
        std.lng = Cesium.Math.toDegrees(cartographic.longitude);
        std.alt = cartographic.height;
        return std;
    }
}
export default menuGrid;

 src/assets/js/Layer/model.js

@@ -1,3 +1,4 @@
import { updateUserPwd } from "../../../api/api";
import store from "../../../store";
import Bus from "@tools/Bus";
const model = {
@@ -70,12 +71,13 @@
        this.getModelLayer();
        var modelMatrix = this.getModelMatrix(res.style);
        var url = layerData.config.Model_URL + res.style.url;
 

        var model = this.modelLayer.add(Cesium.Model.fromGltf({
            id: res.id,
            url: url,
            scale: res.scale,
            minimumPixelSize: 64,
            minimumPixelSize : 200,
            maximumScale : 200000,
            modelMatrix: modelMatrix

        }));
@@ -182,5 +184,31 @@
            Viewer.scene.primitives.add(this.modelLayer);
        }
    },
    addImgUpLayer(res) {
        var url = layerData.config.Model_URL + '/Data/img/mark1.png'
        var citizensBankPark = viewer.entities.add({
            name: res.name,
            id: res.id,
            position: Cesium.Cartesian3.fromDegrees(res.x, res.y, res.z),
            billboard: { //图标
                image: url,
                width: 32,
                height: 44,
                pixelOffset: new Cesium.Cartesian3(0, -40, 0),
            },
            properties: res,
        });

    },
    delImgUpLayer(res) {
        var entity = Viewer.entities._entities._array;
        for (var i = 0; i < entity.length; i++) {
            var model = entity[i]
            if (model.id === res.id) {
                Viewer.entities.remove(model)
            }
        }

    },
}
export default model;

 src/components/index.vue

@@ -55,7 +55,10 @@
      <img id="myImage" class="image" src="">
    </div>
    <message-info v-if="$store.state.showMessageInfo"></message-info>
    <zhai-hai-info  v-if="$store.state.isshowZhaiHai"></zhai-hai-info>
    <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>
    <map-video  v-if="$store.state.isShowVideo"></map-video>
  </div>
</template>

@@ -76,6 +79,9 @@
import messageInfo from "@/components/left/layerTree/messageInfo.vue";
import measureCoord from "@/components/left/layerTree/measureCoord.vue";
import zhaiHaiInfo from "./left/layerTree/zhaiHaiInfo.vue";
import ImgUp from "@/components/left/layerTree/ImgUp.vue";
import meuGrid from "@/components/left/layerTree/meuGrid.vue";
import mapVideo from "@/components//left/layerTree/mapVideo.vue";
export default {
  name: "index",
  components: {
@@ -93,7 +99,10 @@
    signalling,
    messageInfo,
    measureCoord,
    zhaiHaiInfo
    zhaiHaiInfo,
    ImgUp,
    meuGrid,
    mapVideo
  },
  data() {
    return {

 src/components/left/layerTree/ImgUp.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,113 @@
<template>
  <div id="mapInfo" class="modelBox" v-drag>
    <div>
      <div class="modleTitle ">
        <div>图片查看</div>
        <div class="modelClose" @click="$store.state.isShowImgUpDate = false"> X</div>
      </div>
    </div>
    <div class="modelContent ">
      <img style="width: 100%; height: calc(100% - 20px)" :src="url" />
  
    </div>


  </div>
</template>

<script>




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

  },

  data() {
    return {
      url: null,
      srcList: null,
    };
  },
  mounted() {
    this.setLayerStart();
  },
  destroyed() {

  },
  
  methods: {

    setLayerStart() {
       var url =layerData.config.Model_URL+"/"+ this.$store.state.isShowImgUrl;
      this.setUrl(url);
    },

    setUrl(res) {
      console.log(res)
      this.url = res;
  

    }

  }
};
</script>

<style scoped lang="less">
.modelBox {
  width: 20%;
  height: 25%;
  border: 1px solid white;
  top: 25%;
  left: 30%;

  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: calc(100% - 20px);
    height: calc(100% - 42px);
    padding: 10px 10px;

    /deep/.el-form-item__label {
      color: white;
    }


  

  }


}
</style>

 src/components/left/layerTree/Layer.vue

@@ -97,7 +97,7 @@
import AddOnlineMap from "./AddOnlineMap.vue";
import GetScene from "./GetScene.vue";
import SaveScene from "./SaveScene.vue";
import { Op_SelectByPage, Op_Insert, Op_UpdateById } from '../../../api/api.js'
import { Op_SelectByPage, Op_Insert, Op_UpdateById, Img_SelectByPage, Img_DeleteByIds } from '../../../api/api.js'
import model from "../../../assets/js/Layer/model";
import mapOL from "../../../assets/js/Layer/mapOL";
// å·¥ç¨‹æ ‘工具
@@ -154,6 +154,16 @@
    };
  },
  mounted() {

    Bus.$on("reastLayer", (type) => {
      this.setTreeData([]);
      this.initData({});
      model.deleteAll();
      setTimeout(() => {
  
        this.histotyPlotting();
      }, 100);
    });
    // èŽ·å–本地配置文件
    if (this.$route.query.hasOwnProperty("layer")) {
      axios
@@ -196,12 +206,13 @@
      Bus.$emit("checkTab", "index/add/treeLayer", false);
    },
    closeLayer() {
      this.$store.state.isShowLayer= false
      this.$store.state.isShowLayer = false
      // this.$parent.hideLayer();
    },
    // å®šä¹‰ä¸­è½¬ç«™äº‹ä»¶
    initBusEvent() {
      Bus.$off("addLayer");


      Bus.$on("addLayer", (type) => {
        this.selectNode = this.$refs.tree && this.$refs.tree.getCurrentNode();
        this.openThisTypePop(type);
@@ -394,7 +405,9 @@
      this.setTreeData([]);
      this.initData({});
      model.deleteAll();
      var finalPlotting = [];
      const data = await Op_SelectByPage({ pageSize: 1000000, pageIndex: 1, name: '' });
      const data1 = await Img_SelectByPage({ pageSize: 1000000, pageIndex: 1, name: '' });
      if (data.status == 200 && data.data.length > 0) {
        var val_data = data.data;
        for (var i in val_data) {
@@ -405,7 +418,7 @@
            let plottingArr = [];
            plottingArr.push(val[0]);
            const newArr = arrGroup(plottingArr, (item) => item.name);
            let finalPlotting = [];

            newArr.map((a) => {
              let newObj = {};
              a.map((b) => {
@@ -417,16 +430,33 @@
              });
              finalPlotting.push(newObj);
            });
            let json = {
              name: "江苏交控智慧高速",
              id: 1,
              open: true,
              children: finalPlotting,
            };
            this.initData(json);

          }
        }
      }

      if (data1.status == 200) {
        var img_data = data1.data;
        if (img_data && img_data.length > 0) {
          for (var i = 0; i < img_data.length; i++) {
            var item = img_data[i]
            item.sourceType = 'imgUp'
            item.sid = item.id;
            item.id = new Date().getTime() + i;
            item.checked = true;
            finalPlotting[0].children.push(item)
          }
        }

      }
      var json = {
        name: "江苏交控智慧高速",
        id: 1,
        open: true,
        children: finalPlotting
      };
   
      this.initData(json);
      // const downloading = this.$loading({
      //   lock: true,
      //   text: "会议保障历史数据加载中，请稍后",
@@ -555,7 +585,7 @@
        if (addData && node._children) {
          node._children.forEach((item) => {
            _treeTool.addData(item);
            console.log(item)
  
            this.setAddGLBLayer(item);
          });
        } else {
@@ -823,6 +853,8 @@
        model.addModelLayer(res);
      } else if (res.sourceType == "SimpleGraphic" && res.checked) {
        mapOL.addLayerData(res);
      } else if (res.sourceType == "imgUp" && res.checked) {
        model.addImgUpLayer(res);
      }
    },
    // æ·»åŠ æ¼”示动画
@@ -941,6 +973,9 @@
    // å³é”®èœå•å…ƒç´ 
    rightClick(e, data, node, comp) {
      this.isClickParent = !!data.children;
      if (data.sourceType == 'imgUp') {
        this.isClickParent = true;
      }
      this.selectNode = data;
      this.rightClickMenuStyle = { top: e.pageY + "px", left: e.pageX + "px" };
      this.rightClickMenuDisplay = true;
@@ -957,16 +992,15 @@
      if (this.selectNode.sourceType === "GLB") {
        model.setDelGLBModel(this.selectNode)
      }
       if (this.selectNode.sourceType === "SimpleGraphic") {
     
      if (this.selectNode.sourceType === "SimpleGraphic") {
        mapOL.removeLayerData(this.selectNode)
      }

      if (this.selectNode.sourceType === "imgUp") {
        this.removeimgUpData(this.selectNode)
      }
      this.remove(this.selectNode);
      this.$refs.tree && this.$refs.tree.setCurrentKey(null);
      this.selectNode = undefined;


    },
    // å³é”®ç¼–辑按钮编辑树节点
    editTreeNode() {
@@ -993,6 +1027,18 @@
        }
      }
    },
    async removeimgUpData(res) {
      const data = await Img_DeleteByIds(res.sid);
      if (data.status == 200) {

      }
    },






    // æ·»åŠ ç›®å½•
    addFold() {
      let newChild = {

 src/components/left/layerTree/mapVideo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,116 @@
<template>
  <div id="mapInfo" class="modelBox">
    <div>
      <div class="modleTitle ">
        <div>详情</div>
        <div class="modelClose" @click="$store.state.isShowVideo = false"> X</div>
      </div>
    </div>
    <div class="modelContent ">
 
      <div  >
        <video :src="src" autoplay  controls width="100%" height="100%"></video> 
      </div>
    </div>


  </div>
</template>

<script>




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

  },

  data() {
    return {
      src: null,
      srcList: null,
    };
  },
  mounted() {
    this.setLayerStart();
  },
  destroyed() {

  },

  methods: {

    setLayerStart() {
     this.src = layerData.config.vidoe_URL;

    },

    setUrl(res) {
      this.url = res;


    }

  }
};
</script>

<style scoped lang="less">
.modelBox {
  width: 40%;
  height: 45%;
  border: 1px solid white;
  top: 25%;
  left: 30%;

  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: calc(100% - 20px);
    height: calc(100% - 42px);
    padding: 10px 10px;

    position: absolute;
    div{
      width: 100%;
      height: calc(100% - 20px);
    }




  }


}
</style>

 src/components/left/layerTree/messageInfo.vue

@@ -3,16 +3,28 @@
    <div>
      <div class="modleTitle ">
        <div>属性信息</div>
        <div class="modelClose" @click="$store.state.showMessageInfo = false"> X</div>
        <div class="modelmenu">
          <div v-show="showMenuGrid">
            <el-link style="color: white;font-size: 14x;">编辑</el-link>
          </div>
          <div class="modelClose" @click="$store.state.showMessageInfo = false"> X</div>
        </div>

      </div>
    </div>
    <div class="modelContent">
      <div class="contentMessage" v-for="(item, index) in modelOption" :key="index">
      <div v-show="!showMenuGrid" class="contentMessage" v-for="(item, index) in modelOption" :key="index">
        <div>{{ item.name }}</div>
        <div>{{ item.value }}</div>
      </div>
      <div v-show="showMenuGrid" class="contentMessage" v-for="(item, index) in modelOption" :key="index">
        <div>{{ item.name }}</div>
        <div v-show="item.name == 'ID'">{{ item.value }}
        </div>
        <div v-show="item.name != 'ID'"><el-input style="width: 100%;" v-model="item.value" placeholder=""></el-input>
        </div>
      </div>
    </div>


  </div>
</template>
@@ -20,8 +32,7 @@
<script>
import model from '../../../assets/js/Layer/model';
import mapInfo from '../../../assets/js/Layer/mapInfo';


import {Grid_SelectById} from '@/api/api'
export default {
  name: "modelEdit",
  components: {
@@ -30,8 +41,8 @@

  data() {
    return {
      modelOption: null

      modelOption: null,
      showMenuGrid: false,
    };
  },
  mounted() {
@@ -43,9 +54,34 @@
  methods: {

    setLayerStart() {
      this.modelOption = mapInfo.mssageInfo;
      var data = mapInfo.mssageInfo;
      if (!data) {
        this.$store.state.showMessageInfo = false;
        return
      }
      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);
      }
    },

    setInfoMesgData(res) {
      this.modelOption = res
    },
   async getInfoMessage(res){
      const data = await Grid_SelectById(res);
      console.log(data)
    }
  }
};
</script>
@@ -75,6 +111,12 @@
    align-items: center;
    padding: 0% 5%;

    .modelmenu {
      display: flex;
      align-items: center;

    }

    .modelClose {
      height: 16px;
      width: 16px;
@@ -83,6 +125,7 @@
      justify-content: center;
      background: rgba(128, 128, 128, 0.6);
      font-size: 14x;
      margin-left: 20px;

    }
  }
@@ -96,6 +139,7 @@

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

    .contentMessage {
      width: 100%;
      color: white;
@@ -124,6 +168,11 @@
    }
  }

  /deep/.el-input__inner {
    background: transparent !important;
    border: transparent !important;
    color: white !important;
  }

}
</style>

 src/components/left/layerTree/meuGrid.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,143 @@
<template>
  <div id="mapInfo" class="modelBox" v-drag>
    <div>
      <div class="modleTitle ">
        <div>格网</div>
        <div class="modelClose" @click="$store.state.isshowGrid = false"> X</div>
      </div>
    </div>
    <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>
        <el-form-item >
          <el-button @click="setMenuRowsCols" size="mall">提交</el-button>
        </el-form-item>
      </el-form>
    </div>



  </div>
</template>

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





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

  },

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

  },
  methods: {

    setLayerStart() {
      this.modelOption = mapInfo.mssageInfo;
    },
    setMenuRowsCols(){
        menuGrid.setGridRowCol({cellSide:this.cellSide});
    }
  }
};
</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/leftmenu.vue

@@ -825,7 +825,7 @@
      // æ‰“勾选中
      let isCheck = data.checkedKeys.indexOf(treeNode.id) > -1;
      this.setVisiable(treeNode, isCheck);
      this.setGeoJSOnCheck(treeNode,isCheck);
      this.setGeoJSOnCheck(treeNode, isCheck);
      //选中之后传给vuex
      let selectedLayers = this.$refs.tree.getCheckedNodes();
      let filterSelectLayers = selectedLayers;
@@ -853,9 +853,11 @@
      return params;
      // }
    },
    setGeoJSOnCheck(treeNode, checked){
      if(!checked){
    setGeoJSOnCheck(treeNode, checked) {
      if (!checked) {
        mapGeo.delGeoSource(treeNode);
      } else {
        mapGeo.init(treeNode);
      }
    },
    setVisiable(treeNode, checked) {
@@ -1710,7 +1712,7 @@
          break;
        case 'GEOJSON':
          mapGeo.init(treeNode);
      

          break;
        case "wmse":
          // layer = sgworld.Creator.CreateWMSImageFeatureLayer(
@@ -2410,6 +2412,10 @@
            "0",
            true
          );
          layer._primitive.cullingDistance = 100
          layer._primitive.cameraHeightRange = new Cesium.Cartesian3(0, 1000)


          break;
        case "s3m":
          layer = sgworld.Creator.createS3MLayer(

 src/components/map/viewer.vue

@@ -97,10 +97,12 @@
    this.$nextTick(function () {
      let that = this;
      //*********北京sdk************

      // Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NzE3ZGI5NC00MzAwLTRmMzEtOTA5NS0zNzQ3YmJhOTg5MWMiLCJpZCI6NDE4NDYsImlhdCI6MTYxMjU4MDEyN30.XQkH4SpF-q3ykVvnBi_HVyJwSxTM-58SxlRG387T6TY";
      window.sgworld = new SmartEarth.EarthCtrl(
        "sdkContainer",
        {
         StaticFileBaseUrl: "../../../static/CimSDK/",
          StaticFileBaseUrl: "../../../static/CimSDK/",
          // StaticFileBaseUrl: "../../../SW/static/CimSDK/",
          // StaticFileBaseUrl: "../../../JSJKZHGS/static/CimSDK/",
        },
@@ -128,6 +130,8 @@
      window.Viewer = sgworld._Viewer;
      window.viewer = sgworld._Viewer;
      sgworld._Viewer.scene.moon.show = false;
      // Viewer.terrainProvider=Cesium.createWorldTerrain()
   
      window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer, Cesium);
      Viewer.shadows = false;
      //深度检测
@@ -206,7 +210,7 @@
      mapViewer.addClick();


    

    });
    let size = this.detectZoom();
    this.scale = (100 / size).toFixed(2);
@@ -395,7 +399,7 @@
      // );
      var layer = Viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
       

      }))
      layer.name = "ARCGIS"
    },
@@ -409,7 +413,7 @@
        tileMatrixSetID: "GoogleMapsCompatible",
      }))
      layer.name = "天地图";
      layer.show= false;
      layer.show = false;
      var layer1 = Viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        url: layerData.config.tdtZj + layerData.config.tdtToken,
        layer: "tdtAnnoLayer",
@@ -419,7 +423,7 @@
        tileMatrixSetID: "GoogleMapsCompatible",
      }))
      layer1.name = "天地图"
      layer1.show= false;
      layer1.show = false;
    },
    //初始化弹窗事件


 src/components/menu/menulist.vue

@@ -1,23 +1,10 @@
<template>
  <div>
    <div
      @click="showMenuList"
      :class="{ menulist: !panelActive, menulist_active: panelActive }"
      class="menuliststyle"
    >
      <img
        class="menuchangebtn"
        v-show="!panelActive"
        title="菜单"
        :src="switchMenuImage"
      />
    <div @click="showMenuList" :class="{ menulist: !panelActive, menulist_active: panelActive }" class="menuliststyle">
      <img class="menuchangebtn" v-show="!panelActive" title="菜单" :src="switchMenuImage" />
      <div class="menubtnlist" v-show="panelActive">
        <div class="menubtn" @click="showSceneCard()">
          <img
            class="bhImg"
            title="场景数据"
            src="@/assets/img/left/specialeffect4.png"
          />
          <img class="bhImg" title="场景数据" src="@/assets/img/left/specialeffect4.png" />
          <span>场景</span>
        </div>
        <div class="menubtn" @click="setMenuTool(1)">
@@ -32,73 +19,46 @@
          <img class="bhImg" title="漫游" src="@/assets/img/right/my11.png" />
          <span>漫游</span>
        </div>
       <div class="menubtn" @click="showModelCard()">
          <img
            class="bhImg"
            title="专题"
            src="@/assets/img/left/specialanalyse4.png"
          />
        <div class="menubtn" @click="showModelCard()">
          <img class="bhImg" title="专题" src="@/assets/img/left/specialanalyse4.png" />
          <span>模型</span>
        </div>  
        
        </div>

        <!-- <div class="menubtn" @click="setMenuGrid()">
          <img class="bhImg" title="格网" src="@/assets/img/right/cx-s.png" />
          <span>格网</span>
        </div> -->
        <div class="menubtn" @click="setMenuQuery()">
          <img class="bhImg" title="查询" src="@/assets/img/right/cx-s.png" />
          <img class="bhImg" title="查询" src="@/assets/img/right/queyr.png" />
          <span>查询</span>
        </div>
        <div class="menubtn" @click="setImgUpDate()">
          <input id="imgs" type="file" multiple="multiple" v-show="false" @change="setImgUpload" accept=".jpg,.png" />
          <img class="bhImg" title="上传" src="@/assets/img/right/upload.png" />
          <span>上传</span>
        </div>
        <div class="menubtn" @click="setMenuTool(5)">
          <img class="bhImg" title="分析" src="@/assets/img/right/cx-s.png" />
          <span>分析</span>
        </div>
        <div class="menubtn" @click="setMenuTool(6)">
          <img
            class="bhImg"
            title="特效"
            src="@/assets/img/left/leftnav2.png"
          />
          <img class="bhImg" title="特效" src="@/assets/img/left/leftnav2.png" />
          <span>特效</span>
        </div>
        <div class="menubtn" @click="showSettingCard()">
          <img
            class="bhImg"
            title="设置"
            src="@/assets/img/left/specialeffect4.png"
          />
          <img class="bhImg" title="设置" src="@/assets/img/left/specialeffect4.png" />
          <span>设置</span>
        </div>
    

      </div>
    </div>
    <div class="menutools">
      <plotting
        class="menutool"
        :class="{ menutoolhide: !(!panelActive && selectIndex == 1) }"
        ref="plotting"
      />
      <measure
        class="menutool"
        :class="{ menutoolhide: !(!panelActive && selectIndex == 2) }"
        ref="measure"
      />
      <roam
        class="menutool"
        :class="{ menutoolhide: !(!panelActive && selectIndex == 3) }"
        ref="roam"
      />
      <special
        class="menutool"
        :class="{ menutoolhide: !(!panelActive && selectIndex == 4) }"
        ref="special"
      />
      <analysis
        class="menutool"
        :class="{ menutoolhide: !(!panelActive && selectIndex == 5) }"
        ref="analysis"
      />
      <effects
        class="menutool"
        :class="{ menutoolhide: !(!panelActive && selectIndex == 6) }"
        ref="effects"
      />
      <plotting class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 1) }" ref="plotting" />
      <measure class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 2) }" ref="measure" />
      <roam class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 3) }" ref="roam" />
      <special class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 4) }" ref="special" />
      <analysis class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 5) }" ref="analysis" />
      <effects class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 6) }" ref="effects" />
    </div>
  </div>
</template>
@@ -123,8 +83,7 @@
  width: 0px !important;
}

.menutools {
}
.menutools {}

.menuchangebtn {
  position: absolute;
@@ -153,7 +112,7 @@
  margin: 5px;
  cursor: pointer;
  /* border: 1px solid #999; */
    background-image: url("~@/assets/img/new/menuBg.png");
  background-image: url("~@/assets/img/new/menuBg.png");
  background-size: contain;
  border-radius: 5px;
  overflow: hidden;
@@ -209,16 +168,16 @@
  border-radius: 30px;
  cursor: pointer;
}

.menulist:hover {
  background-image: url("~@/assets/img/new/rightCircle-y.png");
}

.menulist_active {
  border-image-source: radial-gradient(
    59% 79%,
    transparent 0px,
    transparent 100%,
    cyan 100%
  );
  border-image-source: radial-gradient(59% 79%,
      transparent 0px,
      transparent 100%,
      cyan 100%);
  border-image-slice: 1;
  border-width: 1px;
  border-style: solid;
@@ -227,7 +186,7 @@
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 360px;
  height: 200px;
  height: 180px;
  /* border-radius: 5px 5px 5px 30px; */
}
</style>
@@ -250,6 +209,8 @@
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";
export default {
  name: "menulist",
  components: {
@@ -297,18 +258,38 @@
    showSettingCard() {
      this.$store.commit("showSetBox", true);
    },
    showModelCard(){
    showModelCard() {
      this.$store.commit("showModelBox", true);
    },
    showSceneCard(){
    showSceneCard() {
      this.$store.commit("showSceneBox", "");
    },
    setMenuQuery(){
      this.$store.commit("setMenuQuery",true)
    setMenuQuery() {
      this.$store.commit("setMenuQuery", true)
    },
    setGridQuery(){
    setMenuGrid() {
      menuGrid.init();
    },
    setImgUpDate() {
      // this.$store.commit("setImgUpdate",true)

      $("#imgs").click();
    },
    async setImgUpload() {
      var formData = new FormData();
      var fs = document.getElementById("imgs");
      for (var i = 0, c = fs.files.length; i < c; i++) {
        formData.append(fs.files[i].name, fs.files[i]); // name, file
      }
      const data = await Img_Upload(formData)
      if (data.status == 200) {
        this.$message({
          message: "图片上传成功",
          type: "success",
        });
        Bus.$emit("reastLayer",true);
      }
    },
    closeAllHighLight(type) {
      // !(type == "plotting") && this.$refs.plotting.clearHighLight();
      // !(type == "roam") && this.$refs.roam.clearActive();

 src/store/index.js

@@ -43,11 +43,14 @@
    isMeasureFlag: false,
    measureCoordObj: null,
    isShowMeasureCoord: false,
    isShowMenuQuery:false,
    isQueryFalag:false,
    isQyeryCoord:null,
    showZhaiHaiImg:null,
     isshowZhaiHai:false,
    isShowMenuQuery: false,
    isQueryFalag: false,
    isQyeryCoord: null,
    showZhaiHaiImg: null,
    isshowZhaiHai: false,
    isShowImgUpDate: false,
    isshowGrid:false,
    isShowVideo:false,
  },
  mutations: {
    selectedLayer(state, b) {
@@ -109,6 +112,9 @@
    setMenuQuery(state, b) {
      state.isShowMenuQuery = b;
    },
    setImgUpdate(state, b) {
      state.isShowImgUpDate = b;
    },
    // å®šä¹‰å·¥ç¨‹æ ‘数据
    setTreeData(state, data = []) {
      ergodicNode(data);

 static/CimSDK/Workers/image/test03-01.png

 static/data/layerData.js

@@ -12,7 +12,8 @@
        tdtZj: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=",
        tdtToken: "94a34772eb88317fcbf8428e10448561",
        olTdtSl: 'http://t0.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=',
        olTdtBZ: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk='
        olTdtBZ: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=',
        vidoe_URL:"http://192.168.20.83/JiangSu/Data/video/m1.mp4",
    },
    modelData: [
        {

 static/layers.json

@@ -39,6 +39,16 @@
                    "zIndex": 4,
                    "checked": false,
                    "rename": false
                },      {
                    "id": "A349C2B3",
                    "sourceType": "GEOJSON",
                    "type": "ZhongPo",
                    "name": "纵坡",
                    "urls": "/Data/json/ZhongPo.geojson",
                    "alpha": 1,
                    "zIndex": 4,
                    "checked": false,
                    "rename": false
                },
                {
                    "id": "A349C2B4",
@@ -114,6 +124,15 @@
                    "rename": false,
                    "zIndex": 2,
                    "effectsMaxHeight": 0
                },{
                    "id": "482040AD4",
                    "sourceType": "b3dm",
                    "name": "压力测试模型",
                    "urls": "http://192.168.20.83:8866/gisserver/c3dserver/BIM/tileset.json",
                    "checked": false,
                    "rename": false,
                    "zIndex": 2,
                    "effectsMaxHeight": 0
                }
            ],
            "rename": false,

 vue.config.js

@@ -1,43 +1,19 @@
/*
 * @Author: çŽ‹æ—­ 1377869194@qq.com
 * @Date: 2023-05-08 13:52:20
 * @LastEditors: çŽ‹æ—­ 1377869194@qq.com
 * @LastEditTime: 2023-05-08 14:17:30
 * @FilePath: \LFWEB_NEW\vue.config.js
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
const path = require("path")
const resolve = dir => path.join(__dirname, dir)
module.exports = {
  lintOnSave: false,
  publicPath: "./",
  outputDir: process.env.outputDir,
  devServer: {
    host: 'localhost',//本地地址
    port: '8080',//端口号
    hot: true,//热更新自动刷新
    open: true,//自动打开
    overlay: {  //当出现编译错误或警告时，在浏览器中显示全屏覆盖。只显示错误信息不提示警告情况限制是
      warning: false,
      error: true
    },
    //proxy: "http://192.168.20.70:8001/"
    // // é…ç½®è·¨åŸŸ-请求后端的代理接口
    proxy: {
      "/aaaa": {
        target: 'http:localhost/aaaa',//代理地址 å‡¡æ˜¯ä½¿ç”¨/api
        changeOrigin: true,//允许跨域请求
        secure: false,
        pathRewrite: { //重写路径 æ›¿æ¢è¯·æ±‚地址中的指定路径
          ['^/aaaa']: '' //将请求地址中的api替换为空
        }
      }
    }
  },

  configureWebpack: {
    resolve: {
      alias: {
        "@": resolve("src"),
      "/JiangSu": {
        target: "http://localhost:8080/JiangSu", //对应自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/JiangSu": "",
        },
      },
    },
  },

}
};