部分修改

shuishen

2022-09-17 883917446005e323758e2ed416a2fca63bac593a

部分修改

 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-07 14:32:20
 * @LastEditTime: 2022-09-17 16:21:14
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -33,6 +33,14 @@
<script>

var siteEntitylayers = null

let layersObjce = {
    housingEstateLayer: null,
    patrolWagonLayer: null,
    handMachineLayer: null,
    monitoringLayer: null,
    panoramaLayer: null
}

export default {
    name: 'mapBox',
@@ -177,6 +185,21 @@
            siteEntitylayers = new global.DC.VectorLayer('siteEntitylayers')
            global.viewer.addLayer(siteEntitylayers)

            // 图层加入地图

            layersObjce.housingEstateLayer = new global.DC.VectorLayer('housingEstateLayer')
            global.viewer.addLayer(layersObjce.housingEstateLayer)
            layersObjce.patrolWagonLayer = new global.DC.VectorLayer('patrolWagonLayer')
            global.viewer.addLayer(layersObjce.patrolWagonLayer)
            layersObjce.handMachineLayer = new global.DC.VectorLayer('handMachineLayer')
            global.viewer.addLayer(layersObjce.handMachineLayer)
            layersObjce.monitoringLayer = new global.DC.VectorLayer('monitoringLayer')
            global.viewer.addLayer(layersObjce.monitoringLayer)
            layersObjce.panoramaLayer = new global.DC.VectorLayer('panoramaLayer')
            global.viewer.addLayer(layersObjce.panoramaLayer)




            // 判断是否支持图像渲染像素化处理
            if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
@@ -267,6 +290,32 @@
        window.onresize = function () {
            console.log(isEleFullScreen())
        }

        // 注册事件
        this.$EventBus.on('mapAddLayer', (params) => {
            that.mapAddLayer(params.layerName, params.type)
        })

        this.$EventBus.on('mapRemoveLayer', (params) => {
            that.mapRemoveLayer(params.layerName, params.type)
        })

        this.$EventBus.on('mapClearLayer', (params) => {
            that.mapClearLayer(params.layerName, params.type)
        })

        this.$EventBus.on('layerPointAdd', (params) => {
            // eslint-disable-next-line no-unused-vars
            that.layerPointAdd(params.layerName, params.type, params.params, params.incident = (e) => { })
        })

        this.$EventBus.on('layerShow', (params) => {
            that.layerShow(params.layerName, params.flag)
        })

        this.$EventBus.on('flyToPosition', (params) => {
            that.flyToPosition(params.siteJd, params.siteWd, params.siteGd = 0, params.siteHeading = 0, params.sitePitch = -90, params.siteRoll = 0, params.time = 3)
        })
    },
    provide () {
        return {
@@ -314,18 +363,121 @@
            }
        },
        /**
        * 在图层中添加实体(点)
        * @param {*} item 图标
        * @param {*} url 图标地址
        */
         * 在图层中添加实体(点)
         * @param {*} item 图标
         * @param {*} url 图标地址
         */
        addSiteEntity (item, url) {
            const billboard = new global.DC.Billboard(new global.DC.Position(Number(item.lon), Number(item.lat)), url)
            billboard.size = [20, 28]
            billboard.attrParams = item
            siteEntitylayers.addOverlay(billboard)
        },

        test () {
            console.log('map.test(MAP)!!!')
        },

        /**
         * 添加图层
         * @param {*} layerName 图层名称
         * @param {*} type 图层类型
         */
        mapAddLayer (layerName, type) {
            if (type == 'VectorLayer') {
                layersObjce[layerName] = new global.DC.VectorLayer('layerName')
                global.viewer.addLayer(layersObjce[layerName])
            }
        },

        /**
         * 删除图层
         * @param {*} layerName 图层名称
         * @param {*} type 图层类型
         */
        mapRemoveLayer (layerName, type) {
            if (type == 'VectorLayer') {
                layersObjce[layerName].remove()

                layersObjce[layerName] = null
            }
        },

        /**
         * 清空图层
         * @param {*} layerName 图层名称
         * @param {*} type 图层类型
         */
        mapClearLayer (layerName, type) {
            if (type == 'VectorLayer') {
                layersObjce[layerName].clear()
            }
        },

        /**
         * 图层点添加
         * @param {*} layerName 图层名称
         * @param {*} type 添加的点位类型
         * @param {*} params 添加的点位参数（内容、详情）
         * @param {*} incident 添加的点位事件
         */
        layerPointAdd (layerName, type, params, incident) {

            let pointElement

            if (type == "billboard") {
                pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lon), Number(params.lat)), params.url)

                pointElement.size = [20, 28]
            } else if (type == "label") {
                pointElement = new global.DC.Label(new global.DC.Position(Number(params.lon), Number(params.lat), 0), params.url)

                pointElement.setStyle({
                    fillColor: global.DC.Color.CRIMSON,
                    style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                    outlineColor: global.DC.Color.WHITE, // 边框颜色
                    outlineWidth: 8, // 边框大小，
                    font: '14px sans-serif',
                    pixelOffset: { x: 0, y: -24 }
                })
            }
            pointElement.attrParams = params
            layersObjce[layerName].addOverlay(pointElement)
            pointElement.on(global.DC.MouseEventType.CLICK, incident)
        },

        /**
         * 图层显示隐藏
         * @param {*} layerName 图层名称
         * @param {*} flag 显示隐藏
         */
        layerShow (layerName, flag) {
            layersObjce[layerName].show = flag
        },

        /**
         * 飞到指定位置
         * @param {*} siteJd 经度
         * @param {*} siteWd 纬度
         * @param {*} siteGd 高度，默认0
         * @param {*} siteHeading 偏航角度，默认0
         * @param {*} sitePitch 俯仰角度，默认0
         * @param {*} siteRoll 翻转角度，默认0
         * @param {*} time 飞行时间，默认3秒
         */
        flyToPosition (siteJd, siteWd, siteGd, siteHeading, sitePitch, siteRoll, time) {
            global.viewer.flyToPosition(
                new global.DC.Position(
                    Number(siteJd),
                    Number(siteWd),
                    Number(siteGd),
                    Number(siteHeading),
                    Number(sitePitch),
                    Number(siteRoll)
                ),
                function () { },
                time
            )
        }
    },


 src/eventBus/event-bus.js

