11

少年

2024-02-07 9736514b2aa57051e934341b23a2f6b123cc06a9

 src/utils/map2.js

@@ -751,7 +751,9 @@
                            lon: lon,
                            lat: lat,
                        }
                    } else if (propertyNames.includes("id")) {
                    }

                    else if (propertyNames.includes("id")) {
                        objdata = {
                            POITYPE: "POINT",
                            name: properties["_name"]._value,
@@ -2203,6 +2205,7 @@


//openlayer 创建点位
window.pointArr = [];
export function createPointMarker(position, obj) {
    let startFeature = new ol.Feature({
        geometry: new ol.geom.Point(position),
@@ -2210,6 +2213,12 @@
    startFeature.setProperties({
        desc: obj,
    });
    if (window.pointArr && window.pointArr.length > 0) {
        window.pointArr.forEach(item => {
            window.mapapi.removeLayer(item)
        })
        window.pointArr = []
    }
    let MarkerLayer = new ol.layer.Vector({
        id: 'LocationPoint',
        name: '标记点',
@@ -2229,26 +2238,14 @@
        }),
        zIndex: 1099,
    })
    window.pointArr.push(MarkerLayer)
    return MarkerLayer;
}

//openlayer 地图点击事件
export function setClick(state) {
    console.log('setClick');
    let ponitPanel = document.getElementById('ponitPanel');
    let overlay = new ol.Overlay({
        element: ponitPanel,
        autoPan: {
            animation: {
                duration: 250,
            },
        },
    });
    window.map.addOverlay(overlay);

    // let _clickCallback = callback;
    function handleClick(e) {
        console.log(e.coordinate);
        store.setLayerPanelShow(false);
        // 土地管理
        if (store.tdglInfo.flag) {
            axios
@@ -2262,7 +2259,7 @@
                ).then(response => {
                    let center = { lon: 0, lat: 0 };
                    if (window.tdglLine) {
                        window.map.removeLayer(window.tdglLine);
                        window.mapapi.removeLayer(window.tdglLine);
                        window.tdglLine = null;
                    }
                    var format = new ol.format.WKT(); // 创建一个 WKT 解析器
@@ -2274,7 +2271,7 @@
                            features: [feature] // 将要素对象加入到图层源中
                        })
                    });
                    window.map.addLayer(window.tdglLine)
                    window.mapapi.addLayer(window.tdglLine)


                    axios
@@ -2351,7 +2348,7 @@
                                        rjl,
                                        jzxg,
                                        jzmd,
                                        lon:e.coordinate[0],
                                        lon: e.coordinate[0],
                                        lat: e.coordinate[1],
                                    }
                                }
@@ -2367,38 +2364,94 @@
            return;
        }

        window.mapapi.forEachFeatureAtPixel(e.pixel, function (feature) {
            let properties = feature.getProperties().features[0].values_;
            console.log(properties, 'aaa');
            console.log(properties.values_, 'bbb');
            for (const propertyNames in properties) {
                if (propertyNames.indexOf("监控名") !== -1) {
                    // objdata = {
                    //     POITYPE: "SPJK",
                    //     name: properties["JK名称"]._value,
                    //     type: properties["JK类型"]._value,
                    //     function: properties["功能"]._value,
                    //     area: properties["所在区"]._value,
                    //     number: properties["JK编号"]._value,
                    //     code: properties["JK内码"]._value,
                    //     lon: lon,
                    //     lat: lat,
                    // }
                    Message({
                        message: '连接状态查询中',
                        type: 'info',
                        offset: 60,
                        center: true,
                        duration: 1000,
                    });
                    layerOpen(properties["JK名称"]._value, {
                        width: "100%",
                        height: "40%",
                        // offset: [offsetTop + "px", "380px"],
                        url: "../../static/video/video.html?code=" + properties["JK内码"]._value,
                        fn: {
                            success: (layero, index) => {
                                SmartEarthPopupData.layerContainer = layero;
                            },
                            end: () => {

        window.map.forEachFeatureAtPixel(e.pixel, function (feature) {
            // console.log(feature, '111111')
                            },
                            cancel: () => {

                            },
                        },
                    });
                    return
                } else if (propertyNames.indexOf("部件名称") !== -1) {
                    objdata = {
                        // 点位类型（中英文配置表poiKeys.js)
                        POITYPE: "CSBJ",
                        // 展示字段
                        name: properties["部件名称"],
                        address: properties["安装地址"],
                        code: properties["部件编码"],
                        type: properties["部件类型"],
                        // 弹框经纬度
                        lon: properties["Longtitude"],
                        lat: properties["Latitude"],
                    }
                } else if (propertyNames.indexOf("井编号") !== -1) {
                    objdata = {
                        POITYPE: "YINJ",
                        name: properties["井名称"],
                        depth: properties["井深"],
                        type: properties["井类型"],
                        location: properties["位置"],
                        code: properties["井编号"],
                        lon: properties["Longtitude"],
                        lat: properties["Latitude"],
                    }
                } else if (propertyNames.indexOf("QYMC") !== -1) {
                    objdata = {
                        POITYPE: "QY",
                        QYMC: properties["QYMC"],
                        XYDM: properties["XYDM"],
                        BZDZ: properties["BZDZ"],
                        DZ: properties["DZ"],
                        lon: properties["Longtitude"],
                        lat: properties["Latitude"],
                    }
                }
            }

            if (feature && feature.values_.desc) {
                ponitPanel.style.display = 'block'

                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>`

                setTimeout(() => {
                    overlay.setPosition(e.coordinate);
                }, 0)

                // store.setPoplayerShowAction(true);
                // store.setPoplayerListAction(objdata);
                // if (window.instance) {
                //     window.instance.$destroy();
                // }
@@ -2409,10 +2462,15 @@
                // });
                // window.instance.$mount();
            }

            store.setTdglShow(false);
            store.setTdlgInfo({});
            store.setdwShow(true);
            store.setdwInfo(objdata);
        });
    }
    if (state) {
        clickEvent = window.map.on('click', handleClick);
        clickEvent = window.mapapi.on('click', handleClick);
    } else {
        ol.Observable.unByKey(clickEvent)
        clickEvent = null
@@ -2421,26 +2479,9 @@


export function flyToPoint(posisitons) {
    // let zoom = window.map.getView().getZoom();
    // if (zoom >= 16) {
    //     zoom = 12
    // }
    // let duration = 2000;
    window.map.getView().animate({
    window.mapapi.getView().animate({
        center: posisitons,
        zoom: 12,
        zoom: 15,
        duration: 1500
    })
    // 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,
    //     }
    // );
}