北京经济技术开发区经开区虚拟城市项目-【前端】--政府服务中心-1号屏Web
Surpriseplus
2023-10-07 90b0218652f797d2c22305f4de007b20681ed4a7
代码更新
已修改6个文件
454 ■■■■ 文件已修改
src/assets/js/mapMsg.js 13 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/js/rpc.js 364 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/index.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/menu/leftMenu.vue 50 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/poplayer/location.vue 24 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/store.js 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/js/mapMsg.js
@@ -1,6 +1,6 @@
import mapData from "../../../static/mapData";
import { yzAdapter_Navigation } from "../../api/api";
import rpc from "./rpc";
import vueEvents from '@/utils/vueEvent.js'
window.mapMsg = {
    setTimeInterval: null,
    testMsg(res) {
@@ -16,16 +16,16 @@
    init() {
        var that = this;
        window.addEventListener("message", res => {
            console.log('message', res)
            if (res.data.status === "ok") {
                if (this.setTimeInterval) {
                    clearInterval(this.setTimeInterval);
                    this.setTimeInterval = null;
                    //
                }
            if (res.data.status === "ok") {
                that.setMsgMatching(res.data.params);
            }
            this.setTimeInterval = setTimeout((res) => {
                vueEvents.$emit("queryData", false);
                rpc.setClearAllMsg();
                rpc.setLineRoaming()
                clearInterval(this.setTimeInterval);
@@ -36,7 +36,6 @@
    },
    //消息匹配
    setMsgMatching(result) {
        console.log("message", result)
        var param = result.message;
        var rest = mapData.msgMach.rest;
        var rom = mapData.msgMach.lineRoam;
@@ -49,6 +48,8 @@
        // 地图复位
        if (valRest.length > 0) {
            vueEvents.$emit("queryData", false);
            rpc.setClearAllMsg();
            rpc.setMapRest();
            return
@@ -60,6 +61,8 @@
            }
        })
        if (valRom.length > 0) {
            vueEvents.$emit("queryData", false);
            rpc.setClearAllMsg();
            rpc.setLineRoaming()
            return
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,
@@ -19,24 +24,26 @@
    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,201 +52,172 @@
                    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),//地块
            findAddressCandidates(res) //地块
        ]).then(result => {
            let objArr = []
            //企业
            var EntArr = result[0].result.filter((item) => {
            var that = this;
            store.queryLayer.data = [];
            //企v业
            var EntArr = result[0].result.filter(item => {
                return item.entName.includes(res);
            })
            EntArr.forEach((val) => {
            });
            EntArr.forEach(val => {
                let itemObj = {
                    type: "企业",
                    name: val.entName,
                    address: val.address,
                    lon: val.x,
                    lat: val.y,
                    lat: val.y
                };
                objArr.push(itemObj);
                that.objArr.push(itemObj);
            });
            //园区
            var YQArr = result[1].candidates.filter((item) => {
            var YQArr = result[1].candidates.filter(item => {
                return item.attributes.YQmingchen.includes(res);
            });
            YQArr.forEach((val) => {
            YQArr.forEach(val => {
                let itemObj = {
                    type: "园区",
                    name: val.attributes.YQmingchen,
                    address: val.attributes.YQdizhi,
                    lon: val.location.x,
                    lat: val.location.y,
                    lat: val.location.y
                };
                objArr.push(itemObj);
                that.objArr.push(itemObj);
            });
            //地块
            var LandArr = result[2].candidates.filter((item) => {
            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) => {
            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,
                    lat: val.location.y
                };
                objArr.push(itemObj);
                that.objArr.push(itemObj);
            });
            console.log(EntArr);
            console.log(YQArr);
            console.log(LandArr);
            console.log(objArr);
            debugger
        })
            if (index == length) {
                if (that.objArr.length <= 0) {
        // var data = await
        // if (data.candidates.length <= 0) {
        //     this.setClearAllMsg();
        //     this.getLandmass(res)
        // } else {
        //     this.getFuzzyQueryData(data.candidates, index, length, 1)
        // }
                    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);
            }
        });
    },
    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 (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)
            // }
        // 划线
        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({
                        x: parseFloat(point[0]),
                        y: parseFloat(point[1]),
                        z: 0
                    });
                }
                if (that.lacationLine) {
                    sgworld.Creator.DeleteObject(that.lacationLine);
                    that.lacationLine = null;
                }
                that.lacationLine = sgworld.Creator.createPolyline(
                    geometry,
                    "#ff0000",
                    1,
                    0,
                    "线"
                );
            }
        });
    },
    async getAllEntity(res) {
        var obj = {
            request: "bdPoi",
            query: res,
            output: "json",
            coord: "cgcs2000",
            page_num: 0,
            page_size: 20,
        }
        const data = await yzAdapter_Navigation(obj)
        debugger
    },
    read(wkt) {
        var regExes = {
            typeStr: /^\s*(\w+)\s*\(\s*(.*)\s*\)\s*$/,
@@ -247,7 +225,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
@@ -314,7 +292,7 @@
                    coords = points[i].trim().split(regExes.spaces);
                    components.push([
                        Number.parseFloat(coords[0]),
                        Number.parseFloat(coords[1]),
                        Number.parseFloat(coords[1])
                    ]);
                }
                return components;
@@ -339,7 +317,7 @@
                    coords = points[i].trim().split(regExes.spaces);
                    components.push([
                        Number.parseFloat(coords[0]),
                        Number.parseFloat(coords[1]),
                        Number.parseFloat(coords[1])
                    ]);
                }
                return components;
@@ -416,7 +394,7 @@
                    components.push(parse$1.polygon(polygon));
                }
                return components;
            },
            }
        };
        var geometry, type, str;
