From 5964bd44f4e28a46fb6f15bd2b5205867b8ea86b Mon Sep 17 00:00:00 2001
From: 少年 <1392120328@qq.com>
Date: 星期二, 06 二月 2024 15:37:46 +0800
Subject: [PATCH] 11
---
src/utils/map2.js | 127 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 126 insertions(+), 1 deletions(-)
diff --git a/src/utils/map2.js b/src/utils/map2.js
index d9bef5e..977fba4 100644
--- a/src/utils/map2.js
+++ b/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,
+ }
+ );
+}
\ No newline at end of file
--
Gitblit v1.9.3