3D

Your Name

2022-07-25 973288ea3095247303b5daac5bc160e10ae2b8ac

 src/components/Tab/Plot.vue

@@ -1,250 +1,342 @@
<template>
  <div class="container">
    <div class="model-panel-list">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click="showCreateHandle"
          >
            创建
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button
            icon="el-icon-delete"
            size="small"
            type="danger"
            @click="clearHandle"
          >
            清空
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button
            icon="el-icon-view"
            size="small"
            :type="showPlot ? 'success' : 'info'"
            @click="toggleVisible"
          >
            {{ showPlot ? '隐藏' : '显示' }}
          </el-button>
        </el-col>
      </el-row>
      <el-row :gutter="10" v-for="label in labels" :key="label.attr.id">
        <el-col :span="14">
          {{ label.attr.name || ' ' }}
        </el-col>
        <el-col :span="10" style="textalign: right">
          <el-button
            icon="el-icon-s-promotion"
            size="mini"
            circle
            @click="() => focusHandle(label.attr.id)"
          />
          <el-button
            icon="el-icon-edit"
            size="mini"
            circle
            @click="() => editHandle(label)"
          />
          <el-button
            icon="el-icon-delete"
            type="danger"
            size="mini"
            circle
            @click="() => removeHandle(label.attr.id)"
          />
        </el-col>
      </el-row>
    </div>
    <el-dialog
      :visible="showCreatePanel"
      width="380px"
      title="创建标注"
      :append-to-body="true"
      :close-on-click-modal="false"
      :before-close="closeCreateHandle"
    >
      <p>请输入内容：</p>
      <el-input v-model="label.name" placeholder="请输入内容" />
      <span slot="footer" class="dialog-footer">
    <div class="container">
        <div class="model-panel-list">
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-button
                        icon="el-icon-plus"
                        size="small"
                        type="primary"
                        @click="showCreateHandle"
                    >
                        创建
                    </el-button>
                </el-col>
                <!-- <el-col :span="6">
                    <el-button
                        icon="el-icon-delete"
                        size="small"
                        type="danger"
                        @click="clearHandle"
                    >
                        清空
                    </el-button>
                </el-col> -->
                <el-col :span="6">
                    <el-button
                        icon="el-icon-view"
                        size="small"
                        :type="showPlot ? 'success' : 'info'"
                        @click="toggleVisible"
                    >
                        {{ showPlot ? '隐藏' : '显示' }}
                    </el-button>
                </el-col>
            </el-row>
            <el-row :gutter="10" v-for="label in labels" :key="label.attr.id">
                <el-col :span="14">
                    {{ label.attr.name || ' ' }}
                </el-col>
                <el-col :span="10" style="textalign: right">
                    <el-button
                        icon="el-icon-s-promotion"
                        size="mini"
                        circle
                        @click="() => focusHandle(label.attr.id)"
                    />

<!--                    <el-button-->
<!--                        icon="el-icon-edit"-->
<!--                        size="mini"-->
<!--                        circle-->
<!--                        @click="() => editHandle(label)"-->
<!--                    />-->
                    <el-button
                        icon="el-icon-delete"
                        type="danger"
                        size="mini"
                        circle
                        @click="() => removeHandle(label)"
                    />
                </el-col>
            </el-row>
        </div>
        <el-dialog
            :visible="showCreatePanel"
            width="380px"
            title="创建标注"
            :append-to-body="true"
            :close-on-click-modal="false"
            :before-close="closeCreateHandle"
        >
            <p>请输入内容：</p>
            <el-input v-model="label.name" placeholder="请输入内容" />
            <p>请选择风险等级：</p>
            <el-select v-model="color" placeholder="请选择" >
                <el-option
                v-for="item in colorList"
                :key="item.id"
                :value="item.name"
                :label="item.text"
                ></el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
        <el-button @click="closeCreateHandle">取 消</el-button>
        <el-button type="primary" @click="createHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
        </el-dialog>
    </div>
</template>

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

// 默认样式
const LABEL_STYLE = {
  opacity: 1,
  color: '#FFFFFF',
  font_family: '黑体',
  font_size: 18,
  font_style: 'normal',
  font_weight: 'normal',
  border: false,
  border_color: '#ffffff',
  border_width: 2,
  background: true,
  background_color: 'rgba(0, 0, 0, .8)',
};

