11

少年

2024-02-06 0261ec79dc29b9ff0e1068b060c7414234028e23

 src/utils/map2.js

@@ -1,10 +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 { 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';
@@ -2204,20 +2204,20 @@

//openlayer 创建点位
export function createPointMarker(position, obj) {
    let startFeature = new Feature({
        geometry: new Point(position),
    let startFeature = new ol.Feature({
        geometry: new ol.geom.Point(position),
    });
    startFeature.setProperties({
        desc: obj,
    });
    let MarkerLayer = new VectorLayer({
    let MarkerLayer = new ol.layer.Vector({
        id: 'LocationPoint',
        name: '标记点',
        source: new VectorSource({
        source: new ol.source.Vector({
            features: [startFeature],
        }),
        style: new Style({
            image: new Icon({
        style: new ol.style.Style({
            image: new ol.style.Icon({
                src: require('@/assets/img/collection/scdw.png'),
                anchorOrigin: "top-left",
                anchorXUnits: "fraction",
@@ -2235,7 +2235,7 @@
//openlayer 地图点击事件
export function setClick(state) {
    let ponitPanel = document.getElementById('ponitPanel');
    let overlay = new Overlay({
    let overlay = new ol.Overlay({
        element: ponitPanel,
        autoPan: {
            animation: {
@@ -2250,6 +2250,8 @@
        window.map.forEachFeatureAtPixel(e.pixel, function (feature) {
            // console.log(feature, '111111')
            if (feature && feature.values_.desc) {
                ponitPanel.style.display = 'block'

                let obj = feature.values_.desc
                objdata = {
                    POITYPE: "POINT",
@@ -2269,7 +2271,10 @@
                        <span>地址：</span>
                       <span>${objdata.address}</span>
                    </div>`
                overlay.setPosition(e.coordinate);

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

                // store.setPoplayerShowAction(true);
                // store.setPoplayerListAction(objdata);
@@ -2288,31 +2293,33 @@
    if (state) {
        clickEvent = window.map.on('click', handleClick);
    } else {
        unByKey(clickEvent)
        ol.Observable.unByKey(clickEvent)
        clickEvent = null
    }
}


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