From fa05dfcce55b8589d7f76175700a92fe196dcd9b Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期三, 13 三月 2024 17:59:52 +0800
Subject: [PATCH] 图层切换叠压
---
src/components/sideMenu/layerTreePanel/layerTreePanel2.vue | 291 +++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 176 insertions(+), 115 deletions(-)
diff --git a/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue b/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
index df8e56b..37f4ab1 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鏁版嵁
@@ -1854,10 +1855,11 @@
layer.item.baseLayer = true;
}
},
+ // 甯傛斂鏉嗕綋鑱氬悎
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 +1870,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 +1879,7 @@
});
// 鍒涘缓鑱氬悎灞�
- var clusterSource = new Cluster({
+ var clusterSource = new ol.source.Cluster({
distance: 40,
source: vectorSource,
});
@@ -1885,13 +1887,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({
+ return new ol.style.Style({
+ image: new ol.style.Icon({
anchor: [0.5, 1],
src: treeNode.image,
}),
@@ -1900,14 +1902,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 +1920,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 +1939,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({
+ return new ol.style.Style({
+ image: new ol.style.Icon({
anchor: [0.5, 1],
src: treeNode.image,
}),
@@ -1954,14 +1956,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 +1974,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 +1993,30 @@
},
});
- 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();
+ window.mapapi.getView().on("change:resolution", function (event) {
+ if (
+ window.mapapi.getView().getZoom() ==
+ window.mapapi.getView().getMaxZoom()
+ ) {
+ console.log("max");
+
+ clusterSource.setDistance(0);
+ } else {
+ clusterSource.setDistance(40);
+ }
+ });
},
+ // 瑙嗛鐩戞帶鑱氬悎
initCluster(treeNode) {
if (treeNode.checked == false) {
- window.map.removeLayer(window.jkspclusterLayer);
+ window.mapapi.removeLayer(window.jkspclusterLayer);
return;
}
const loading = this.$loading({
@@ -2011,8 +2026,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 +2035,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({
+ 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 +2076,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,11 +2096,23 @@
});
// 灏嗚仛鍚堝眰鍔犲叆鍦板浘
- 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();
+ window.mapapi.getView().on("change:resolution", function (event) {
+ if (
+ window.mapapi.getView().getZoom() ==
+ window.mapapi.getView().getMaxZoom()
+ ) {
+ console.log("max");
+
+ clusterSource.setDistance(0);
+ } else {
+ clusterSource.setDistance(40);
+ }
+ });
// new Cesium.GeoJsonDataSource.load(
// treeNode.urls +
// "?version=1.3.0&request=GetFeature&format=json&typename=" +
@@ -2243,39 +2270,11 @@
// loading.close();
// });
},
- testSDKcluster() {
- let clusterLayer1 = new SmartEarth.ClusterLayer(Viewer, {
- style: "clustering",
- });
- axios
- .get(
- window.gisBaseUrl +
- "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=浼佷笟閾句紒涓�"
- )
- .then((res) => {
- let positions = generatePosition(20000);
- positions.forEach((item) => {
- clusterLayer1.add(item, {
- image: "./static/SmartEarthSDK/Workers/image/xzspj/qiye.png",
- });
- });
- // res.data.features.forEach((item) => {
- // clusterLayer1.add(
- // new SmartEarth.Degrees(
- // item.geometry.coordinates[0],
- // item.geometry.coordinates[1]
- // ),
- // {
- // name: `QY&${item.properties.ID}&${item.properties["QYMC"]}&${item.properties["DZ"]}&${item.properties["BZDZ"]}&${item.properties["XYDM"]}&${item.geometry.coordinates[0]}&${item.geometry.coordinates[1]}`,
- // image: SmartEarthRootUrl + "Workers/image/mark.png",
- // }
- // );
- // });
- });
- },
+
+ //浼佷笟淇℃伅鑱氬悎
qiyeCluster(treeNode) {
if (treeNode.checked == false) {
- window.map.removeLayer(window.qiyeclusterLayer);
+ window.mapapi.removeLayer(window.qiyeclusterLayer);
return;
}
const loading = this.$loading({
@@ -2285,8 +2284,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=" +
@@ -2294,20 +2293,20 @@
});
// 鍒涘缓鑱氬悎灞�
- var clusterSource = new Cluster({
+ var clusterSource = new ol.source.Cluster({
distance: 40,
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({
+ return new ol.style.Style({
+ image: new ol.style.Icon({
anchor: [0.5, 1],
src: treeNode.image,
}),
@@ -2316,15 +2315,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 +2334,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,12 +2376,43 @@
});
// 灏嗚仛鍚堝眰鍔犲叆鍦板浘
- 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();
+ window.mapapi.getView().on("change:resolution", function (event) {
+ if (
+ window.mapapi.getView().getZoom() ==
+ window.mapapi.getView().getMaxZoom()
+ ) {
+ clusterSource.setDistance(0);
+ } else {
+ clusterSource.setDistance(40);
+ }
+ });
+ // 鐩戝惉鍦板浘鍗曞嚮浜嬩欢
+ // window.mapapi.on("singleclick", function (e) {
+ // var pixel = window.mapapi.getEventPixel(e.originalEvent);
+ // var currentFeature = window.mapapi.forEachFeatureAtPixel(
+ // pixel,
+ // function (feature, layer) {
+ // return feature;
+ // }
+ // );
+ // if (currentFeature) {
+ // var features = currentFeature.get("features");
+ // if (features.length > 1) {
+ // console.log(features);
+ // window.alert("褰撳墠鑱氬悎鍦堜笅鍏辨湁" + features.length + "涓绱�");
+ // }
+ // if (features.length == 1) {
+ // console.log(features);
+ // window.alert("褰撳墠瑕佺礌鏈鑱氬悎锛屽彧鏈�" + features.length + "涓绱�");
+ // }
+ // }
+ // });
// let dataSource;
// if (treeNode.layer == "浼佷笟閾句紒涓�") {
// // console.log(store.qiyeJsonInfo);
@@ -2477,6 +2507,37 @@
// cluster.billboard.height = 40;
// }
// });
+ },
+
+ testSDKcluster() {
+ let clusterLayer1 = new SmartEarth.ClusterLayer(Viewer, {
+ style: "clustering",
+ });
+ axios
+ .get(
+ window.gisBaseUrl +
+ "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=浼佷笟閾句紒涓�"
+ )
+ .then((res) => {
+ let positions = generatePosition(20000);
+ positions.forEach((item) => {
+ clusterLayer1.add(item, {
+ image: "./static/SmartEarthSDK/Workers/image/xzspj/qiye.png",
+ });
+ });
+ // res.data.features.forEach((item) => {
+ // clusterLayer1.add(
+ // new SmartEarth.Degrees(
+ // item.geometry.coordinates[0],
+ // item.geometry.coordinates[1]
+ // ),
+ // {
+ // name: `QY&${item.properties.ID}&${item.properties["QYMC"]}&${item.properties["DZ"]}&${item.properties["BZDZ"]}&${item.properties["XYDM"]}&${item.geometry.coordinates[0]}&${item.geometry.coordinates[1]}`,
+ // image: SmartEarthRootUrl + "Workers/image/mark.png",
+ // }
+ // );
+ // });
+ });
},
// initCluster(treeNode) {
// let that = this;
--
Gitblit v1.9.3