|
@@ -125,6 +125,7 @@ import icon02 from "../../assets/img/icon02.png";
|
|
|
import icon03 from "../../assets/img/icon03.png";
|
|
|
import icon04 from "../../assets/img/icon04.png";
|
|
|
import icon05 from "../../assets/img/icon05.png";
|
|
|
+import icon06 from "../../assets/img/icon06.png";
|
|
|
import defaultIcon from "../../assets/img/icon05.png";
|
|
|
export default {
|
|
|
props: {
|
|
@@ -183,8 +184,8 @@ export default {
|
|
|
layers: [
|
|
|
new TileLayer({
|
|
|
source: new XYZ({
|
|
|
- // url: "http://127.0.0.1:8010/tiles/{z}/{x}/{y}.png", //本地
|
|
|
- url: "http://192.168.50.235/tiles/{z}/{x}/{y}.png", //内网
|
|
|
+ url: "http://127.0.0.1:8010/tiles/{z}/{x}/{y}.png", //本地
|
|
|
+ // url: "http://192.168.50.235/tiles/{z}/{x}/{y}.png", //内网
|
|
|
// url: "http://106.120.102.238:18000/tiles/{z}/{x}/{y}.png", //外网
|
|
|
}),
|
|
|
}),
|
|
@@ -263,6 +264,8 @@ export default {
|
|
|
return icon04;
|
|
|
case "5":
|
|
|
return icon05;
|
|
|
+ case "6":
|
|
|
+ return icon06;
|
|
|
default:
|
|
|
return defaultIcon;
|
|
|
}
|
|
@@ -271,57 +274,65 @@ export default {
|
|
|
/**
|
|
|
* 初始化地图事件
|
|
|
*/
|
|
|
- initEvent() {
|
|
|
- this.map.on("pointermove", (evt) => {
|
|
|
- const features = this.map.getFeaturesAtPixel(evt.pixel, {
|
|
|
- hitTolerance: 1,
|
|
|
- });
|
|
|
- if (features && features.length > 0) {
|
|
|
- const feature = features.at(0);
|
|
|
- const val = feature.get("data").val;
|
|
|
- if (val == "1") {
|
|
|
- this.hoverInfo = feature.get("data");
|
|
|
- this.hoverStyle.left = `${evt.pixel[0] + 10}px`;
|
|
|
- this.hoverStyle.top = `${evt.pixel[1] - 150}px`;
|
|
|
- } else if (val == "4") {
|
|
|
- this.hoverfengji = feature.get("data");
|
|
|
- this.hoverfengjiStyle.left = `${evt.pixel[0] + 10}px`;
|
|
|
- this.hoverfengjiStyle.top = `${evt.pixel[1] - 150}px`;
|
|
|
- this.currentFeatureData = feature.get("data");
|
|
|
- } else if (val == "5") {
|
|
|
- this.hoverta = feature.get("data");
|
|
|
- this.hovertaStyle.left = `${evt.pixel[0] + 10}px`;
|
|
|
- this.hovertaStyle.top = `${evt.pixel[1] - 150}px`;
|
|
|
- this.currentFeatureData = feature.get("data");
|
|
|
- } else {
|
|
|
- this.hoverInfo = null;
|
|
|
- this.hoverfengji = false;
|
|
|
- this.hoverta = false;
|
|
|
- this.currentFeatureData = null;
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.hoverInfo = null;
|
|
|
- this.hoverfengji = false;
|
|
|
- this.hoverta = false;
|
|
|
- this.currentFeatureData = null;
|
|
|
- }
|
|
|
- });
|
|
|
- this.map.on("click", (evt) => {
|
|
|
- const features = this.map.getFeaturesAtPixel(evt.pixel, {
|
|
|
- hitTolerance: 1,
|
|
|
- });
|
|
|
- if (features && features.length > 0) {
|
|
|
- const feature = features.at(0);
|
|
|
- this.$emit("feature-click", feature.get("data"));
|
|
|
- }
|
|
|
- if (this.currentFeatureData && this.currentFeatureData.val === "4") {
|
|
|
- this.handleFeatureClick(this.currentFeatureData);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- handleFeatureClick(featureData) {
|
|
|
- console.log("Feature with val === '4' clicked:", featureData);
|
|
|
- },
|
|
|
+ initEvent() {
|
|
|
+ this.map.on("pointermove", (evt) => {
|
|
|
+ const features = this.map.getFeaturesAtPixel(evt.pixel, {
|
|
|
+ hitTolerance: 1,
|
|
|
+ });
|
|
|
+ if (features && features.length > 0) {
|
|
|
+ const feature = features.at(0);
|
|
|
+ const val = feature.get("data").val;
|
|
|
+ if (val == "1") {
|
|
|
+ this.hoverInfo = feature.get("data");
|
|
|
+ this.hoverStyle.left = `${evt.pixel[0] + 10}px`;
|
|
|
+ this.hoverStyle.top = `${evt.pixel[1] - 150}px`;
|
|
|
+ } else if (val == "4") {
|
|
|
+ this.hoverfengji = feature.get("data");
|
|
|
+ this.hoverfengjiStyle.left = `${evt.pixel[0] + 10}px`;
|
|
|
+ this.hoverfengjiStyle.top = `${evt.pixel[1] - 150}px`;
|
|
|
+ this.currentFeatureData = feature.get("data");
|
|
|
+ } else if (val == "5") {
|
|
|
+ this.hoverta = feature.get("data");
|
|
|
+ this.hovertaStyle.left = `${evt.pixel[0] + 10}px`;
|
|
|
+ this.hovertaStyle.top = `${evt.pixel[1] - 150}px`;
|
|
|
+ this.currentFeatureData = feature.get("data");
|
|
|
+ } else if (val == "6") {
|
|
|
+ this.currentFeatureData = feature.get("data");
|
|
|
+ } else {
|
|
|
+ this.hoverInfo = null;
|
|
|
+ this.hoverfengji = false;
|
|
|
+ this.hoverta = false;
|
|
|
+ this.currentFeatureData = null;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.hoverInfo = null;
|
|
|
+ this.hoverfengji = false;
|
|
|
+ this.hoverta = false;
|
|
|
+ this.currentFeatureData = null;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.map.on("click", (evt) => {
|
|
|
+ const features = this.map.getFeaturesAtPixel(evt.pixel, {
|
|
|
+ hitTolerance: 1,
|
|
|
+ });
|
|
|
+ if (features && features.length > 0) {
|
|
|
+ const feature = features.at(0);
|
|
|
+ const val = feature.get("data").val;
|
|
|
+ if (val === "6") {
|
|
|
+ this.handleFeatureClick(feature.get("data"));
|
|
|
+ } else {
|
|
|
+ this.$emit("feature-click", feature.get("data"));
|
|
|
+ }
|
|
|
+ } else if (this.currentFeatureData && this.currentFeatureData.val === "6") {
|
|
|
+ this.handleFeatureClick(this.currentFeatureData);
|
|
|
+ }
|
|
|
+ });
|
|
|
+},
|
|
|
+handleFeatureClick(featureData) {
|
|
|
+alert('555555')
|
|
|
+},
|
|
|
+
|
|
|
|
|
|
/**
|
|
|
* 平移缩放
|