learning_cesium/test.vue

67 lines
2.3 KiB
Vue
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
    <div class="dike-hazards-monitor">
        <layer-label :label-data="layerData" />
    </div>
</template>
<script>
import LayerLabel from './LayerLabel'
export default {
    name: 'ComBaseLayer',
    components: {
        LayerLabel
    },
    data() {
        return {
            layerData: [],
            layerId: 'comBaseLayer',
            layers: {}
        }
    },
    computed: {
    },
    watch: {
    },
    mounted() {
        this.initLayer()
    },
    beforeDestroy() {
        // 移除图层相关
        Object.keys(this.layers).forEach(key => {
            this.layers[key] && this.layers[key].destroy()
            this.layers[key] = null
        })
    },
    methods: {
        initLayer() {
            this.layers[this.layerId] = new this.$esri.GraphicsLayer({
                id: this.layerId,
                graphics: [],
                spatialReference: this.$mapView['map'].spatialReference,
                visible: true
            })
            this.$mapView['map'].map.add(this.layers[this.layerId], 1)
// 添加图层点击事件
            const clickHandle = this.$mapView['map'].on('click', event => {
                this.$mapView['map'].hitTest(event).then(response => {
                    if (response.results.length) {
                        const graphic = response.results[0]?.graphic
                        if (graphic?.layer === this.layers[this.layerId]) {
                            // this.$store.commit('CommonMap/setCurrentMapFeature', {
                            //     layerId: this.layerId,
                            //     graphic: graphic,
                            //     isLocation: true,
                            //     isHighlight: true,
                            //     view: 'map'
                            // })
                            this.$store.commit('FinalCommonBox/setVideoData', graphic.attributes)
                        }
                    }
                })
})
}}
}
</script>