config/dev.env.js

@@ -5,8 +5,8 @@
    // BASE_API: '"http://10.142.119.232:8100"',
    // IMG_API: '"http://10.142.119.232:8100/upload/"',

  BASE_API: '"http://222.92.213.22:8006/zhongtai"',
  IMG_API: '"http://222.92.213.22:8006/zhongtai/upload/"',
  // BASE_API: '"http://222.92.213.22:8006/zhongtai"',
  // IMG_API: '"http://222.92.213.22:8006/zhongtai/upload/"',
  //
  // BASE_API: '"https://sinanoaq.cn:8100"',
  //  BASE_API: '"http://127.0.0.1:8100"',
@@ -16,8 +16,11 @@
  // IMG_API: '"https://sinanoaq.com:8100/upload/"',
  //   BASE_API: '"http://220.171.99.118:4100"',
  //   IMG_API: '"http://220.171.99.118:4100/upload/"',
  //     BASE_API: '"http://192.168.0.35:8006"',
  //     IMG_API: '"http://192.168.0.35:8006/upload/"',
      // BASE_API: '"http://192.168.0.35:8006"',
      // IMG_API: '"http://192.168.0.35:8006/upload/"',
      BASE_API: '"http://192.168.0.35:8006"',
      IMG_API: '"http://192.168.0.35:8006/upload/"',

    // BASE_API: '"http://222.92.213.21:8006/zhongtai"',
    // IMG_API: '"http://222.92.213.21:8006/zhongtai/upload/"',
    NANO_API: '"http://127.0.0.1:8081/zhongtaiexam"',

 public/data/plots_namisuo.geojson

@@ -8,7 +8,7 @@
        "style": { "text": "F号楼", "clampToGround": true },
        "attr": {
          "name": "F号楼",
          "id": "cabe679c-373b-4890-ae0c-7a7061f89dfd"
          "id": "1"
        }
      },
      "geometry": {
@@ -57,7 +57,7 @@
      "type": "Feature",
      "properties": {
        "type": "polygon",
        "style": { "text": "E号楼", "clampToGround": true, "color": "#ff0000" },
        "style": { "text": "E号楼", "clampToGround": true },
        "attr": {
          "name": "E号楼",
          "id": "7a3094db-d227-4b3f-bf35-1ce64c365e42"

 public/wutu3d/cesium-wutu/wutu3d.js

@@ -1961,10 +1961,12 @@
                }, o.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
            },
            endDraw: function () {
                debugger
                if (!this._enabled) return this;
                this._positions_draw.length < this._minPointNum || (this.updateAttrForDrawing(), this.disable())
            },
            finish: function () {
                debugger
                var e = this.entity;
                e.editing = this.getEditClass(e), e._positions_draw = this.getDrawPosition(), e.polyline.positions = new o.CallbackProperty(function (t) {
                    return e._positions_draw

 src/api/fourColorMap.js

对比新文件
@@ -0,0 +1,24 @@
import {getToken} from "../utils/auth";
import request from '@/utils/request'

export function addMap(data) {
    return request({
        headers:{
            'Authorization': getToken()
        },
        url: process.env.BASE_API+'/fourColorMap/add2',
        method: 'post',
        data
    });
}

export function getMap(params) {
    return request({
        headers:{
            'Authorization': getToken()
        },
        url: process.env.BASE_API+'/fourColorMap/get/list2',
        method: 'post',
        params:params?params:{}
    });
}

 src/components/Tab/Plot.vue

@@ -79,6 +79,7 @@
</template>

<script>
    import { addMap } from '@/api/fourColorMap'
    import { global } from '../../global';

    // 默认样式
@@ -106,6 +107,35 @@
                },
                showCreatePanel: false,
                showPlot: true,
                form:{
                    id:'',
                    etype:1,
                    "type": "Feature",
                    "properties": {
                    "type": "polygon",
                    "style": { "text": "D号楼", "clampToGround": true },
                    "attr": {
                        "name": "D号楼",
                        "id": "8a65b4df-2450-4dab-958d-fbd182cfd92d"
                    }
                    },
                    "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [120.728524, 31.258178, 0],
                            [120.727911, 31.257992, 0],
                            [120.728024, 31.25772, 0],
                            [120.727986, 31.2577, 0],
                            [120.728039, 31.257535, 0],
                            [120.728759, 31.257714, 0],
                            [120.728524, 31.258178, 0],
                            [120.728524, 31.258178, 0],
                            [120.728524, 31.258178, 0]
                            ]
                        ]
                    }
                },
            };
        },
        computed: {
@@ -149,7 +179,11 @@
                    name: '',
                };
            },
            createHandle() {
            async createHandle() {
                // debugger
                // this.form.geometry = JSON.stringify(this.form.geometry)
                // this.form.properties = JSON.stringify(this.form.properties)
                // let res = await addMap(this.form)
                if (!global.map) return;
                let map = global.map;
                const { id, name } = this.label;
@@ -169,9 +203,34 @@
                                name,
                            },
                        },
                        () => {
                        (entity) => {
                            this._initLabel();
                            this.$store.dispatch('map/updateTimestamp');
                            this.form = {
                                id:'',
                                etype:1,
                                "type": "Feature",
                                "properties": 
                                    JSON.stringify(entity.attribute),
                                "geometry": JSON.stringify({
                                "type": "Polygon",
                                "coordinates": [
                                
                                    wutu3d.draw.attr.getCoordinates(entity)
                                     
                                    ]
                                })
                            }
                            addMap(this.form).then(res =>{
                                if(res.data.code === '200'){
                                    this.$message({
                                        type:'success',
                                        duration:2000,
                                        title:'成功',
                                        message:'四色图新增成功',
                                    })
                                }
                            })
                        }
                    );
                }

 src/views/doublePreventAction/riskLevelManage/fourColorMap/index.vue

