From 290aa4c2bcd83c584e0b10cab76131c069bf64b7 Mon Sep 17 00:00:00 2001
From: 少年 <1392120328@qq.com>
Date: 星期三, 13 三月 2024 10:44:25 +0800
Subject: [PATCH] youhua
---
src/components/sideMenu/layerTreePanel/layerTreePanel2.vue | 183 +++++++++++++++++++++++----------------------
1 files changed, 93 insertions(+), 90 deletions(-)
diff --git a/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue b/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
index df8e56b..51426ba 100644
--- a/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
+++ b/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
@@ -69,19 +69,20 @@
import store from "@/utils/store2.js";
import axios from "axios";
-import Vector from "ol/source/Vector";
-import GeoJSON from "ol/format/GeoJSON";
-import Cluster from "ol/source/Cluster";
-import Style from "ol/style/Style";
-import Circle from "ol/style/Circle";
-import Stroke from "ol/style/Stroke";
-import Fill from "ol/style/Fill";
-import Text from "ol/style/Text";
-import Icon from "ol/style/Icon";
-import VectorLayer from "ol/layer/Vector";
-import ImageWMS from "ol/source/ImageWMS";
-import Image from "ol/layer/Image";
+import Vector from "ol/source/Vector";
+// import GeoJSON from "ol/format/GeoJSON";
+// import Cluster from "ol/source/Cluster";
+// import Style from "ol/style/Style";
+// import Circle from "ol/style/Circle";
+// import Stroke from "ol/style/Stroke";
+// import Fill from "ol/style/Fill";
+// import Text from "ol/style/Text";
+// import Icon from "ol/style/Icon";
+// import VectorLayer from "ol/layer/Vector";
+
+// import ImageWMS from "ol/source/ImageWMS";
+// import Image from "ol/layer/Image";
export default {
name: "LayerTreePanel",
@@ -1017,8 +1018,8 @@
// ""
// );
debugger;
- var layer = new Image({
- source: new ImageWMS({
+ var layer = new ol.layer.Image({
+ source: new ol.source.ImageWMS({
//涓嶈兘璁剧疆涓�0锛屽惁鍒欏湴鍥句笉灞曠ず銆�
ratio: 1,
url: "http://127.0.0.1:8080/geoserver/province/wms",
@@ -1031,7 +1032,7 @@
serverType: "geoserver",
}),
});
- window.map.addLayer(layer);
+ window.mapapi.addLayer(layer);
break;
case "wfs":
// wfs鏁版嵁
@@ -1856,8 +1857,8 @@
},
initLdgCluster(treeNode) {
if (treeNode.checked == false) {
- window.map.removeLayer(window.ldgclusterLayer);
- window.map.removeLayer(window.tldgclusterLayer);
+ window.mapapi.removeLayer(window.ldgclusterLayer);
+ window.mapapi.removeLayer(window.tldgclusterLayer);
return;
}
const loading = this.$loading({
@@ -1868,8 +1869,8 @@
});
// 鍔犺浇 GeoJSON 鏁版嵁
- var vectorSource = new Vector({
- format: new GeoJSON(),
+ var vectorSource = new ol.source.Vector({
+ format: new ol.format.GeoJSON(),
url:
treeNode.urls +
"?version=1.3.0&request=GetFeature&format=json&typename=" +
@@ -1877,7 +1878,7 @@
});
// 鍒涘缓鑱氬悎灞�
- var clusterSource = new Cluster({
+ var clusterSource = new ol.source.Cluster({
distance: 40,
source: vectorSource,
});
@@ -1885,13 +1886,13 @@
// 鍒涘缓鑱氬悎鏄剧ず鏍峰紡
var styleCache = {};
if (treeNode.name == "璺伅鏉� ") {
- window.ldgclusterLayer = new VectorLayer({
+ window.ldgclusterLayer = new ol.layer.Vector({
source: clusterSource,
style: function (feature) {
var size = feature.get("features").length;
- if (size == 1) {
- return new Style({
- image: new Icon({
+ if (size <= 100) {
+ return new ol.style.Style({
+ image: new ol.style.Icon({
anchor: [0.5, 1],
src: treeNode.image,
}),
@@ -1900,14 +1901,14 @@
if (size > 1000) {
var style = styleCache[size];
if (!style) {
- style = new Style({
- image: new Icon({
+ style = new ol.style.Style({
+ image: new ol.style.Icon({
scale: 0.4,
src: require("@/assets/img/right/test01.png"),
}),
- text: new Text({
+ text: new ol.style.Text({
text: size.toString(),
- fill: new Fill({
+ fill: new ol.style.Fill({
color: "#fff",
}),
}),
@@ -1918,15 +1919,15 @@
}
var style = styleCache[size];
if (!style) {
- style = new Style({
- image: new Icon({
+ style = new ol.style.Style({
+ image: new ol.style.Icon({
// anchor: [0.5, 1],
scale: 0.3,
src: require("@/assets/img/right/jh.png"),
}),
- text: new Text({
+ text: new ol.style.Text({
text: size.toString(),
- fill: new Fill({
+ fill: new ol.style.Fill({
color: "#fff",
}),
}),
@@ -1937,15 +1938,15 @@
},
});
- window.map.addLayer(window.ldgclusterLayer);
+ window.mapapi.addLayer(window.ldgclusterLayer);
} else if (treeNode.name == "璺悕鐗屾潌 ") {
- window.tldgclusterLayer = new VectorLayer({
+ window.tldgclusterLayer = new ol.layer.Vector({
source: clusterSource,
style: function (feature) {
var size = feature.get("features").length;
- if (size == 1) {
- return new Style({
- image: new Icon({
+ if (size <= 100) {
+ return new ol.style.Style({
+ image: new ol.style.Icon({
anchor: [0.5, 1],
src: treeNode.image,
}),
@@ -1954,14 +1955,14 @@
if (size > 1000) {
var style = styleCache[size];
if (!style) {
- style = new Style({
- image: new Icon({
+ style = new ol.style.Style({
+ image: new ol.style.Icon({
scale: 0.4,
src: require("@/assets/img/right/test01.png"),
}),
- text: new Text({
+ text: new ol.style.Text({
text: size.toString(),
- fill: new Fill({
+ fill: new ol.style.Fill({
color: "#fff",
}),
}),
@@ -1972,15 +1973,15 @@
}
var style = styleCache[size];
if (!style) {
- style = new Style({
- image: new Icon({
+ style = new ol.style.Style({
+ image: new ol.style.Icon({
// anchor: [0.5, 1],
scale: 0.3,
src: require("@/assets/img/right/jh.png"),
}),
- text: new Text({
+ text: new ol.style.Text({
text: size.toString(),
- fill: new Fill({
+ fill: new ol.style.Fill({
color: "#fff",
}),
}),
@@ -1991,17 +1992,17 @@
},
});
- window.map.addLayer(window.tldgclusterLayer);
+ window.mapapi.addLayer(window.tldgclusterLayer);
}
// 灏嗚仛鍚堝眰鍔犲叆鍦板浘
- window.map.removeLayer(window.jkspclusterLayer);
- window.map.removeLayer(window.qiyeclusterLayer);
+ window.mapapi.removeLayer(window.jkspclusterLayer);
+ window.mapapi.removeLayer(window.qiyeclusterLayer);
loading.close();
},
initCluster(treeNode) {
if (treeNode.checked == false) {
- window.map.removeLayer(window.jkspclusterLayer);
+ window.mapapi.removeLayer(window.jkspclusterLayer);
return;
}
const loading = this.$loading({
@@ -2011,8 +2012,8 @@
background: "rgba(0, 0, 0, 0.7)",
});
// 鍔犺浇 GeoJSON 鏁版嵁
- var vectorSource = new Vector({
- format: new GeoJSON(),
+ var vectorSource = new ol.source.Vector({
+ format: new ol.format.GeoJSON(),
url:
treeNode.urls +
"?version=1.3.0&request=GetFeature&format=json&typename=" +
@@ -2020,37 +2021,37 @@
});
// 鍒涘缓鑱氬悎灞�
- var clusterSource = new Cluster({
+ var clusterSource = new ol.source.Cluster({
distance: 40,
source: vectorSource,
});
// 鍒涘缓鑱氬悎鏄剧ず鏍峰紡
var styleCache = {};
- window.jkspclusterLayer = new VectorLayer({
+ window.jkspclusterLayer = new ol.layer.Vector({
source: clusterSource,
style: function (feature) {
var size = feature.get("features").length;
- if (size == 1) {
- return new Style({
- image: new Icon({
+ if (size <= 100) {
+ return new ol.style.Style({
+ image: new ol.style.Icon({
anchor: [0.5, 1],
- src: "./static/SmartEarthSDK/Workers/image/xzspj/spjk.png",
+ src: "./static/SmartEarthSDK/Workers/image/xzspj/camera.png",
}),
});
}
if (size > 1000) {
var style = styleCache[size];
if (!style) {
- style = new Style({
- image: new Icon({
+ style = new ol.style.Style({
+ image: new ol.style.Icon({
// anchor: [0.5, 1],
scale: 0.4,
src: require("@/assets/img/right/test01.png"),
}),
- text: new Text({
+ text: new ol.style.Text({
text: size.toString(),
- fill: new Fill({
+ fill: new ol.style.Fill({
color: "#fff",
}),
}),
@@ -2061,15 +2062,15 @@
}
var style = styleCache[size];
if (!style) {
- style = new Style({
- image: new Icon({
+ style = new ol.style.Style({
+ image: new ol.style.Icon({
// anchor: [0.5, 1],
scale: 0.3,
src: require("@/assets/img/right/jh.png"),
}),
- text: new Text({
+ text: new ol.style.Text({
text: size.toString(),
- fill: new Fill({
+ fill: new ol.style.Fill({
color: "#fff",
}),
}),
@@ -2081,10 +2082,10 @@
});
// 灏嗚仛鍚堝眰鍔犲叆鍦板浘
- window.map.removeLayer(window.ldgclusterLayer);
- window.map.removeLayer(window.tldgclusterLayer);
- window.map.removeLayer(window.qiyeclusterLayer);
- window.map.addLayer(window.jkspclusterLayer);
+ window.mapapi.removeLayer(window.ldgclusterLayer);
+ window.mapapi.removeLayer(window.tldgclusterLayer);
+ window.mapapi.removeLayer(window.qiyeclusterLayer);
+ window.mapapi.addLayer(window.jkspclusterLayer);
loading.close();
// new Cesium.GeoJsonDataSource.load(
// treeNode.urls +
@@ -2273,9 +2274,10 @@
// });
});
},
+ //浼佷笟淇℃伅鍔犺浇
qiyeCluster(treeNode) {
if (treeNode.checked == false) {
- window.map.removeLayer(window.qiyeclusterLayer);
+ window.mapapi.removeLayer(window.qiyeclusterLayer);
return;
}
const loading = this.$loading({
@@ -2285,29 +2287,30 @@
background: "rgba(0, 0, 0, 0.7)",
});
// 鍔犺浇 GeoJSON 鏁版嵁
- var vectorSource = new Vector({
- format: new GeoJSON(),
+ var vectorSource = new ol.source.Vector({
+ format: new ol.format.GeoJSON(),
url:
treeNode.urls +
"?version=1.3.0&request=GetFeature&format=json&typename=" +
treeNode.layer,
});
+
// 鍒涘缓鑱氬悎灞�
- var clusterSource = new Cluster({
- distance: 40,
+ var clusterSource = new ol.source.Cluster({
+ distance: 200,
source: vectorSource,
});
// 鍒涘缓鑱氬悎鏄剧ず鏍峰紡
var styleCache = {};
- window.qiyeclusterLayer = new VectorLayer({
+ window.qiyeclusterLayer = new ol.layer.Vector({
source: clusterSource,
style: function (feature) {
var size = feature.get("features").length;
- if (size == 1) {
- return new Style({
- image: new Icon({
+ if (size <= 1300) {
+ return new ol.style.Style({
+ image: new ol.style.Icon({
anchor: [0.5, 1],
src: treeNode.image,
}),
@@ -2316,15 +2319,15 @@
if (size > 1000) {
var style = styleCache[size];
if (!style) {
- style = new Style({
- image: new Icon({
+ style = new ol.style.Style({
+ image: new ol.style.Icon({
// anchor: [0.5, 1],
scale: 0.4,
src: require("@/assets/img/right/test01.png"),
}),
- text: new Text({
+ text: new ol.style.Text({
text: size.toString(),
- fill: new Fill({
+ fill: new ol.style.Fill({
color: "#fff",
}),
}),
@@ -2335,15 +2338,15 @@
}
var style = styleCache[size];
if (!style) {
- style = new Style({
- image: new Icon({
+ style = new ol.style.Style({
+ image: new ol.style.Icon({
// anchor: [0.5, 1],
scale: 0.3,
src: require("@/assets/img/right/jh.png"),
}),
- text: new Text({
+ text: new ol.style.Text({
text: size.toString(),
- fill: new Fill({
+ fill: new ol.style.Fill({
color: "#fff",
}),
}),
@@ -2377,10 +2380,10 @@
});
// 灏嗚仛鍚堝眰鍔犲叆鍦板浘
- window.map.removeLayer(window.ldgclusterLayer);
- window.map.removeLayer(window.tldgclusterLayer);
- window.map.removeLayer(window.jkspclusterLayer);
- window.map.addLayer(window.qiyeclusterLayer);
+ window.mapapi.removeLayer(window.ldgclusterLayer);
+ window.mapapi.removeLayer(window.tldgclusterLayer);
+ window.mapapi.removeLayer(window.jkspclusterLayer);
+ window.mapapi.addLayer(window.qiyeclusterLayer);
loading.close();
// let dataSource;
--
Gitblit v1.9.3