代码更新

surprise

2024-01-10 2a960cd2c5b88b143cea4acfaeafb96daef0f29b

代码更新

 src/api/api.js

@@ -61,8 +61,11 @@
  //请求地址
  return service.get("Grid/SelectById?id=" + params);
}


export function Grid_Insert(params) {
  //请求地址
  return service.post("Grid/Insert", params);
}
 
//京办登录
// export function loginById(params) {
//   return request.post('/sign/loginById', params);

 src/assets/img/model/ÉÏ¿ç.png

 src/assets/img/model/¹ÜµÀ.png

 src/assets/js/Layer/drawGrid.js

@@ -1,35 +1,49 @@
import * as turf from '@turf/turf';
import store from '../../../store';
import { Grid_Insert } from '@/api/api'
import Bus from '../../../components/tools/Bus';
var drawGrid = {
    id: "Rectangle",
    ids: [],
    flag: null,
    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++;
            if (step === 3) {
                $this.handler.destroy();
                store.state.isshowGrid= true
                store.state.isshowGrid = true
            }
        }, 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);
    },

    removeRect: function () {
        var entity = Viewer.entities._entities._array;
        for (var i = 0; i < entity.length; i++) {
            if (entity[i].id == 'Rectangle') {
                Viewer.entities.remove(entity[i])
                i--
            }
        }
    },
    renderRect: function (points) {
        var shape = Viewer.entities.add({
@@ -42,16 +56,16 @@
                        var r2 = Cesium.Cartographic.fromCartesian(points[2]);

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

                        this.rectanglePoint = p1;
@@ -72,10 +86,10 @@
                        });

                        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])
                            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);
                    }
@@ -85,76 +99,96 @@
                outlineColor: Cesium.Color.BLACK,
            },
        });
 

        return shape;
    },
    drawPoint: function ( res) {
        var rect = Viewer.entities.getById(this.id);
    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 wCount = res.col + 1, hCount = res.row + 1;
        this.flag = parseInt(res.col) * parseInt(res.col);
        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);
        this.removeRect();
        for (var i = 1; i < hCount; i++) {
            for (var j = 1; j < wCount; j++) {
                var start_west, start_hest;
                if (j == 1) {
                    start_west = p0.geometry.coordinates;
                } else {
                    start_west = turf.destination(p0, wStep * (j - 1), wAngle, op).geometry.coordinates;
                }
                var end_west = turf.destination(p0, wStep * j, wAngle, op).geometry.coordinates;
                var start_hest = turf.destination(start_west, hStep * i, hAngle, op).geometry.coordinates;
                var end_hest = turf.destination(end_west, hStep * i, hAngle, op).geometry.coordinates;
                var val = [
                    [start_west[0], start_west[1],18],
                    [end_west[0], end_west[1],18],
                    [end_hest[0], end_hest[1],18],
                    [start_hest[0], start_hest[1],18],
                    [start_west[0], start_west[1],18]
                ]
                this.setInsertGridData(val, (i * j))
            }
        }
 
        console.log(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.isshowGrid= false;  
    setGridRowCol: function (res) {

        store.state.isshowGrid = false;

        this.drawPoint(res);

    },
    async setInsertGridData(res, num) {
        var obj =
        {
            "type": "Feature",
            "properties":
                { "ID": num, "NAME": "Area8", "REMARK": "" },
            "geometry":
            {
                "type": "Polygon",
                "coordinates": [
                    res
                ]
            }
        }

        const data = await Grid_Insert({ json: JSON.stringify(obj) })
        if (data.status == 200) {
            this.ids.push(data.data)
        }

        if (this.flag == num) {
            var obj = {
                id: new Date().getTime(),
                sourceType: 'DrawGrid',
                name: "新建格网",
                style: {
                    ids: this.ids,
                    sourceType: 'DrawGrid',
                }
            }
            Bus.$emit("addOtherData", "对象", obj);
        }
    }
};
export default drawGrid

 src/assets/js/Layer/mapGeo.js