@@ -1,297 +1,9 @@
<template>
<div style="height:1000px;width:100%;background:#FFFFFF;padding:20px">
    <el-tabs v-model="activeName">
        <el-tab-pane label="60万吨" name="first"> 
            <sixty></sixty>
        </el-tab-pane>
        <el-tab-pane label="130万吨" name="second">
            <oneHundredAndThirty></oneHundredAndThirty>
        </el-tab-pane>
    </el-tabs>
</div>


    <router-view />
</template>

<script>
    import sixty from './components/sixty.vue'
    import oneHundredAndThirty from './components/oneHundredAndThirty.vue'
    import Map from '../../../../components/Map';
    import Tab from '../../../../components/Tab';
    import { global } from '../../../../global';
    import {
        getCatesian3FromPX,
        Cartesian3_to_WGS84,
    } from '../../../../components/Map/libs/Point';

    export default {
        name: 'App',
        components: {
            Map,
            Tab,
            oneHundredAndThirty,
            sixty
        },
        data() {
            return {
                activeName:'first',
                loaded: false,
                map: null,
                option: null,
                heatLayer: null,
                shineishiwai: true,
            };
        },
        mounted() {
            // 地图配置初始化
            this.option = {
                // 初始化视图中心点
                viewpoint: {
                    y: 31.254992,
                    x: 120.727592,
                    z: 289.24,
                    heading: 13.8,
                    pitch: -37.3,
                    roll: 360,
                },

                // 显示位置初始化按钮
                homeButton: true,

                // 当前时间
                currentTime: '08:30:00',

                // 影像底图
                imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                    url:
                        'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
                    layer: '',
                    style: 'default',
                    tileMatrixSetID: 'w',
                    format: 'tiles',
                    maximumLevel: 18,
                }),
            };
            window.sss = this;
        },
        methods: {
            init(map) {
                this.loaded = true;

                map.addModel({
                    link: 'http://222.92.213.22:8006/b3dm60/tileset.json',
                    name: '商业园区',
                    callback: tileset => {
                        var boundingSphere = tileset.boundingSphere;
                        var cartographic = Cesium.Cartographic.fromCartesian(
                            boundingSphere.center
                        );
                        var surface = Cesium.Cartesian3.fromRadians(
                            cartographic.longitude,
                            cartographic.latitude,
                            0.0
                        );
                        var offset = Cesium.Cartesian3.fromRadians(
                            cartographic.longitude,
                            cartographic.latitude,
                            102
                        );
                        var translation = Cesium.Cartesian3.subtract(
                            offset,
                            surface,
                            new Cesium.Cartesian3()
                        );
                        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
                    },
                });

                map.viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString(
                    '#050F1F'
                );
                map.viewer.scene.logarithmicDepthBuffer = false;
                map.viewer.scene.globe.enableLighting = true;
                map.viewer.scene.sun.show = false;
                map.viewer.scene.moon.show = false;
                map.viewer.scene.fog.enabled = false;
                map.viewer.scene.skyBox = null;

                // 初始化事件
                this.initEvent(map);

                this.testLoadedData();
            },
            // 加载测试数据
            testLoadedData() {
                const map = global.map;
                if (!map) return;
                $.get('./public/data/plots_namisuo.geojson', res => {
                    map.loadGeoJSON(res);
                });
            },
            initEvent(map) {
                let popup = null;
                const _this = this;
                map.on(
                    'click',
                    ({
                         position,
                         cartesian3,
                         latLngPositionGlobe,
                         latLngPosition,
                         entity,
                         attr,
                     }) => {
                        if (popup) {
                            popup.destroy();
                            popup = null;
                        }
                        let type = entity && entity.attribute && entity.attribute.type;
                        if (type) {
                            popup = new wutu3d.DivPoint(map.viewer, {
                                html:
                                    "<div class='popup-wrapper'>" +
                                    attr.name +
                                    '<br/><br/>XXXXXXXX</div>',
                                position: cartesian3,
                                anchor: [-170, -80],
                            });
                            popup.visible = true;
                        }
                        if (attr.name && attr.name === '含内景大楼') {
                            _this.changeModel(!_this.shineishiwai);
                            _this.shineishiwai = !_this.shineishiwai;
                        }

                        const pos = getCatesian3FromPX(position, map.viewer);
                        const pos1 = Cartesian3_to_WGS84(pos);
                        console.log(pos1);

                        var pt = turf.point([Number(pos1.lng), Number(pos1.lat)]);
                        var poly = turf.polygon([
                            [
                                [120.159277, 30.227512],
                                [120.158919, 30.227569],
                                [120.158777, 30.227431],
                                [120.158904, 30.227151],
                                [120.15911, 30.227119],
                                [120.159339, 30.227347],
                                [120.159277, 30.227512],
                            ],
                        ]);

                        const inPoly = turf.booleanPointInPolygon(pt, poly);

                        if (
                            //自己测量对应建筑的空间范围
                            inPoly &&
                            pos1.alt > 0 && //20.562718744748462
                            pos1.alt < 121.7
                        ) {
                            _this.changeModel(!_this.shineishiwai);
                            _this.shineishiwai = !_this.shineishiwai;
                        }
                    }
                );
                // map.on(
                //   'mousemove',
                //   ({ cartesian3, latLngPositionGlobe, latLngPosition, entity, attr }) => {
                //     if (popup) {
                //       popup.destroy();
                //       popup = null;
                //     }
                //     let type = entity && entity.attribute && entity.attribute.type;
                //     if (type) {
                //       popup = new wutu3d.DivPoint(map.viewer, {
                //         html:
                //           "<div class='popup-wrapper'>信息内容<br/><br/>XXXXXXXX</div>",
                //         position: cartesian3,
                //         anchor: [-170, -80],
                //       });
                //       popup.visible = true;
                //     }
                //   }
                // );
            },
            changeModel(val) {
                console.log(val);
                if (!val) {
                    global.map.models.map(model => {
                        if (model.name === '室内') {
                            global.map.setModelVisible(model.id, true);
                            global.map.flyToModel(model.id);
                        } else {
                            global.map.setModelVisible(model.id, false);
                        }
                    });

                    let viewer = global.map.viewer;
                    viewer.scene.skyBox = null;
                    viewer.scene.sun.show = false;
                    viewer.scene.moon.show = false;
                    viewer.scene.globe.show = false;
                    viewer.scene.logarithmicDepthBuffer = false;
                    viewer.scene.skyAtmosphere.show = false;
                    viewer.scene.backgroundColor = Cesium.Color.fromCssColorString(
                        'rgba(0,0,0, 1)'
                    );
                } else {
                    global.map.models.map(model => {
                        if (model.name === '室内') {
                            global.map.setModelVisible(model.id, false);
                        } else {
                            global.map.setModelVisible(model.id, true);
                        }
                    });

                    global.map.setViewpoint(
                        {
                            y: 30.231104,
                            x: 120.157372,
                            z: 298.45,
                            heading: 173,
                            pitch: -28.8,
                            roll: 6.2,
                        },
                        { duration: 1.5 }
                    );

                    let viewer = global.map.viewer;
                    viewer.scene.skyBox = null;
                    viewer.scene.sun.show = true;
                    viewer.scene.moon.show = true;
                    viewer.scene.globe.show = true;
                    viewer.scene.logarithmicDepthBuffer = true;
                    viewer.scene.skyAtmosphere.show = true;
                    viewer.scene.backgroundColor = Cesium.Color.fromCssColorString(
                        'rgba(0,0,0, 1)'
                    );
                }
            },
        },
    };
