dzhh-frontend/.svn/pristine/9b/9baaed4db9891d7f06525bdd7f7307effd0c79ba.svn-base

<template>
    <div class="draw" v-drag="'.draw .ant-card-head'">
        <a-card v-show='value' title="标绘" style="width: 272px;  box-shadow: 0 0 5px #357ee5;">
            <a-icon slot="extra" type="close" style='cursor: pointer; color: #FFFFFF;' @click="$emit('input',false)"/>
            <a-radio-group v-model="typeSelected" @change="getTypeSelected">
                <a-radio-button value="Point">点</a-radio-button>
                <a-radio-button value="LineString">线</a-radio-button>
                <a-radio-button value="Polygon">面</a-radio-button>
            </a-radio-group>
            <a-button style="margin-left: 20px" @click="clearFeature" type="primary">清空</a-button>
            <div style="user-select: text;max-height: 40vh;overflow-y: auto;margin-top: 10px">
                标绘结果：{{ this.baseMap.geoinfo }}
            </div>
        </a-card>
    </div>
</template>

<script>
import Style from "ol/style/Style";
import {Draw, Snap} from "ol/interaction";
import VectorLayer from "ol/layer/Vector";
import {Vector as VectorSource} from 'ol/source';
import Stroke from "ol/style/Stroke";
import {GeoJSON} from "ol/format";
import Fill from "ol/style/Fill";
import CircleStyle from "ol/style/Circle";

export default {
    name: "drawTool",
    data() {
        return {
            typeSelected: 'None',
            drawLayer: null,
            draw: null,
            map: null,
            info: ''
        };
    },
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true
        }
    },
    inject: ['baseMap'],
    watch: {
        value: function (newValue) {
            if (newValue === false) {
                this.removeInteraction();
                this.typeSelected = 'None';
            } else {

            }
        }
    },
    mounted() {
    },
    methods: {
        initDrawLayer() {
            this.map = this.baseMap.map;
            if (!this.drawLayer) {
                this.drawLayer = new VectorLayer({
                    //layer所对应的source
                    source: new VectorSource(),
                    style: new Style({
                        fill: new Fill({
                            color: 'rgba(255, 255, 255, 0.2)',
                        }),
                        stroke: new Stroke({
                            color: 'blue',
                            width: 2,
                        }),
                        image: new CircleStyle({
                            radius: 7,
                            fill: new Fill({
                                color: 'blue',
                            }),
                        }),
                    }),
                })
                //把layer加入到地图中
                this.map.addLayer(this.drawLayer);
            }
            this.getTypeSelected();
        },
        getTypeSelected() {
            this.map = this.baseMap.map;
            this.draw && this.removeInteraction();
            //再根据typeSelect的值绘制新的Interaction
            this.addInteraction();
        },
        addInteraction() {
            let value = this.baseMap.drawType || this.typeSelected;
            if (value !== 'None') {
                this.draw = new Draw({
                    source: this.drawLayer.getSource(),
                    type: value,
                    // 绘制时停止点击事件
                    stopClick: true,
                    /*style: new Style({
                      stroke: new Stroke({
                        color: 'red',
                        width: 3
                      })
                    })*/
                });
                this.map.addInteraction(this.draw);

                this.draw.on("drawstart", (evt) => {
                    this.clearFeature();
                })
                this.draw.on("drawend", (evt) => {
                    if (evt.feature != null) {
                        //通过改变onTool的值间接触发removeInteraction函数 可以结束绘制
                        // this.onTool = 'none'
                        // 绘制结束之后 绘制出的点线面数据
                        let featureGeoJson = JSON.parse(new GeoJSON().writeFeature(evt.feature));
                        featureGeoJson.crs = {
                            "type": "name",
                            "properties": {
                                "name": "EPSG:4490"
                            }
                        };
                        this.baseMap.geoinfo = featureGeoJson;
                        /*this.$notification.open({
                          message: '标绘完成',
                          // description:JSON.stringify(featureGeoJson)
                        });*/
                        // alert(JSON.stringify(featureGeoJson));
                        // this.$emit('',featureGeoJson)
                    }
                }, this);
            }
        },
        // 手动停止绘制
        removeInteraction() {
            this.map.removeInteraction(this.draw)
        },
        // 清除数据
        clearFeature() {
            if (this.drawLayer) {
                this.drawLayer.getSource().clear();
                this.baseMap.geoinfo = null;
            }
        }
    }
}
</script>

<style scoped>

</style>