dzhh-frontend/.svn/pristine/0c/0c5a19c28252a41c94454c99ce21245b7a830893.svn-base

<template>
    <simple-marker ref="simpleMarker"></simple-marker>
</template>

<script>
import {LineString, MultiLineString, MultiPolygon, Polygon} from "ol/geom";
import {Vector as VectorSource} from "ol/source";
import {Vector as VectorLayer} from "ol/layer";
import Style from "ol/style/Style";
import Fill from "ol/style/Fill";
import Stroke from "ol/style/Stroke";
import Text from 'ol/style/Text';
import CircleStyle from "ol/style/Circle";
import Feature from "ol/Feature";
import SimpleMarker from "@/components/BasicMap/Tools/SimpleMarker.vue";
import * as bussLayerFn from '@/utils/oneMap/bussLayer';

export default {
    name: "LocateByGeoinfo",
    components: {SimpleMarker},
    data() {
        return {
            map: {},
            vectorLayer: '',
        }
    },
    inject: ['baseMap'],
    methods: {
        locate(record, map) {
            this.map = map;
            if (record.lat && record.lng && !record.geoinfo) {
                this.$refs.simpleMarker.hideMarker();
                this.locateByCoords([record.lng, record.lat]);
                return;
            }
            let geoStr = record.geoinfo;
            if (!geoStr) {
                this.$message.warn('没有空间信息!')
                return;
            }
            if (record.layerName) {
                if (record.layerName.includes(',')) {
                    let layerNames = record.layerName.split(',');
                    layerNames.forEach((item) => {
                        this.getTreeExpandKeys(this.baseMap.list, item);
                    })
                } else {
                    // 显示图层
                    this.getTreeExpandKeys(this.baseMap.list, record.layerName);
                }
            }
            this.$refs.simpleMarker.hideMarker();
            this.clear();
            let jsonStr;
            let geomType;
            if (JSON.parse(geoStr).coordinates) {
                jsonStr = JSON.parse(geoStr).coordinates;
                geomType = JSON.parse(geoStr).type;
            }else{
                jsonStr = JSON.parse(geoStr).geometry.coordinates;
                geomType = JSON.parse(geoStr).geometry.type;
            }
            let geom = null;
            switch (geomType) {
                case "Point":
                    this.locateByCoords(jsonStr);
                    break;
                case "MultiPolygon":
                    geom = new MultiPolygon(jsonStr);
                    this.locateByGeometry(geom);
                    break;
                case "MultiLineString":
                    geom = new MultiLineString(jsonStr);
                    this.locateByGeometry(geom);
                    break;
                case "Polygon":
                    geom = new Polygon(jsonStr);
                    this.locateByGeometry(geom);
                    break;
                case "LineString":
                    geom = new LineString(jsonStr);
                    this.locateByGeometry(geom);
                    break;
                default:
                    break;
            }
        },
        // 递归查找
        getTreeExpandKeys(obj, name) {
            if (obj && obj.length !== 0) {
                obj.forEach((item, index) => {
                    if (item.alias === name) {
                        item.visible = true;
                        let m_layer = this.getLayerByName(name);
                        if (!m_layer) {
                            bussLayerFn.loadBussLayer(this.map, item.url, item.name, item.alias, item.sourceName,
                                item.zIndex,
                                item.visible);
                        } else {
                            m_layer.setVisible(true);
                        }
                    }
                    // 如果此列表有children, 进行递归
                    if (item.layers) {
                        // console.log(index)
                        this.getTreeExpandKeys(item.layers, name)
                    }
                })
            }
        },
        getLayerByName(layerName) {
            var map = this.baseMap.map;
            if (!map) {
                return;
            }
            let layer = null;
            let layers = map.getLayers();
            let layerCount = layers.getLength();
            for (let i = 0; i < layerCount; i++) {
                let name = layers.item(i).get('alias');
                if (name === layerName) {
                    layer = layers.item(i);
                    return layer;
                }
            }
            return layer;
        },
        locateByCoords(coords) {
            this.map = this.baseMap.map;
            let view = this.map.getView();
            const zoom = view.getZoom();
            view.animate({
                zoom: zoom - 1,
                duration: 300
            }, {
                center: coords,
                zoom: 16,
                duration: 1700
            })
            setTimeout(() => {
                this.$refs.simpleMarker.init(coords);
            }, 2000)
        },
        locateByGeometry(geom) {
            if (this.vectorLayer === '') {
                const vectorSource = new VectorSource();
                this.vectorLayer = new VectorLayer({
                    name: 'locMap',
                    source: vectorSource,
                    style: new Style({
                        fill: new Fill({
                            color: 'rgba(255, 255, 255, 0.6)',
                        }),
                        stroke: new Stroke({
                            color: '#ff0000',
                            lineDash: [6, 6],
                            width: 5
                        }),
                        image: new CircleStyle({
                            radius: 7,
                            fill: new Fill({
                                color: '#ffcc33',
                            }),
                        }),
                        // text: new Text({
                        //     textAlign:'center',
                        //     textBaseline:'bottom',
                        //     font:'bold 2em Microsoft YaHei',
                        //     text:'文字提示',
                        //     placement:'line',
                        //     fill:new Fill({
                        //         color:'#FF0000'
                        //     })
                        // })
                    }),
                    zIndex: 100
                })
                this.map.addLayer(this.vectorLayer);
            }
            let view = this.map.getView()
            let zoom = view.getZoom();
            if (geom == null) {
                return;
            }
            view.animate({
                zoom: zoom - 1,
                duration: 300
            });
            view.fit(geom, {
                size: [800, 600],
                duration: 1700
                // padding:[30,30,30,30]
            });

            let feature = null;
            let vectorSource = null;
            feature = new Feature({
                geometry: geom
            })
            vectorSource = new VectorSource();
            vectorSource.addFeature(feature);
            this.vectorLayer.setSource(vectorSource);
            this.vectorLayer.setZIndex(100);
        },
        clear() {
            if (this.vectorLayer) {
                this.vectorLayer.setSource(null);
                this.map.removeLayer(this.vectorLayer);
                this.vectorLayer = '';
            }
        }
    }
}
</script>

<style scoped>
.aa{
    font-family: "";
}
</style>