@@ -1,7 +1,9 @@
var source = []
import { Grid_SelectById } from '@/api/api'
const mapGeo = {
    source1: null,
    type: null,
    feature: [],
    init(res) {
        if (this.type && this.type === res) {
            return this.type = null
@@ -28,7 +30,48 @@
                break;
        }
    },
    addGridLayer(res) {
        var ids = res.style.ids;
        var length = ids.length ;

        this.feature = [];
        for (var i = 0; i < length; i++) {
            this.getGridids(ids[i], length-1, i);
        }
    },
    async getGridids(id, length, index) {
        const data = await Grid_SelectById(id)
        if (data.status == 200) {
            this.feature.push(data.data.features[0])
        }
        console.log(index,length)
        if (index == length) {
            var feature = {
                "type": "FeatureCollection",
                "name": "wangge",
                "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                "features": this.feature,
            }
            console.log(feature);
            this.addGridMenuGeoJson(feature)
        }
    },
    addGridMenuGeoJson(res){
        console.log(res);
        var data = Cesium.GeoJsonDataSource.load(res, //要加载的 url、GeoJSON å¯¹è±¡æˆ– TopoJSON å¯¹è±¡ã€‚
            {
                stroke: Cesium.Color.ORANGE, //折线和多边形轮廓的默认颜色。
                fill: Cesium.Color.WHITE.withAlpha(0.2), //多边形内部的默认颜色。
                strokeWidth: 3, //折线和多边形轮廓的默认宽度。
            }
        )
        data.then((dataSource) => {
            dataSource.name = "格网"
            Viewer.dataSources.add(
                dataSource
            );
        })
    },
    addZhongPoGeoJson(res) {
        var url = layerData.config.Model_URL + res.urls;
        var data = Cesium.GeoJsonDataSource.load(url, //要加载的 url、GeoJSON å¯¹è±¡æˆ– TopoJSON å¯¹è±¡ã€‚
@@ -49,16 +92,16 @@
        if (this.type && this.type == res) {
            this.type = null
        }
      
            if (!res.type) return;
            Viewer.dataSources.remove(Viewer.dataSources.getByName(res.type)[0])
      

        if (!res.type) return;
        Viewer.dataSources.remove(Viewer.dataSources.getByName(res.type)[0])


    },

    addzhaiHaiGeoJson(res) {
        var url1 = layerData.config.Model_URL + res.urls ;
     
        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 å¯¹è±¡ã€‚
            {
@@ -74,7 +117,7 @@
            );
        })

       

    },

    addZhongQuXianGeoJson(res) {

 src/components/left/layerTree/Layer.vue

@@ -100,6 +100,7 @@
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";
import mapGeo from "../../../assets/js/Layer/mapGeo";
// å·¥ç¨‹æ ‘工具
let _treeTool;
function arrGroup(arr, fn) {
@@ -855,7 +856,9 @@
        mapOL.addLayerData(res);
      } else if (res.sourceType == "imgUp" && res.checked) {
        model.addImgUpLayer(res);
      }
      }else if(res.sourceType == "DrawGrid" && res.checked) {
  Â  Â  Â  mapGeo.addGridLayer(res);
  Â  Â  }
    },
    // æ·»åŠ æ¼”示动画
    editDemoAnimation() {

 src/components/menu/menulist.vue

@@ -186,7 +186,7 @@
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 360px;
  height: 180px;
  height: 230px;
  /* border-radius: 5px 5px 5px 30px; */
}
</style>

 src/utils/request.js

@@ -2,7 +2,7 @@
import axios from "axios";

const service = axios.create({
    baseURL: layerData.config.BASE_URL, // api的base_url
    baseURL: layerData.config.api_url, // api的base_url
    timeout: -1, // è¯·æ±‚超时时间

});

 static/data/layerData.js

@@ -14,6 +14,7 @@
        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=',
        vidoe_URL:"http://192.168.20.83/JiangSu/Data/video/m1.mp4",
        api_url: "http://localhost:8080/JiangSu"
    },
    modelData: [
        {
@@ -47,6 +48,16 @@
            name: '锥桶',
            url: '/Data/glb/锥桶.glb',
            imgUrl: '锥桶.png'
        },{
            id: 'md7',
            name: '上跨',
            url: '/Data/glb/上跨.glb',
            imgUrl: '上跨.png'
        },{
            id: 'md8',
            name: '管道',
            url: '/Data/glb/管道.glb',
            imgUrl: '管道.png'
        }
    ]
}

 static/image/ÉÏ¿ç.png

 static/image/¹ÜµÀ.png