New file
@@ -0,0 +1,3 @@
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

 src/main.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-07 09:34:58
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-07 10:11:31
 * @LastEditTime: 2022-09-17 15:27:42
 * @FilePath: \srs-police-affairs\src\main.js
 * @Description: 
 * 
@@ -13,6 +13,7 @@
import router from './router/page'
import store from './store'

import { EventBus } from '@/eventBus/event-bus'

import * as echarts from 'echarts'

@@ -49,8 +50,7 @@
DC.use(DcS3M) //安装DcS3M库

Vue.config.productionTip = false


Vue.prototype.$EventBus = EventBus
Vue.use(ElementUI)
Vue.use(VueAxios, axios)


 src/views/house/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-17 11:59:25
 * @LastEditTime: 2022-09-17 17:59:21
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -126,7 +126,97 @@
                            </div>
                        </div>
                    </div>
                    <div class="house-element-info"></div>
                    <div class="house-element-info">
                        <!-- 选择单元 -->
                        <div class="condo">
                            <div class="type">选择单元</div>
                            <div class="type-val"></div>
                        </div>
                        <div class="legend">
                            <div class="type">人口图例</div>
                            <div class="type-val">
                                <div>
                                    <span
                                        style="width: 10px; height: 10px; background: #0E88FF; border-radius: 50%;"
                                    ></span> 流动人口
                                </div>
                                <div>
                                    <span
                                        style="width: 10px; height: 10px; background: #FF796C; border-radius: 50%;"
                                    ></span> 重点人员
                                </div>
                                <div>
                                    <span
                                        style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;"
                                    ></span> 禁毒
                                </div>
                            </div>
                        </div>
                        <div class="legend">
                            <div class="type">房屋图例</div>
                            <div class="type-val">
                                <div>
                                    <span
                                        style="width: 14px; height: 8px; border: 1px solid #3A8B3A;"
                                    ></span> 出租
                                </div>
                                <div>
                                    <span
                                        style="width: 14px; height: 8px; border: 1px solid #2C77BB;"
                                    ></span> 自住
                                </div>
                                <div>
                                    <span
                                        style="width: 14px; height: 8px; border: 1px solid #5C6169;"
                                    ></span> 空置
                                </div>
                                <div>
                                    <span
                                        style="width: 14px; height: 8px; border: 1px solid #CC9456;"
                                    ></span> 商业
                                </div>
                            </div>
                        </div>

                        <div class="floor-num">
                            <div>1~5层</div>
                            <div>6~10层</div>
                            <div>11~15层</div>
                            <div>16~20层</div>
                        </div>

                        <div class="floor-detail">
                            <div>
                                <div class="title">1层：</div>
                                <div class="detail">
                                    <div>
                                        101
                                        <div class="flow"></div>
                                        <div class="focus"></div>
                                        <div class="warning"></div>
                                    </div>
                                    <div>
                                        102
                                        <div class="flow"></div>
                                        <div class="focus"></div>
                                        <div class="warning"></div>
                                    </div>
                                    <div>
                                        103
                                        <div class="flow"></div>
                                        <div class="focus"></div>
                                        <div class="warning"></div>
                                    </div>
                                    <div>
                                        104
                                        <div class="flow"></div>
                                        <div class="focus"></div>
                                        <div class="warning"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="come-out-content"></div>
                <div class="park-content"></div>
