地块展示效果优化

Surpriseplus

2023-10-08 b0623031f7839e3f5b061f712c6ead91f57db5cf

 src/assets/js/rpc.js

@@ -2,8 +2,13 @@
import coord from "@/components/poplayer/coord";
import store from "@/utils/store";
import mapData from "../../../static/mapData";
import { liushisijiayuanqudizhibianmafuwu, findAddressCandidates, getDiKuanFanWei, ent_selectByName } from "../../api/api";
import vueEvents from '@/utils/vueEvent.js'
import {
    liushisijiayuanqudizhibianmafuwu,
    findAddressCandidates,
    getDiKuanFanWei,
    ent_selectByName
} from "../../api/api";
import vueEvents from "@/utils/vueEvent.js";
let PoiLayerConstructor = Vue.extend(coord);
const rpc = {
    timeout: 500,
@@ -15,28 +20,30 @@
    marksIndex: null,
    pitchValue: null,
    unsubscribeTicks: null,
    LineRoaming: null,//线路漫游
    dataQuery: [],//关键字查询结果
    pointerFly: null,//定点漫游
    LineRoaming: null, //线路漫游
    dataQuery: [], //关键字查询结果
    pointerFly: null, //定点漫游
    isShow: false,
    objArr: [],
    //关键字查询
    getFuzzyQuery(res) {
        if (!res.baidu_keys) return
        store.queryLayer.val = res.message;
        this.setClearAllMsg();
        if (!res.baidu_keys) return;
        var flag = true;
        if (this.dataQuery.length > 0) {

            if (res.message.indexOf('第') > -1 && res.message.indexOf('条') > -1) {
                var data = mapData.msgMach.localPage
            if (res.message.indexOf("第") > -1 && res.message.indexOf("条") > -1) {
                var data = mapData.msgMach.localPage;
                flag = false;
                var val_Data = null;
                for (var i in data) {
                    if (res.message.indexOf(data[i]) > -1) {

                        this.setClearAllMsg();
                        val_Data = this.dataQuery[i];
                        setTimeout(() => {
                            vueEvents.$emit('queryLayer', true)
                            this.setLocation(this.dataQuery[i])
                            return
                            this.setLocation(val_Data);
                        }, 1000);
                        break;
                        return;
                    }
                }
            } else {
@@ -45,161 +52,173 @@
                    for (var j = 0; j < length; j++) {
                        var world = keyWorld[j].word;
                        if (name.indexOf(world) > -1) {

                            this.setClearAllMsg();
                            // setTimeout(() => {
                            vueEvents.$emit('queryLayer', true)
                            this.setLocation(this.dataQuery[i])
                            flag = false;
                            this.setLocation(this.dataQuery[i]);
                            break;
                            return
                            // }, 1000);


                            return;
                        }
                    }
                }
            }


        }
        if (!flag) {
            return;
        }
        var keyWorld = res.baidu_keys.results;
        console.log("baidu_keys", res.baidu_keys)

        if (keyWorld) {
            var length = keyWorld.length;
            vueEvents.$emit('queryLayer', false)

            this.dataQuery = [];
            this.objArr = [];
            for (var i = 0; i < length; i++) {
                var world = keyWorld[i].word;
                console.log("world", world)
                console.log("world", world);
                this.setFuzzyQueryData(world, i, length - 1);
            }
        }

    },
    async setFuzzyQueryData(res, index, length) {
        Promise.all([
            ent_selectByName(res),//企业
            liushisijiayuanqudizhibianmafuwu(res),//园区
            findAddressCandidates(res),//地块
            ent_selectByName(res), //企业
            liushisijiayuanqudizhibianmafuwu(res), //园区
            findAddressCandidates(res) //地块
        ]).then(result => {
            var valdata = result[0];
            var valdata1 = result[1];
            if (valdata.length > 0) {
            var that = this;
            store.queryLayer.data = [];
            //企业
            var EntArr = result[0].result.filter(item => {
                return item.entName.includes(res);
            });
            EntArr.forEach(val => {
                let itemObj = {
                    type: "企业",
                    name: val.entName,
                    address: val.address,
                    lon: val.x,
                    lat: val.y
                };
                that.objArr.push(itemObj);
            });
            //园区
            var YQArr = result[1].candidates.filter(item => {
                return item.attributes.YQmingchen.includes(res);
            });
            YQArr.forEach(val => {
                let itemObj = {
                    type: "园区",
                    name: val.attributes.YQmingchen,
                    address: val.attributes.YQdizhi,
                    lon: val.location.x,
                    lat: val.location.y
                };
                that.objArr.push(itemObj);
            });
            //地块
            var LandArr = result[2].candidates.filter((item) => {
                return item.attributes.QYMC.includes(res);
            })
            // 结果根据QYMC从短到长排序
            LandArr.sort((a, b) => (b.attributes.QYMC.length === a.attributes.QYMC.length ? 0 : a.attributes.QYMC.length > b.attributes.QYMC.length ? 1 : -1))
            LandArr.forEach((val) => {
                let itemObj = {
                    type: "地块",
                    name: val.attributes.QYMC,
                    area: val.attributes.area,
                    code: val.attributes["地块编"],
                    lon: val.location.x,
                    lat: val.location.y,
                };
                that.objArr.push(itemObj);
            });
            if (index == length) {
                if (that.objArr.length <= 0) {

                    vueEvents.$emit("queryData", true);
                    return;
                }
                var num = that.objArr.length;
                for (var i = 0; i < num; i++) {
                    if (i < 6) {
                        that.dataQuery.push(that.objArr[i]);
                    }
                }
                store.queryLayer.data = that.dataQuery;
                that.setClearAllMsg();
                setTimeout(() => {
                    vueEvents.$emit("queryData", true);
                    that.setLocation(that.dataQuery[0]);
                }, 1000);
            }
            if (valdata1.length > 0) {

            }

        })


        // var data = await 
        // if (data.candidates.length <= 0) {
        //     this.setClearAllMsg();
        //     this.getLandmass(res)
        // } else {
        //     this.getFuzzyQueryData(data.candidates, index, length, 1)
        // }
        });
    },

    getFuzzyQueryData(res, index, length, flag) {
        if (!res || res.length <= 0) return
        if (!res || res.length <= 0) return;
        for (var i in res) {
            if (this.dataQuery.length < 6) {
                this.dataQuery.push(res[i])
                this.dataQuery.push(res[i]);
            }
        }
        if (index == length) {
            if (this.dataQuery.length <= 0) {
                vueEvents.$emit('queryLayer', false)
                return
                vueEvents.$emit("queryData", false);
                return;
            }


            store.queryLayer.data = this.dataQuery;
            this.setClearAllMsg();
            vueEvents.$emit('queryLayer', true)
            setTimeout(() => {

                this.setLocation(this.dataQuery[0])
            this.setClearAllMsg();

            setTimeout(() => {
                vueEvents.$emit("queryData", true);
                this.setLocation(this.dataQuery[0]);
            }, 1000);
        }
    },
    // 显示地块范围
    getLandmass(res) {

        let that = this;
        findAddressCandidates(res).then((locationInfo) => {
        if (res.type == "园区") {

        } else if (res.type == "地块") {

            getDiKuanFanWei(res.lon, res.lat).then(response => {
                let center = { lon: 0, lat: 0 };
                let polygon = that.read(response.geometry);
                if (polygon.length > 0) {
                    var geometry = [];
                    let points = polygon[0].split(",");
                    for (let i = 0; i < points.length; i++) {
                        let point = points[i].replace(/^\s+|\s+$/g, "").split(" ");
                        // center.lon += parseFloat(point[0]) / points.length;
                        // center.lat += parseFloat(point[1]) / points.length;
                        geometry.push(parseFloat(point[0]), parseFloat(point[1]))

                    }
                    that.setLacationLineClear()
                    var position = Cesium.Cartesian3.fromDegreesArray(geometry)

                    that.lacationLine = Viewer.entities.add({
                        name: "立体墙效果",
                        wall: {
                            positions: position,


            // if (locationInfo.candidates.length > 0) {
            //     // 划线
            //     getDiKuanFanWei(
            //         locationInfo.candidates[0].location.x,
            //         locationInfo.candidates[0].location.y
            //     ).then((response) => {
            //         let center = { lon: 0, lat: 0 };
            //         let polygon = that.read(response.geometry);
            //         if (polygon.length > 0) {
            //             var geometry = [];
            //             let points = polygon[0].split(",");
            //             for (let i = 0; i < points.length; i++) {
            //                 let point = points[i].replace(/^\s+|\s+$/g, "").split(" ");
            //                 center.lon += parseFloat(point[0]) / points.length;
            //                 center.lat += parseFloat(point[1]) / points.length;
            //                 geometry.push({
            //                     x: parseFloat(point[0]),
            //                     y: parseFloat(point[1]),
            //                     z: 0,
            //                 });
            //             }
            //             if (that.lacationLine) {
            //                 sgworld.Creator.DeleteObject(that.lacationLine);
            //                 line = null;
            //             }
            //             that.lacationLine = sgworld.Creator.createPolyline(
            //                 geometry,
            //                 "#ff0000",
            //                 1,
            //                 0,
            //                 "线"
            //             );
            //         }
            //     });

            //     var objdata = {
            //         POITYPE: "dikuaixinxi",
            //         name: locationInfo.candidates[0].attributes.QYMC,
            //         yijilei: locationInfo.candidates[0].attributes.yijilei,
            //         yongdixing: locationInfo.candidates[0].attributes["用地性"],
            //         // LXR: locationInfo.candidates[0].name,
            //         // DIZHI: locationInfo.candidates[0].address,
            //         lat: locationInfo.candidates[0].location.y,
            //         lon: locationInfo.candidates[0].location.x,
            //     };
            //     // //添加定位弹窗
            //     that.setAddPointLocation(objdata);
            //     // 弹框
            //     console.log(objdata);
            //     debugger;
            // } else {
            //     this.getAllEntity(res)
            // }
        });
    },
    async getAllEntity(res) {
        var obj = {
            request: "bdPoi",
            query: res,
            output: "json",
            coord: "cgcs2000",
            page_num: 0,
            page_size: 20,
                            material: new Cesium.DynamicWallMaterialProperty({
                                color: Cesium.Color.RED,
                                duration: 4000
                            }),
                            // 设置高度
                            maximumHeights: Array(position.length).fill(80),
                            minimumHeights: Array(position.length).fill(10),
                        }
                    })
                }
            });
        }
        const data = await yzAdapter_Navigation(obj)
        debugger
    },

    read(wkt) {
        var regExes = {
            typeStr: /^\s*(\w+)\s*\(\s*(.*)\s*\)\s*$/,
@@ -207,7 +226,7 @@
            spaces: /\s+/,
            parenComma: /\)\s*,\s*\(/,
            doubleParenComma: /\)\s*\)\s*,\s*\(\s*\(/, // can't use {2} here
            trimParens: /^\s*\(?(.*?)\)?\s*$/,
            trimParens: /^\s*\(?(.*?)\)?\s*$/
        };
        /**
         * Object with properties corresponding to the geometry types. Property values
@@ -274,7 +293,7 @@
                    coords = points[i].trim().split(regExes.spaces);
                    components.push([
                        Number.parseFloat(coords[0]),
                        Number.parseFloat(coords[1]),
                        Number.parseFloat(coords[1])
                    ]);
                }
                return components;
@@ -299,7 +318,7 @@
                    coords = points[i].trim().split(regExes.spaces);
                    components.push([
                        Number.parseFloat(coords[0]),
                        Number.parseFloat(coords[1]),
                        Number.parseFloat(coords[1])
                    ]);
                }
                return components;
@@ -376,7 +395,7 @@
                    components.push(parse$1.polygon(polygon));
                }
                return components;
            },
            }
        };

        var geometry, type, str;
@@ -401,22 +420,21 @@
        return geometry;
    },


    //地图复位
    setMapRest() {
        const data = mapData.mapRest;
        sgworld.Navigate.flyToPointsInterest({
            destination: {
                "x": data.lng,
                "y": data.lat,
                "z": data.alt,
                x: data.lng,
                y: data.lat,
                z: data.alt
            },
            orientation: {
                heading: data.heading,
                pitch: data.pitch,
                roll: data.roll,
                roll: data.roll
            },
            duration: 8, //飞行时间8s
            duration: 8 //飞行时间8s
        });
    },

@@ -428,7 +446,7 @@
        this.setShowPathLine(valdata);
        var geom = [];
        for (var i in valdata) {
            geom.push(valdata[i].lng, valdata[i].lat, valdata[i].height)
            geom.push(valdata[i].lng, valdata[i].lat, valdata[i].height);
        }

        var that = this;
@@ -440,47 +458,55 @@
            data.height = 75;
            data.speed = 25;

            that.LineRoaming = sgworld.Creator.createDynamicObject(data, null, (res) => {
                if (res.time >= res.Totaltime) {
                    that.setCloseLineRomaing();
                    that.setMapRest()

            that.LineRoaming = sgworld.Creator.createDynamicObject(
                data,
                null,
                res => {
                    if (res.time >= res.Totaltime) {
                        that.setCloseLineRomaing();
                        that.setMapRest();
                    }
                }
            })
        })
            );
        });
    },
    //点击获取坐标
    clickToCoordinates() {
        const handlerClick = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
        handlerClick.setInputAction((event) => {

            let cartesian = Viewer.camera.pickEllipsoid(event.position, Viewer.scene.globe.ellipsoid);
        const handlerClick = new Cesium.ScreenSpaceEventHandler(
            Viewer.scene.canvas
        );
        handlerClick.setInputAction(event => {
            let cartesian = Viewer.camera.pickEllipsoid(
                event.position,
                Viewer.scene.globe.ellipsoid
            );
            if (cartesian == undefined) {
                console.log('没有获取到坐标')
                console.log("没有获取到坐标");
            } else {
                // 空间坐标转世界坐标(弧度)
                let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                // 弧度转为角度（经纬度）
                let lon = Cesium.Math.toDegrees(cartographic.longitude);  // 经度值
                let lat = Cesium.Math.toDegrees(cartographic.latitude);   // 纬度值
                console.log('经纬度是：', { x: lon, y: lat });
                let lon = Cesium.Math.toDegrees(cartographic.longitude); // 经度值
                let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度值
                console.log("经纬度是：", { x: lon, y: lat });
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    //定位弹窗
    setLocation(res) {

        var objdata = {
            name: res.attributes.YQmingchen,
            address: res.attributes.YQdizhi,
            // LXR: res.name,
            // DIZHI: res.address,
            lat: res.location.y,
            lon: res.location.x
            name: res.name,
            address: res.address,
            area: res.area,
            code: res.code,
            lat: res.lat,
            lon: res.lon
        };

        //添加定位弹窗
        this.setAddPointLocation(objdata);
        //范围调用
        this.getLandmass(res);
    },

    setAddPointLocation(res) {
@@ -529,11 +555,10 @@
            duration: 3
        });
        setTimeout(() => {
            window.Viewer.entities.remove(this.position)

            window.Viewer.entities.remove(this.position);
        }, 1000);
        setTimeout(() => {
            this.setPointFly(res)
            this.setPointFly(res);
        }, 4000);
    },
    setflyExtent(res) {
@@ -582,13 +607,13 @@
                res[this.marksIndex].height
            );

            console.log(1, pitch)
            console.log(1, pitch);
            window.Viewer.scene.camera.setView({
                destination: endPosition,
                orientation: {
                    heading: heading,
                    pitch: Cesium.Math.toRadians(-5),
                },
                    pitch: Cesium.Math.toRadians(-5)
                }
            });
            if (
                Cesium.JulianDate.compare(
@@ -596,38 +621,38 @@
                    window.Viewer.clock.stopTime
                ) >= 0
            ) {
                this.unsubscribeTicks = window.Viewer.clock.onTick.removeEventListener(Exection);
                this.unsubscribeTicks = window.Viewer.clock.onTick.removeEventListener(
                    Exection
                );
                this.changeCameraHeading(res);
            }


        }
        };
        window.Viewer.clock.onTick.addEventListener(Exection);
    },
    setPointFly(res) {
        var that = this;
        this.pointerFly = window.sgworld.Analysis.setPointFly({
        that.pointerFly = window.sgworld.Analysis.setPointFly({
            position: Cesium.Cartesian3.fromDegrees(res.lon, res.lat, 200),
            // scale: 0,
            hideImage: true,
            time: 120,
            limitTime: true,
            time: 4,
            limitAngel: 120,
            end: () => {
                that.pointerFly = null
                that.pointerFly = null;
            }

        })

        });
        setTimeout(() => {
            this.setClearPointFly();
        }, 8000);
    },
    changeCameraHeading(res) {

        var nextIndex = this.marksIndex + 1;
        if (this.marksIndex == res.length - 1) {
            if (this.unsubscribeTicks) {
                window.Viewer.clock.onTick.removeEventListener(this.unsubscribeTicks);
                this.unsubscribeTicks = null;
            }
            return
            return;
        }
        // 计算两点之间的方向
        var heading = this.bearing(
@@ -655,8 +680,8 @@
            window.Viewer.scene.camera.setView({
                orientation: {
                    heading: heading,
                    pitch: Cesium.Math.toRadians(-5),
                },
                    pitch: Cesium.Math.toRadians(-5)
                }
            });
            if (
                Cesium.JulianDate.compare(
@@ -741,13 +766,23 @@
            this.instance && this.instance.$destroy();
            this.instance = null;
        }
        //地块
        this.setLacationLineClear()
        // 轨迹线
        this.setClosePathLine();
        // 漫游
        this.setCloseLineRomaing();
        //定点漫游
        this.setClearPointFly()
        vueEvents.$emit('queryLayer', false)
        this.setClearPointFly();
        vueEvents.$emit("queryLayer", false);
    },


    setLacationLineClear() {
        if (this.lacationLine) {
            Viewer.entities.remove(this.lacationLine)
            this.lacationLine = null;
        }
    },
    setClearPointFly() {
        if (this.pointerFly) {
@@ -758,13 +793,13 @@
    setCloseLineRomaing() {
        if (this.LineRoaming) {
            this.LineRoaming && this.LineRoaming.exit();
            this.LineRoaming = null
            this.LineRoaming = null;
        }
    },
    setClosePathLine() {
        if (this.pathLayer) {
            this.pathLayer && this.pathLayer.deleteObject();
        }
    },
    }
};
export default rpc;