北京经济技术开发区经开区虚拟城市项目-【前端】-移动端Web
11
少年
2024-02-06 5964bd44f4e28a46fb6f15bd2b5205867b8ea86b
src/utils/map2.js
@@ -1,3 +1,10 @@
import { Feature } from "ol";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Style, Icon, Fill, Stroke, Text, Circle as CircleStyle } from "ol/style";
import { Point, LineString } from "ol/geom";
import Overlay from 'ol/Overlay.js';
import { unByKey } from "ol/Observable.js"; //移除事件
import Vue from 'vue';
import axios from "axios";
import _GLOBAL from '@/assets/GLOBAL2';
@@ -6,6 +13,7 @@
import { Message } from 'element-ui';
let tdglLine, qiyexinxi, qysl, ydbm, ydlx, cyfx, crzt, ydmj, crnx, crnf, rjl, jzxg, jzmd;
let objdata;
var clickEvent;
window.tdglLine = tdglLine
let PoiLayerConstructor = Vue.extend(poiLayer);
@@ -882,7 +890,7 @@
//加载三维图层
export function loadLayer(treeNode) {
    console.log('loadLayer',treeNode);
    console.log('loadLayer', treeNode);
    let layer;
    switch (treeNode.sourceType) {
        case "tms":
@@ -2191,3 +2199,120 @@
        })
    }
}
//openlayer 创建点位
export function createPointMarker(position, obj) {
    let startFeature = new Feature({
        geometry: new Point(position),
    });
    startFeature.setProperties({
        desc: obj,
    });
    let MarkerLayer = new VectorLayer({
        id: 'LocationPoint',
        name: '标记点',
        source: new VectorSource({
            features: [startFeature],
        }),
        style: new Style({
            image: new Icon({
                src: require('@/assets/img/collection/scdw.png'),
                anchorOrigin: "top-left",
                anchorXUnits: "fraction",
                anchorYUnits: "fraction",
                offsetOrigin: "bottom-right",
                scale: 0.6,
                opacity: 1,
            })
        }),
        zIndex: 1099,
    })
    return MarkerLayer;
}
//openlayer 地图点击事件
export function setClick(state) {
    let ponitPanel = document.getElementById('ponitPanel');
    let overlay = new Overlay({
        element: ponitPanel,
        autoPan: {
            animation: {
                duration: 250,
            },
        },
    });
    window.map.addOverlay(overlay);
    // let _clickCallback = callback;
    function handleClick(e) {
        window.map.forEachFeatureAtPixel(e.pixel, function (feature) {
            // console.log(feature, '111111')
            if (feature && feature.values_.desc) {
                let obj = feature.values_.desc
                objdata = {
                    POITYPE: "POINT",
                    name: obj.name,
                    address: obj.address,
                    lon: obj.lng,
                    lat: obj.lat
                }
                ponitPanel.innerHTML = `
                       <div class="ponitPanel-name">
                         <span>名称:</span>
                         <span>${objdata.name}</span>
                       </div>
                     <div class="ponitPanel-value">
                        <span>地址:</span>
                       <span>${objdata.address}</span>
                    </div>`
                overlay.setPosition(e.coordinate);
                // store.setPoplayerShowAction(true);
                // store.setPoplayerListAction(objdata);
                // if (window.instance) {
                //     window.instance.$destroy();
                // }
                // window.instance = new PoiLayerConstructor({
                //     data: {
                //         list: objdata
                //     }
                // });
                // window.instance.$mount();
            }
        });
    }
    if (state) {
        clickEvent = window.map.on('click', handleClick);
    } else {
        unByKey(clickEvent)
        clickEvent = null
    }
}
export function flyToPoint(posisitons) {
    let zoom = window.map.getView().getZoom();
    if (zoom >= 16) {
        zoom = 12
    }
    let duration = 2000;
    window.map.getView().animate({
        center: posisitons,
    })
    window.map.getView().animate(
        //动画开始时
        {
            zoom: zoom > 16 ? zoom - 0.01 : zoom + 0.01,
            duration: duration / 2,
        },
        //动画结束时
        {
            zoom: zoom >= 16 ? 16 : zoom + 4,
            duration: duration / 2,
        }
    );
}