</script>

<style scoped>
    .map-layout {
        height: 920px;;
        position: relative;
    }

    .tool-btns {
        position: absolute;
        z-index: 999;
        top: 10px;
        left: 500px;
    }
    .sn-tool {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 1;
        padding: 3px;
        background: #fff;
    }
    .left-switch {
        margin-right: 10px;
    }
</style>

 src/views/doublePreventAction/riskLevelManage/fourColorMap/oneHundredAndThirty/index.vue

文件名从 src/views/doublePreventAction/riskLevelManage/fourColorMap/components/oneHundredAndThirty.vue 修改
@@ -71,7 +71,7 @@

                map.addModel({
                    link: 'http://222.92.213.22:8006/b3dm130/tileset.json',
                    name: '商业园区',
                    name: '130吨模型图',
                    callback: tileset => {
                        var boundingSphere = tileset.boundingSphere;
                        var cartographic = Cesium.Cartographic.fromCartesian(
@@ -264,7 +264,7 @@

<style scoped>
    .map-layout {
        height: 920px;;
        height: 820px;;
        position: relative;
    }


 src/views/doublePreventAction/riskLevelManage/fourColorMap/sixty/index.vue

文件名从 src/views/doublePreventAction/riskLevelManage/fourColorMap/components/sixty.vue 修改
@@ -16,7 +16,7 @@
        getCatesian3FromPX,
        Cartesian3_to_WGS84,
    } from '../../../../../components/Map/libs/Point';

    import { getMap } from '@/api/fourColorMap'
    export default {
        name: 'App',
        components: {
@@ -71,7 +71,7 @@

                map.addModel({
                    link: 'http://222.92.213.22:8006/b3dm60/tileset.json',
                    name: '商业园区',
                    name: '60吨模型图',
                    callback: tileset => {
                        var boundingSphere = tileset.boundingSphere;
                        var cartographic = Cesium.Cartographic.fromCartesian(
@@ -115,9 +115,23 @@
            testLoadedData() {
                const map = global.map;
                if (!map) return;
                $.get('./public/data/plots_namisuo.geojson', res => {
                    map.loadGeoJSON(res);
                });
                let params = {}
                params['eType'] = 1
                getMap(params).then(res =>{
                    const list = res.data.result.map(item =>{
                        return{
                            type:item.type,
                            geometry:JSON.parse(item.geometry),
                            properties:JSON.parse(item.properties)
                        }
                    })
                    const fourMapList = {
                            "type": "FeatureCollection",
                            "features": list
                    }
                    debugger
                    map.loadGeoJSON(fourMapList)
                })
            },
            initEvent(map) {
                let popup = null;
@@ -136,6 +150,7 @@
                            popup.destroy();
                            popup = null;
                        }
        
                        let type = entity && entity.attribute && entity.attribute.type;
                        if (type) {
                            popup = new wutu3d.DivPoint(map.viewer, {
@@ -155,7 +170,6 @@

                        const pos = getCatesian3FromPX(position, map.viewer);
                        const pos1 = Cartesian3_to_WGS84(pos);
                        console.log(pos1);

                        var pt = turf.point([Number(pos1.lng), Number(pos1.lat)]);
                        var poly = turf.polygon([
@@ -264,7 +278,7 @@

<style scoped>
    .map-layout {
        height: 920px;;
        height: 850px;;
        position: relative;
    }