export default {
  components: {},
  data() {
    return {
      label: {
        id: null,
        name: '',
      },
      showCreatePanel: false,
      showPlot: true,
    // 默认样式
    const LABEL_STYLE = {
        opacity: 1,
        color: '#FFFFFF',
        font_family: '黑体',
        font_size: 18,
        font_style: 'normal',
        font_weight: 'normal',
        border: false,
        border_color: '#ffffff',
        border_width: 2,
        background: true,
        background_color: 'rgba(0, 0, 0, .8)',
    };
  },
  computed: {
    timestamp() {
      return this.$store.state.map.timestamp;
    },
    labels() {
      return this.entities.map(entity => entity.attribute);
    },
    entities() {
      let entities =
        this.timestamp && global.map
          ? global.map.plotDrawTool.getEntitys()
          : [];
      return entities.filter(entity => entity.attribute.type === 'polygon');
    },
  },
  methods: {
    editHandle(label) {
      if (!global.map) return;
      this.label = {
        id: label.attr.id,
        name: label.attr.name,
      };
      this.showCreatePanel = true;
    },
    removeHandle(id) {
      if (!global.map) return;
      global.map.deletePlot(id);
      this.$store.dispatch('map/updateTimestamp');
    },
    closeCreateHandle() {
      this.showCreatePanel = false;
    },
    showCreateHandle() {
      this.showCreatePanel = true;
    },
    _initLabel() {
      this.label = {
        id: null,
        name: '',
      };
    },
    createHandle() {
      if (!global.map) return;
      let map = global.map;
      const { id, name } = this.label;
      const entity = id && map.getPlotById(id);
      this.closeCreateHandle();
      if (entity) {
        map.updatePlotStyle(id, { text: name });
        map.updatePlotAttribute(id, { name });
        this._initLabel();
        this.$store.dispatch('map/updateTimestamp');
      } else {
        map.startDraw(
          {
            type: 'polygon',
            style: { text: name },
            attr: {
              name,

    export default {
        props:['type','colorMapList'],
        components: {},
        data() {
            return {
                label: {
                    id: null,
                    name: '',
                },
                color:'',
                colorList:[{id:1,name:'blue',text:'低风险'},{id:2,name:'yellow',text:'一般风险'},{id:3,name:'orange',text:'较大风险'},{id:4,name:'red',text:'重大风险'},],
                showCreatePanel: false,
                showPlot: true,
                form:{
                    id:'',
                    etype:1,
                    "type": "Feature",
                    "properties": {
                    "type": "polygon",
                    "style": { "text": "D号楼", "clampToGround": true ,color:'',},
                    "attr": {
                        "name": "",
                        "id": ""
                    }
                    },
                    "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: {
            timestamp() {
                return this.$store.state.map.timestamp;
            },
          },
          () => {
            this._initLabel();
            this.$store.dispatch('map/updateTimestamp');
          }
        );
      }
    },
    toggleVisible() {
      this.showPlot = !this.showPlot;
      if (global.map) {
        this.entities.forEach(entity => {
          entity.show = this.showPlot;
        });
      }
      this.$store.dispatch('map/updateTimestamp');
    },
    focusHandle(markerId) {
      if (global.map) {
        const entity = global.map.getPlotById(markerId);
        if (entity) {
          global.map.viewer.flyTo(entity, { duration: 1 });
        }
      }
    },
    clearHandle() {
      if (global.map) {
        this.entities.forEach(entity => {
          global.map.plotDrawTool.deleteEntity(entity);
        });
      }
      this.$store.dispatch('map/updateTimestamp');
    },
  },
};
            labels() {
                return this.entities.map(entity => entity.attribute);
            },
            entities() {
                let entities =
                    this.timestamp && global.map
                        ? global.map.plotDrawTool.getEntitys()
                        : [];
                return entities.filter(entity => entity.attribute.type === 'polygon');
            },
        },
        methods: {
            editHandle(label) {
                if (!global.map) return;
                this.label = {
                    id: label.attr.id,
                    name: label.attr.name,
                };
                this.showCreatePanel = true;
            },
            removeHandle(label) {
                if (!global.map) return;
                for(let i in this.colorMapList){
                    if(JSON.parse(this.colorMapList[i].properties).attr.id === label.attr.id){
                        deleteColorMap({id:this.colorMapList[i].id}).then(res =>{
                        if(res.data.code === '200'){
                            this.$message({
                                title:'成功',
                                message:'删除成功',
                                duration:2000,
                                type:'success'
                                })
                        global.map.deletePlot(label.attr.id);
                        this.$store.dispatch('map/updateTimestamp');
                            }
                        })
                    }
                }


            },
            closeCreateHandle() {
                this.showCreatePanel = false;
            },
            showCreateHandle() {
                this.showCreatePanel = true;
            },
            _initLabel() {
                this.label = {
                    id: null,
                    name: '',
                };
            },
            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;
                const entity = id && map.getPlotById(id);
                this.closeCreateHandle();
                if (entity) {
                    map.updatePlotStyle(id, { text: name });
                    map.updatePlotAttribute(id, { name });
                    this._initLabel();
                    this.$store.dispatch('map/updateTimestamp');
                } else {
                    map.startDraw(
                        {
                            type: 'polygon',
                            style: { text: name ,color:this.color, clampToGround: true},
                            attr: {
                                name,
                            },
                        },
                        (entity) => {
                            console.log(wutu3d.draw.attr.getCoordinates(entity));
                            this._initLabel();
                            this.$store.dispatch('map/updateTimestamp');
                            this.form = {
                                id:'',
                                etype:this.type,
                                "type": "Feature",
                                "properties":
                                    JSON.stringify(entity.attribute),
                                "geometry": JSON.stringify({
                                "type": "Polygon",
                                "coordinates": [

                                    wutu3d.draw.attr.getCoordinates(entity)

                                    ]
                                })
                            }
                            // this.form.properties.style.color = this.color
                            // this.form.properties = JSON.stringify(this.form.properties)
                            addMap(this.form).then(res =>{
                                if(res.data.code === '200'){
                                    // this.$emit('testLoadedData')
                                    this.$message({
                                        type:'success',
                                        duration:2000,
                                        title:'成功',
                                        message:'四色图新增成功',
                                    })
                                }
                            })
                        }
                    );
                }
            },
            toggleVisible() {
                this.showPlot = !this.showPlot;
                if (global.map) {
                    this.entities.forEach(entity => {
                        entity.show = this.showPlot;
                    });
                }
                this.$store.dispatch('map/updateTimestamp');
            },
            focusHandle(markerId) {
                if (global.map) {
                    const entity = global.map.getPlotById(markerId);
                    if (entity) {
                        global.map.viewer.flyTo(entity, { duration: 1 });
                    }
                }
            },
            clearHandle() {
                if (global.map) {
                    this.entities.forEach(entity => {
                        global.map.plotDrawTool.deleteEntity(entity);
                    });
                }
                this.$store.dispatch('map/updateTimestamp');
            },
        },
    };
</script>

<style scoped>
.images img {
  width: 36px;
  height: auto;
  margin: 0px 5px;
  cursor: pointer;
}
    .images img {
        width: 36px;
        height: auto;
        margin: 0px 5px;
        cursor: pointer;
    }

.model-panel-list > div {
  margin-bottom: 5px;
  padding: 5px 0 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
    .model-panel-list > div {
        margin-bottom: 5px;
        padding: 5px 0 5px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

.image-list {
  margin: 20px 0;
}
    .image-list {
        margin: 20px 0;
    }

.image-list ul,
.image-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
    .image-list ul,
    .image-list li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

.image-list li {
  display: inline-block;
  margin: 0 5px 5px 5px;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 3px;
}
    .image-list li {
        display: inline-block;
        margin: 0 5px 5px 5px;
        cursor: pointer;
        padding: 5px 8px;
        border-radius: 3px;
    }

.image-list li img {
  width: 32px;
  height: 32px;
}
    .image-list li img {
        width: 32px;
        height: 32px;
    }

.image-list li:hover,
.image-list li.active {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
}
    .image-list li:hover,
    .image-list li.active {
        box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
    }
</style>