OrgTJWater/TJWaterServer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新环境变量

Browse Source
This commit is contained in:
JIANG
2025-11-10 14:45:45 +08:00
parent 82e6706019
commit 929fafe9af
7 changed files with 33 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/OlMap/MapComponent.tsx
View File

@@ -81,8 +81,9 @@ class DeckLayer extends Layer {
const MapContext = createContext<OlMap | undefined>(undefined);
const DataContext = createContext<DataContextType | undefined>(undefined);
const extent = config.mapExtent;
const mapUrl = config.mapUrl;
const MAP_EXTENT = config.MAP_EXTENT;
const MAP_URL = config.MAP_URL;
const MAP_WORKSPACE = config.MAP_WORKSPACE;
// 添加防抖函数
function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
@@ -176,7 +177,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
}
};
// 配置地图数据源、图层和样式
const defaultFlatStyle: FlatStyleLike = config.mapDefaultStyle;
const defaultFlatStyle: FlatStyleLike = config.MAP_DEFAULT_STYLE;
// 定义 SCADA 图层的样式函数，根据 type 字段选择不同图标
const scadaStyle = (feature: any) => {
const type = feature.get("type");
@@ -239,32 +240,32 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
};
// 矢量瓦片数据源和图层
const junctionSource = new VectorTileSource({
url: `${mapUrl}/gwc/service/tms/1.0.0/TJWater:geo_junctions_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL
url: `${MAP_URL}/gwc/service/tms/1.0.0/${MAP_WORKSPACE}:geo_junctions_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL
format: new MVT(),
projection: "EPSG:3857",
});
const pipeSource = new VectorTileSource({
url: `${mapUrl}/gwc/service/tms/1.0.0/TJWater:geo_pipes_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL
url: `${MAP_URL}/gwc/service/tms/1.0.0/${MAP_WORKSPACE}:geo_pipes_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL
format: new MVT(),
projection: "EPSG:3857",
});
const scadaSource = new VectorSource({
url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_scada&outputFormat=application/json`,
url: `${MAP_URL}/${MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${MAP_WORKSPACE}:geo_scada&outputFormat=application/json`,
format: new GeoJson(),
});
const reservoirsSource = new VectorSource({
url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_reservoirs&outputFormat=application/json`,
url: `${MAP_URL}/${MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${MAP_WORKSPACE}:geo_reservoirs&outputFormat=application/json`,
format: new GeoJson(),
});
const valvesSource = new VectorSource({
url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_valves&outputFormat=application/json`,
url: `${MAP_URL}/${MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${MAP_WORKSPACE}:geo_valves&outputFormat=application/json`,
format: new GeoJson(),
});
// WebGL 渲染优化显示
const junctionLayer = new WebGLVectorTileLayer({
source: junctionSource as any, // 使用 WebGL 渲染
style: defaultFlatStyle,
extent: extent, // 设置图层范围
extent: MAP_EXTENT, // 设置图层范围
maxZoom: 24,
minZoom: 12,
properties: {
@@ -284,7 +285,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const pipeLayer = new WebGLVectorTileLayer({
source: pipeSource as any, // 使用 WebGL 渲染
style: defaultFlatStyle,
extent: extent, // 设置图层范围
extent: MAP_EXTENT, // 设置图层范围
maxZoom: 24,
minZoom: 12,
properties: {
@@ -322,7 +323,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const reservoirsLayer = new VectorLayer({
source: reservoirsSource,
style: reservoirsStyle,
extent: extent, // 设置图层范围
extent: MAP_EXTENT, // 设置图层范围
maxZoom: 24,
minZoom: 12,
properties: {
@@ -335,7 +336,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const valvesLayer = new VectorLayer({
source: valvesSource,
style: valvesStyle,
extent: extent, // 设置图层范围
extent: MAP_EXTENT, // 设置图层范围
maxZoom: 24,
minZoom: 12,
properties: {
@@ -492,7 +493,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
controls: [],
});
setMap(map);
map.getView().fit(extent, {
map.getView().fit(MAP_EXTENT, {
padding: [50, 50, 50, 50], // 添加一些内边距
duration: 1000, // 动画持续时间
});