@@ -441,22 +419,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
        });
    },
@@ -468,7 +445,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;
@@ -480,47 +457,55 @@
            data.height = 75;
            data.speed = 25;
            that.LineRoaming = sgworld.Creator.createDynamicObject(data, null, (res) => {
            that.LineRoaming = sgworld.Creator.createDynamicObject(
                data,
                null,
                res => {
                if (res.time >= res.Totaltime) {
                    that.setCloseLineRomaing();
                    that.setMapRest()
                        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 });
                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) {
@@ -569,11 +554,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) {
@@ -622,13 +606,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(
@@ -636,38 +620,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();
        }, 5000);
    },
    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(
@@ -695,8 +679,8 @@
            window.Viewer.scene.camera.setView({
                orientation: {
                    heading: heading,
                    pitch: Cesium.Math.toRadians(-5),
                },
                    pitch: Cesium.Math.toRadians(-5)
                }
            });
            if (
                Cesium.JulianDate.compare(
@@ -781,13 +765,17 @@
            this.instance && this.instance.$destroy();
            this.instance = null;
        }
        if (this.lacationLine) {
            sgworld.Creator.DeleteObject(this.lacationLine);
            this.lacationLine = null;
        }
        // 轨迹线
        this.setClosePathLine();
        // 漫游
        this.setCloseLineRomaing();
        //定点漫游
        this.setClearPointFly()
        vueEvents.$emit('queryLayer', false)
        this.setClearPointFly();
        vueEvents.$emit("queryLayer", false);
    },
    setClearPointFly() {
        if (this.pointerFly) {
@@ -798,13 +786,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;
src/components/index.vue
@@ -5,7 +5,7 @@
      v-show="false"
    />
    <bottommenu />
    <left-menu v-if="queryShow"></left-menu>
    <left-menu></left-menu>
    <viewer class="mapViewer" />
  </div>
</template>
src/components/menu/leftMenu.vue
@@ -1,12 +1,26 @@
<template>
  <div class="menuBox">
    <ul>
    <div v-if="list.length==0 && val==null">
    </div>
    <div
      class="boxCntent"
      v-else-if="list.length == 0"
    >{{val }} 数据正在补充中</div>
    <ul
      class="boxCntent"
      v-if="list.length != 0"
    >
      <li v-for="(item,index) in list">
        <div>
          {{item.attributes.YQmingchen }}
          {{item.name}}
        </div>
        <div>
          {{item.attributes.YQdizhi}}
        <div v-if="item.address">
          地址: {{item.address}}
        </div>
        <div v-if="item.code">
          地块编号: {{item.code}}
        </div>
      </li>
    </ul>
@@ -15,15 +29,30 @@
<script>
import store from "@/utils/store";
import vueEvents from '@/utils/vueEvent.js'
export default {
  data() {
    return {
      list: []
      list: [],
      val: null
    }
  },
  mounted() {
    vueEvents.$on('queryData', (res) => {
      this.list = [];
      this.val = null;
      if (res) {
    this.list = store.queryLayer.data;
        if (store.queryLayer.data) {
          this.list = store.queryLayer.data
        }
        this.val = store.queryLayer.val
      }
    })
  }
}
@@ -31,8 +60,6 @@
<style>
.menuBox {
  padding: 1%;
  border-radius: 3px;
  background-image: url("~@/assets/img/new/listbg.png");
  background-size: 100% 100%;
@@ -41,11 +68,14 @@
  bottom: 45px;
  right: 310px;
  width: 300px;
}
li {
  color: white;
  font-family: Source Han Sans SC;
  font-size: 16px;
}
.boxCntent {
  margin: 1%;
}
li {
  padding: 10px;
  border: 1px solid gray;
  margin-top: 2px;
src/components/poplayer/location.vue
@@ -7,21 +7,19 @@
      ></div>
      <div class="content">
        <div class="ssdw">{{ state.list.name }}</div>
        <div v-if="state.list.POITYPE == 'dikuaixinxi'">
          <div class="dz">
            {{ state.list.name }}
          </div>
          <div class="dz">
            {{ state.list.yijilei }}
          </div>
          <div class="dz">
            {{ state.list.yongdixing }}
          </div>
        </div>
        <div
          v-else
          class="dz"
          class="lxr"
          v-if=" state.list.address"
        >地址:{{ state.list.address }}</div>
        <div
          class="lxr"
          v-if=" state.list.code"
        >地块编号:{{ state.list.code }}</div>
        <div
          class="lxr"
          v-if=" state.list.area"
        >地块面积:{{ state.list.area }} 平方米</div>
      </div>
    </div>
  </div>
src/utils/store.js
@@ -11,6 +11,7 @@
    queryLayer: {
        data: null,
        isShow: false,
        val: null,
    },
    setPoplayerListAction(newValue) {
        if (this.debug) { }