@@ -242,7 +332,7 @@
                }
            }

            .floor-content {
            & > .floor-content {
                .ridgepole-info {
                    .content {
                        display: flex;
@@ -336,6 +426,103 @@
                        padding: 10px 0;
                    }
                }

                .house-element-info {
                    .condo,
                    .legend {
                        display: flex;
                        align-items: center;
                        height: 36px;

                        .type {
                            width: 80px;
                        }

                        .type-val {
                            display: flex;
                            flex: 1;

                            & > div {
                                flex: 1;
                                display: flex;
                                align-items: center;

                                & > span {
                                    margin: 0 10px;
                                }
                            }
                        }
                    }

                    .floor-num {
                        display: flex;
                        align-items: center;

                        & > div {
                            margin: 0 4px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 84px;
                            height: 26px;
                            border-radius: 13px;
                            background: #202434;
                        }
                    }

                    .floor-detail {
                        margin-top: 14px;

                        & > div {
                            margin: 8px;
                            height: 36px;
                            line-height: 36px;
                            display: flex;

                            .title {
                                width: 48px;
                            }

                            .detail {
                                flex: 1;
                                display: flex;

                                & > div {
                                    margin: 0 4px;
                                    position: relative;
                                    width: 68px;
                                    height: 36px;
                                    border: 1px solid #ccc;

                                    .flow,
                                    .focus,
                                    .warning {
                                        position: absolute;
                                        right: 4px;
                                        width: 6px;
                                        height: 6px;
                                        border-radius: 50%;
                                    }

                                    .flow {
                                        top: calc((100% - 18px) / 4);
                                        background: rgb(14, 136, 255);
                                    }

                                    .focus {
                                        top: calc((100% - 18px) / 4 * 2 + 6px);
                                        background: rgb(255, 121, 108);
                                    }

                                    .warning {
                                        top: calc((100% - 18px) / 4 * 3 + 12px);
                                        background: rgb(254, 172, 4);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }