diff --git a/src/app/OlMap/Controls/LayerControl.tsx b/src/app/OlMap/Controls/LayerControl.tsx index 0785ed2..039ab69 100644 --- a/src/app/OlMap/Controls/LayerControl.tsx +++ b/src/app/OlMap/Controls/LayerControl.tsx @@ -4,6 +4,7 @@ import { Layer } from "ol/layer"; import { Checkbox, FormControlLabel } from "@mui/material"; import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile"; import VectorLayer from "ol/layer/Vector"; +import VectorTileLayer from "ol/layer/VectorTile"; const LayerControl: React.FC = () => { const map = useMap(); @@ -19,7 +20,7 @@ const LayerControl: React.FC = () => { .getArray() .filter( (layer) => - layer instanceof WebGLVectorTileLayer || layer instanceof VectorLayer + layer instanceof WebGLVectorTileLayer || layer instanceof VectorTileLayer || layer instanceof VectorLayer ) as Layer[]; setLayers(mapLayers); const visible = new Map(); diff --git a/src/app/OlMap/MapComponent.tsx b/src/app/OlMap/MapComponent.tsx index 78a3314..673d143 100644 --- a/src/app/OlMap/MapComponent.tsx +++ b/src/app/OlMap/MapComponent.tsx @@ -26,7 +26,7 @@ import { CollisionFilterExtension } from "@deck.gl/extensions"; import VectorSource from "ol/source/Vector"; import GeoJson from "ol/format/GeoJSON"; import VectorLayer from "ol/layer/Vector"; -import { Icon, Style } from "ol/style.js"; +import { Icon, Stroke, Style } from "ol/style.js"; import { FeatureLike } from "ol/Feature"; import { Point } from "ol/geom"; import VectorTileLayer from "ol/layer/VectorTile"; @@ -216,39 +216,15 @@ const MapComponent: React.FC = ({ children }) => { }); }; // 定义 valves 图层的样式函数,使用固定图标 - const valveStyle = function (feature: FeatureLike) { - const styles = []; + const valveStyle = () => { const valveIcon = "/icons/valve.svg"; - - const geometry = feature.getGeometry(); - const lineCoords = - geometry?.getType() === "LineString" - ? (geometry as any).getCoordinates() - : null; - if (geometry) { - const lineCoordsWGS84 = lineCoords.map((coord: []) => { - const [lon, lat] = toLonLat(coord); - return [lon, lat]; - }); - // 计算中点 - const lineStringFeature = lineString(lineCoordsWGS84); - const lineLength = length(lineStringFeature); - const midPoint = along(lineStringFeature, lineLength / 2).geometry - .coordinates; - // 在中点添加 icon 样式 - const midPointMercator = toMercator(midPoint); - styles.push( - new Style({ - geometry: new Point(midPointMercator), - image: new Icon({ - src: valveIcon, - scale: 0.12, - anchor: [0.5, 0.5], - }), - }) - ); - } - return styles; + return new Style({ + image: new Icon({ + src: valveIcon, + scale: 0.1, // 根据需要调整图标大小 + anchor: [0.5, 0.5], // 图标锚点居中 + }), + }); }; // 定义 pumps 图层的样式函数,使用固定图标 const pumpStyle = function (feature: FeatureLike) { @@ -590,12 +566,12 @@ const MapComponent: React.FC = ({ children }) => { // 明确顺序(点类优先) const order = [ "junctions", - "reservoirs", - "tanks", "scada", - "pipes", - "valves", + "reservoirs", "pumps", + "tanks", + "valves", + "pipes", ].reverse(); // 取值时做安全检查,兼容不同写法(properties.value 或 直接 value) const getValue = (layer: any) => { @@ -611,7 +587,6 @@ const MapComponent: React.FC = ({ children }) => { if (ib === -1) ib = order.length; return ia - ib; }); - console.log("Available Layers:", availableLayers); const map = new OlMap({ target: mapRef.current, view: new View({ diff --git a/src/config/config.ts b/src/config/config.ts index 8639686..74f6649 100644 --- a/src/config/config.ts +++ b/src/config/config.ts @@ -18,7 +18,7 @@ export const config = { 12, 1, // 在缩放级别 12 时,圆形半径为 1px 24, - 12, // 在缩放级别 24 时,圆形半径为 12px + 8, // 在缩放级别 24 时,圆形半径为 8px ], }, MAP_AVAILABLE_LAYERS: process.env.NEXT_PUBLIC_MAP_AVAILABLE_LAYERS