diff --git a/public/static/libs/mapbox/style/HaiMianScreen.json b/public/static/libs/mapbox/style/HaiMianScreen.json index ac6803f..6acc50d 100644 --- a/public/static/libs/mapbox/style/HaiMianScreen.json +++ b/public/static/libs/mapbox/style/HaiMianScreen.json @@ -2,9 +2,14 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": ["/static/libs/mapbox/style/sprite/sprite5"], + "sprites": [ + "/static/libs/mapbox/style/sprite/sprite5" + ], "init": { - "center": [114.312, 34.802], + "center": [ + 114.312, + 34.802 + ], "zoom": 12.9, "pitch": 55, "style": "/static/libs/mapbox/style/customs/whiteMapStyle.json" @@ -29,7 +34,16 @@ "params": { "id": "newfiber-XYZLayer", "url": "https://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=a603e07a17766447f9e74f14c5454efa", - "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"], + "subdomains": [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7" + ], "minZoom": 1, "maxZoom": 19, "tileType": "" @@ -37,7 +51,9 @@ "methods": [ { "name": "addTo", - "params": ["''||map"] + "params": [ + "''||map" + ] }, { "name": "hide", @@ -51,7 +67,16 @@ "params": { "id": "newfiber-WMTSLayer", "url": "https://t{s}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=5095c97223409ac114493d71ecb9cd87", - "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"] + "subdomains": [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7" + ] }, "methods": [] }, @@ -60,7 +85,12 @@ "type": "CanvasLayer", "params": { "id": "newfiber-CanvasLayer", - "bbox": [110.98300209463804, 32.415967161418266, 111.34992583909221, 32.599933881244255], + "bbox": [ + 110.98300209463804, + 32.415967161418266, + 111.34992583909221, + 32.599933881244255 + ], "width": 3000, "height": 1172, "images": "''||Array(16).fill().map((i,idx)=> `https://server1.wh-nf.cn:9000/newfiber-standard/2024/01/06/step${idx+1}.png`)" @@ -91,7 +121,9 @@ "methods": [ { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "color", @@ -133,15 +165,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -187,15 +225,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -242,19 +286,28 @@ "methods": [ { "name": "shape", - "params": ["circle"] + "params": [ + "circle" + ] }, { "name": "color", - "params": ["rgba(236,223,25,1.0)"] + "params": [ + "rgba(236,223,25,1.0)" + ] }, { "name": "size", - "params": ["size", "''||function(v){return v}"] + "params": [ + "size", + "''||function(v){return v}" + ] }, { "name": "animate", - "params": [true] + "params": [ + true + ] }, { "name": "style", @@ -278,15 +331,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -331,19 +390,27 @@ "methods": [ { "name": "shape", - "params": ["circle"] + "params": [ + "circle" + ] }, { "name": "color", - "params": ["rgba(255,0,0,1.0)"] + "params": [ + "rgba(255,0,0,1.0)" + ] }, { "name": "size", - "params": [10] + "params": [ + 10 + ] }, { "name": "animate", - "params": [true] + "params": [ + true + ] }, { "name": "style", @@ -367,17 +434,24 @@ "methods": [ { "name": "shape", - "params": ["map_selected"] + "params": [ + "map_selected" + ] }, { "name": "size", - "params": [30] + "params": [ + 30 + ] }, { "name": "style", "params": [ { - "offsets": [0, 0] + "offsets": [ + 0, + 0 + ] } ] } @@ -394,15 +468,21 @@ "methods": [ { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "size", - "params": [2] + "params": [ + 2 + ] }, { "name": "color", - "params": ["rgba(189, 209, 150,1)"] + "params": [ + "rgba(189, 209, 150,1)" + ] } ] } @@ -427,9 +507,26 @@ "key": "hn_kf_hm_pipeline", "source-layer": "hn_kf_hm_pipeline", "type": "line", - "filter": ["in", "类型", ""], + "filter": [ + "in", + "类型", + "" + ], "paint": { - "line-color": ["match", ["get", "类型"], "ys", "#1b76ff", "ws", "#ff4c61", "hs", "#d8ad4f", "#000000"], + "line-color": [ + "match", + [ + "get", + "类型" + ], + "ys", + "#1b76ff", + "ws", + "#ff4c61", + "hs", + "#d8ad4f", + "#000000" + ], "line-width": 2 }, "layout": {}, @@ -443,9 +540,16 @@ "key": "hubei_xiaogan_hm_city_boundary", "source-layer": "hubei_xiaogan_hm_city_boundary", "type": "fill", - "filter": ["in", "name", ""], + "filter": [ + "in", + "name", + "" + ], "paint": { - "fill-color": ["get", "fill_color"] + "fill-color": [ + "get", + "fill_color" + ] }, "layout": {}, "minzoom": 10, @@ -458,9 +562,16 @@ "key": "hubei_xiaogan_hm_psfq", "source-layer": "hubei_xiaogan_hm_psfq", "type": "fill", - "filter": ["in", "type", ""], + "filter": [ + "in", + "type", + "" + ], "paint": { - "fill-color": ["get", "fill_color"], + "fill-color": [ + "get", + "fill_color" + ], "fill-opacity": 0.4 }, "layout": {}, @@ -474,17 +585,36 @@ "key": "hn_kf_hm_pipeline_point", "source-layer": "hn_kf_hm_pipeline_point", "type": "symbol", - "filter": ["in", "类型", ""], + "filter": [ + "in", + "类型", + "" + ], "paint": { "text-color": "rgba(255, 255, 255, 1)", "text-halo-color": "rgba(14, 139, 90, 1)", "text-halo-width": 2 }, "layout": { - "icon-image": ["match", ["get", "类型"], "ys", "ysj", "ws", "wsj", "hs", "hsj", "ysbz"], + "icon-image": [ + "match", + [ + "get", + "类型" + ], + "ys", + "ysj", + "ws", + "wsj", + "hs", + "hsj", + "ysbz" + ], "icon-size": 0.5, "text-field": "{管线点号}", - "text-font": ["KlokanTech Noto Sans Regular"], + "text-font": [ + "KlokanTech Noto Sans Regular" + ], "text-size": 13, "text-line-height": 3, "text-anchor": "top" @@ -500,7 +630,11 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": ["in", "type", ""], + "filter": [ + "in", + "type", + "" + ], "paint": { "text-color": "rgba(255, 255, 255, 1)", "text-halo-color": "rgba(14, 139, 90, 1)", @@ -509,7 +643,10 @@ "layout": { "icon-image": [ "match", - ["get", "type"], + [ + "get", + "type" + ], "YSBZ", "rainBengZhan_icon", "WSBZ", @@ -527,6 +664,7 @@ "origine", "origine_icon", "spongeFacility", + "spongeFacility_icon", "pipeMonitor", "spongeFacility_icon", "waterFactory", @@ -538,85 +676,192 @@ "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": ["KlokanTech Noto Sans Regular"], + "text-font": [ + "KlokanTech Noto Sans Regular" + ], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [0, -0.8] + "text-offset": [ + 0, + -0.8 + ] }, "mType": "geojson" } ], "orders": [ - ["newfiber-XYZLayer"], - ["hubei_xiaogan_hm_psfq"], - ["city_boundary"], - ["all_boundary"], - ["pipeline_info"], - ["pipeline_point"], - ["poi_label"], - ["place_label_city"], - ["road_major_label"], - ["place_label_other"], - ["point"] + [ + "newfiber-XYZLayer" + ], + [ + "hubei_xiaogan_hm_psfq" + ], + [ + "city_boundary" + ], + [ + "all_boundary" + ], + [ + "pipeline_info" + ], + [ + "pipeline_point" + ], + [ + "poi_label" + ], + [ + "place_label_city" + ], + [ + "road_major_label" + ], + [ + "place_label_other" + ], + [ + "point" + ] ], "filter": { "wsLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["ws"], ["ws"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "ws" + ], + [ + "ws" + ] + ] }, "hsLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["hs"], ["hs"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "hs" + ], + [ + "hs" + ] + ] }, "ysLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["ys"], ["ys"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "ys" + ], + [ + "ys" + ] + ] }, "YSFQ": { - "layerName": ["hubei_xiaogan_hm_psfq"], - "filter": [["YS"]] + "layerName": [ + "hubei_xiaogan_hm_psfq" + ], + "filter": [ + [ + "YS" + ] + ] }, "WSFQ": { - "layerName": ["hubei_xiaogan_hm_psfq"], - "filter": [["WS"]] + "layerName": [ + "hubei_xiaogan_hm_psfq" + ], + "filter": [ + [ + "WS" + ] + ] }, "oldCity": { - "layerName": ["city_boundary"], - "filter": [["老城区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "老城区" + ] + ], "easeTo": { - "center": [113.933, 30.926], + "center": [ + 113.933, + 30.926 + ], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": ["city_boundary"], - "filter": [["南城新区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "南城新区" + ] + ], "easeTo": { - "center": [113.933, 30.886], + "center": [ + 113.933, + 30.886 + ], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": ["city_boundary"], - "filter": [["东城新区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "东城新区" + ] + ], "easeTo": { - "center": [113.983, 30.896], + "center": [ + 113.983, + 30.896 + ], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": ["city_boundary"], - "filter": [["东城新区", "南城新区", "老城区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "东城新区", + "南城新区", + "老城区" + ] + ], "easeTo": { - "center": [113.953, 30.906], + "center": [ + 113.953, + 30.906 + ], "zoom": 13.6, "pitch": 55 } } } -} +} \ No newline at end of file diff --git a/public/static/libs/mapbox/style/HaiMianScreen.json b/public/static/libs/mapbox/style/HaiMianScreen.json index ac6803f..6acc50d 100644 --- a/public/static/libs/mapbox/style/HaiMianScreen.json +++ b/public/static/libs/mapbox/style/HaiMianScreen.json @@ -2,9 +2,14 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": ["/static/libs/mapbox/style/sprite/sprite5"], + "sprites": [ + "/static/libs/mapbox/style/sprite/sprite5" + ], "init": { - "center": [114.312, 34.802], + "center": [ + 114.312, + 34.802 + ], "zoom": 12.9, "pitch": 55, "style": "/static/libs/mapbox/style/customs/whiteMapStyle.json" @@ -29,7 +34,16 @@ "params": { "id": "newfiber-XYZLayer", "url": "https://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=a603e07a17766447f9e74f14c5454efa", - "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"], + "subdomains": [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7" + ], "minZoom": 1, "maxZoom": 19, "tileType": "" @@ -37,7 +51,9 @@ "methods": [ { "name": "addTo", - "params": ["''||map"] + "params": [ + "''||map" + ] }, { "name": "hide", @@ -51,7 +67,16 @@ "params": { "id": "newfiber-WMTSLayer", "url": "https://t{s}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=5095c97223409ac114493d71ecb9cd87", - "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"] + "subdomains": [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7" + ] }, "methods": [] }, @@ -60,7 +85,12 @@ "type": "CanvasLayer", "params": { "id": "newfiber-CanvasLayer", - "bbox": [110.98300209463804, 32.415967161418266, 111.34992583909221, 32.599933881244255], + "bbox": [ + 110.98300209463804, + 32.415967161418266, + 111.34992583909221, + 32.599933881244255 + ], "width": 3000, "height": 1172, "images": "''||Array(16).fill().map((i,idx)=> `https://server1.wh-nf.cn:9000/newfiber-standard/2024/01/06/step${idx+1}.png`)" @@ -91,7 +121,9 @@ "methods": [ { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "color", @@ -133,15 +165,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -187,15 +225,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -242,19 +286,28 @@ "methods": [ { "name": "shape", - "params": ["circle"] + "params": [ + "circle" + ] }, { "name": "color", - "params": ["rgba(236,223,25,1.0)"] + "params": [ + "rgba(236,223,25,1.0)" + ] }, { "name": "size", - "params": ["size", "''||function(v){return v}"] + "params": [ + "size", + "''||function(v){return v}" + ] }, { "name": "animate", - "params": [true] + "params": [ + true + ] }, { "name": "style", @@ -278,15 +331,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -331,19 +390,27 @@ "methods": [ { "name": "shape", - "params": ["circle"] + "params": [ + "circle" + ] }, { "name": "color", - "params": ["rgba(255,0,0,1.0)"] + "params": [ + "rgba(255,0,0,1.0)" + ] }, { "name": "size", - "params": [10] + "params": [ + 10 + ] }, { "name": "animate", - "params": [true] + "params": [ + true + ] }, { "name": "style", @@ -367,17 +434,24 @@ "methods": [ { "name": "shape", - "params": ["map_selected"] + "params": [ + "map_selected" + ] }, { "name": "size", - "params": [30] + "params": [ + 30 + ] }, { "name": "style", "params": [ { - "offsets": [0, 0] + "offsets": [ + 0, + 0 + ] } ] } @@ -394,15 +468,21 @@ "methods": [ { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "size", - "params": [2] + "params": [ + 2 + ] }, { "name": "color", - "params": ["rgba(189, 209, 150,1)"] + "params": [ + "rgba(189, 209, 150,1)" + ] } ] } @@ -427,9 +507,26 @@ "key": "hn_kf_hm_pipeline", "source-layer": "hn_kf_hm_pipeline", "type": "line", - "filter": ["in", "类型", ""], + "filter": [ + "in", + "类型", + "" + ], "paint": { - "line-color": ["match", ["get", "类型"], "ys", "#1b76ff", "ws", "#ff4c61", "hs", "#d8ad4f", "#000000"], + "line-color": [ + "match", + [ + "get", + "类型" + ], + "ys", + "#1b76ff", + "ws", + "#ff4c61", + "hs", + "#d8ad4f", + "#000000" + ], "line-width": 2 }, "layout": {}, @@ -443,9 +540,16 @@ "key": "hubei_xiaogan_hm_city_boundary", "source-layer": "hubei_xiaogan_hm_city_boundary", "type": "fill", - "filter": ["in", "name", ""], + "filter": [ + "in", + "name", + "" + ], "paint": { - "fill-color": ["get", "fill_color"] + "fill-color": [ + "get", + "fill_color" + ] }, "layout": {}, "minzoom": 10, @@ -458,9 +562,16 @@ "key": "hubei_xiaogan_hm_psfq", "source-layer": "hubei_xiaogan_hm_psfq", "type": "fill", - "filter": ["in", "type", ""], + "filter": [ + "in", + "type", + "" + ], "paint": { - "fill-color": ["get", "fill_color"], + "fill-color": [ + "get", + "fill_color" + ], "fill-opacity": 0.4 }, "layout": {}, @@ -474,17 +585,36 @@ "key": "hn_kf_hm_pipeline_point", "source-layer": "hn_kf_hm_pipeline_point", "type": "symbol", - "filter": ["in", "类型", ""], + "filter": [ + "in", + "类型", + "" + ], "paint": { "text-color": "rgba(255, 255, 255, 1)", "text-halo-color": "rgba(14, 139, 90, 1)", "text-halo-width": 2 }, "layout": { - "icon-image": ["match", ["get", "类型"], "ys", "ysj", "ws", "wsj", "hs", "hsj", "ysbz"], + "icon-image": [ + "match", + [ + "get", + "类型" + ], + "ys", + "ysj", + "ws", + "wsj", + "hs", + "hsj", + "ysbz" + ], "icon-size": 0.5, "text-field": "{管线点号}", - "text-font": ["KlokanTech Noto Sans Regular"], + "text-font": [ + "KlokanTech Noto Sans Regular" + ], "text-size": 13, "text-line-height": 3, "text-anchor": "top" @@ -500,7 +630,11 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": ["in", "type", ""], + "filter": [ + "in", + "type", + "" + ], "paint": { "text-color": "rgba(255, 255, 255, 1)", "text-halo-color": "rgba(14, 139, 90, 1)", @@ -509,7 +643,10 @@ "layout": { "icon-image": [ "match", - ["get", "type"], + [ + "get", + "type" + ], "YSBZ", "rainBengZhan_icon", "WSBZ", @@ -527,6 +664,7 @@ "origine", "origine_icon", "spongeFacility", + "spongeFacility_icon", "pipeMonitor", "spongeFacility_icon", "waterFactory", @@ -538,85 +676,192 @@ "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": ["KlokanTech Noto Sans Regular"], + "text-font": [ + "KlokanTech Noto Sans Regular" + ], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [0, -0.8] + "text-offset": [ + 0, + -0.8 + ] }, "mType": "geojson" } ], "orders": [ - ["newfiber-XYZLayer"], - ["hubei_xiaogan_hm_psfq"], - ["city_boundary"], - ["all_boundary"], - ["pipeline_info"], - ["pipeline_point"], - ["poi_label"], - ["place_label_city"], - ["road_major_label"], - ["place_label_other"], - ["point"] + [ + "newfiber-XYZLayer" + ], + [ + "hubei_xiaogan_hm_psfq" + ], + [ + "city_boundary" + ], + [ + "all_boundary" + ], + [ + "pipeline_info" + ], + [ + "pipeline_point" + ], + [ + "poi_label" + ], + [ + "place_label_city" + ], + [ + "road_major_label" + ], + [ + "place_label_other" + ], + [ + "point" + ] ], "filter": { "wsLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["ws"], ["ws"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "ws" + ], + [ + "ws" + ] + ] }, "hsLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["hs"], ["hs"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "hs" + ], + [ + "hs" + ] + ] }, "ysLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["ys"], ["ys"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "ys" + ], + [ + "ys" + ] + ] }, "YSFQ": { - "layerName": ["hubei_xiaogan_hm_psfq"], - "filter": [["YS"]] + "layerName": [ + "hubei_xiaogan_hm_psfq" + ], + "filter": [ + [ + "YS" + ] + ] }, "WSFQ": { - "layerName": ["hubei_xiaogan_hm_psfq"], - "filter": [["WS"]] + "layerName": [ + "hubei_xiaogan_hm_psfq" + ], + "filter": [ + [ + "WS" + ] + ] }, "oldCity": { - "layerName": ["city_boundary"], - "filter": [["老城区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "老城区" + ] + ], "easeTo": { - "center": [113.933, 30.926], + "center": [ + 113.933, + 30.926 + ], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": ["city_boundary"], - "filter": [["南城新区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "南城新区" + ] + ], "easeTo": { - "center": [113.933, 30.886], + "center": [ + 113.933, + 30.886 + ], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": ["city_boundary"], - "filter": [["东城新区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "东城新区" + ] + ], "easeTo": { - "center": [113.983, 30.896], + "center": [ + 113.983, + 30.896 + ], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": ["city_boundary"], - "filter": [["东城新区", "南城新区", "老城区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "东城新区", + "南城新区", + "老城区" + ] + ], "easeTo": { - "center": [113.953, 30.906], + "center": [ + 113.953, + 30.906 + ], "zoom": 13.6, "pitch": 55 } } } -} +} \ No newline at end of file diff --git a/src/views/sponeScreen/cityGK/PhysicalGeography.vue b/src/views/sponeScreen/cityGK/PhysicalGeography.vue index 1c231a6..17c17d2 100644 --- a/src/views/sponeScreen/cityGK/PhysicalGeography.vue +++ b/src/views/sponeScreen/cityGK/PhysicalGeography.vue @@ -80,7 +80,17 @@ }, ]); const showTotalArea = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ { layername: 'topography', @@ -99,17 +109,24 @@ show: true, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.202, - heading: 2.281299097855777, - zoom: 35358.12942752382, - pitch: -25.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.202], + zoom: 9, + pitch: 55, }); }; const showCenterCity = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -128,17 +145,24 @@ show: false, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.212, - heading: 2.281299097855777, - zoom: 60358.12942752382, - pitch: -45.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.212], + zoom: 10.5, + pitch: 10, }); }; const showBuiltCity = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -157,16 +181,24 @@ show: true, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.262, - heading: 2.281299097855777, - zoom: 42358.12942752382, - pitch: -35.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.262], + zoom: 10.5, + pitch: 10, }); + // newfiberMap.setCenter({ + // lng: 114.312, + // lat: 34.262, + // heading: 2.281299097855777, + // zoom: 42358.12942752382, + // pitch: -35.2508969308367, + // roll: 0.005453465256790101, + // }); }; const showOneCenterLayer = () => { + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -185,20 +217,25 @@ show: true, }, ]); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter1, 'oneCenter'); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter2, 'oneCenter'); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter, 'oneCenter'); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.742, - heading: 2.281299097855777, - zoom: 75358.12942752382, - pitch: -80.2508969308367, - roll: 0.005453465256790101, + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + pitch: 10, }); }; const setLayerVisible = () => { wmsVisibility.value = !wmsVisibility.value; + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); // newfiberMap.removeByIds(['oneCenter']); // if (!newfiberMap.xdmWms) { // newfiberMap.xdmWms = newfiberMap.loadWmsLayer({ @@ -211,14 +248,22 @@ // let imageryProvider = newfiberMap.getLayers([newfiberMap.xdmWms])[0]; // imageryProvider.show = !!!imageryProvider.show; newfiberMapBoxVectorLayer.addWMSLayer('demo:hn_kf_hm_dilei'); - // if (wmsVisibility.value) { - // newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'visible'); - // } else { - // newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); - // } + if (wmsVisibility.value) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'visible'); + } else { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } }; onMounted(() => { + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + pitch: 10, + }); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter1, 'oneCenter'); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter2, 'oneCenter'); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter, 'oneCenter'); diff --git a/public/static/libs/mapbox/style/HaiMianScreen.json b/public/static/libs/mapbox/style/HaiMianScreen.json index ac6803f..6acc50d 100644 --- a/public/static/libs/mapbox/style/HaiMianScreen.json +++ b/public/static/libs/mapbox/style/HaiMianScreen.json @@ -2,9 +2,14 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": ["/static/libs/mapbox/style/sprite/sprite5"], + "sprites": [ + "/static/libs/mapbox/style/sprite/sprite5" + ], "init": { - "center": [114.312, 34.802], + "center": [ + 114.312, + 34.802 + ], "zoom": 12.9, "pitch": 55, "style": "/static/libs/mapbox/style/customs/whiteMapStyle.json" @@ -29,7 +34,16 @@ "params": { "id": "newfiber-XYZLayer", "url": "https://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=a603e07a17766447f9e74f14c5454efa", - "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"], + "subdomains": [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7" + ], "minZoom": 1, "maxZoom": 19, "tileType": "" @@ -37,7 +51,9 @@ "methods": [ { "name": "addTo", - "params": ["''||map"] + "params": [ + "''||map" + ] }, { "name": "hide", @@ -51,7 +67,16 @@ "params": { "id": "newfiber-WMTSLayer", "url": "https://t{s}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=5095c97223409ac114493d71ecb9cd87", - "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"] + "subdomains": [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7" + ] }, "methods": [] }, @@ -60,7 +85,12 @@ "type": "CanvasLayer", "params": { "id": "newfiber-CanvasLayer", - "bbox": [110.98300209463804, 32.415967161418266, 111.34992583909221, 32.599933881244255], + "bbox": [ + 110.98300209463804, + 32.415967161418266, + 111.34992583909221, + 32.599933881244255 + ], "width": 3000, "height": 1172, "images": "''||Array(16).fill().map((i,idx)=> `https://server1.wh-nf.cn:9000/newfiber-standard/2024/01/06/step${idx+1}.png`)" @@ -91,7 +121,9 @@ "methods": [ { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "color", @@ -133,15 +165,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -187,15 +225,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -242,19 +286,28 @@ "methods": [ { "name": "shape", - "params": ["circle"] + "params": [ + "circle" + ] }, { "name": "color", - "params": ["rgba(236,223,25,1.0)"] + "params": [ + "rgba(236,223,25,1.0)" + ] }, { "name": "size", - "params": ["size", "''||function(v){return v}"] + "params": [ + "size", + "''||function(v){return v}" + ] }, { "name": "animate", - "params": [true] + "params": [ + true + ] }, { "name": "style", @@ -278,15 +331,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -331,19 +390,27 @@ "methods": [ { "name": "shape", - "params": ["circle"] + "params": [ + "circle" + ] }, { "name": "color", - "params": ["rgba(255,0,0,1.0)"] + "params": [ + "rgba(255,0,0,1.0)" + ] }, { "name": "size", - "params": [10] + "params": [ + 10 + ] }, { "name": "animate", - "params": [true] + "params": [ + true + ] }, { "name": "style", @@ -367,17 +434,24 @@ "methods": [ { "name": "shape", - "params": ["map_selected"] + "params": [ + "map_selected" + ] }, { "name": "size", - "params": [30] + "params": [ + 30 + ] }, { "name": "style", "params": [ { - "offsets": [0, 0] + "offsets": [ + 0, + 0 + ] } ] } @@ -394,15 +468,21 @@ "methods": [ { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "size", - "params": [2] + "params": [ + 2 + ] }, { "name": "color", - "params": ["rgba(189, 209, 150,1)"] + "params": [ + "rgba(189, 209, 150,1)" + ] } ] } @@ -427,9 +507,26 @@ "key": "hn_kf_hm_pipeline", "source-layer": "hn_kf_hm_pipeline", "type": "line", - "filter": ["in", "类型", ""], + "filter": [ + "in", + "类型", + "" + ], "paint": { - "line-color": ["match", ["get", "类型"], "ys", "#1b76ff", "ws", "#ff4c61", "hs", "#d8ad4f", "#000000"], + "line-color": [ + "match", + [ + "get", + "类型" + ], + "ys", + "#1b76ff", + "ws", + "#ff4c61", + "hs", + "#d8ad4f", + "#000000" + ], "line-width": 2 }, "layout": {}, @@ -443,9 +540,16 @@ "key": "hubei_xiaogan_hm_city_boundary", "source-layer": "hubei_xiaogan_hm_city_boundary", "type": "fill", - "filter": ["in", "name", ""], + "filter": [ + "in", + "name", + "" + ], "paint": { - "fill-color": ["get", "fill_color"] + "fill-color": [ + "get", + "fill_color" + ] }, "layout": {}, "minzoom": 10, @@ -458,9 +562,16 @@ "key": "hubei_xiaogan_hm_psfq", "source-layer": "hubei_xiaogan_hm_psfq", "type": "fill", - "filter": ["in", "type", ""], + "filter": [ + "in", + "type", + "" + ], "paint": { - "fill-color": ["get", "fill_color"], + "fill-color": [ + "get", + "fill_color" + ], "fill-opacity": 0.4 }, "layout": {}, @@ -474,17 +585,36 @@ "key": "hn_kf_hm_pipeline_point", "source-layer": "hn_kf_hm_pipeline_point", "type": "symbol", - "filter": ["in", "类型", ""], + "filter": [ + "in", + "类型", + "" + ], "paint": { "text-color": "rgba(255, 255, 255, 1)", "text-halo-color": "rgba(14, 139, 90, 1)", "text-halo-width": 2 }, "layout": { - "icon-image": ["match", ["get", "类型"], "ys", "ysj", "ws", "wsj", "hs", "hsj", "ysbz"], + "icon-image": [ + "match", + [ + "get", + "类型" + ], + "ys", + "ysj", + "ws", + "wsj", + "hs", + "hsj", + "ysbz" + ], "icon-size": 0.5, "text-field": "{管线点号}", - "text-font": ["KlokanTech Noto Sans Regular"], + "text-font": [ + "KlokanTech Noto Sans Regular" + ], "text-size": 13, "text-line-height": 3, "text-anchor": "top" @@ -500,7 +630,11 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": ["in", "type", ""], + "filter": [ + "in", + "type", + "" + ], "paint": { "text-color": "rgba(255, 255, 255, 1)", "text-halo-color": "rgba(14, 139, 90, 1)", @@ -509,7 +643,10 @@ "layout": { "icon-image": [ "match", - ["get", "type"], + [ + "get", + "type" + ], "YSBZ", "rainBengZhan_icon", "WSBZ", @@ -527,6 +664,7 @@ "origine", "origine_icon", "spongeFacility", + "spongeFacility_icon", "pipeMonitor", "spongeFacility_icon", "waterFactory", @@ -538,85 +676,192 @@ "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": ["KlokanTech Noto Sans Regular"], + "text-font": [ + "KlokanTech Noto Sans Regular" + ], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [0, -0.8] + "text-offset": [ + 0, + -0.8 + ] }, "mType": "geojson" } ], "orders": [ - ["newfiber-XYZLayer"], - ["hubei_xiaogan_hm_psfq"], - ["city_boundary"], - ["all_boundary"], - ["pipeline_info"], - ["pipeline_point"], - ["poi_label"], - ["place_label_city"], - ["road_major_label"], - ["place_label_other"], - ["point"] + [ + "newfiber-XYZLayer" + ], + [ + "hubei_xiaogan_hm_psfq" + ], + [ + "city_boundary" + ], + [ + "all_boundary" + ], + [ + "pipeline_info" + ], + [ + "pipeline_point" + ], + [ + "poi_label" + ], + [ + "place_label_city" + ], + [ + "road_major_label" + ], + [ + "place_label_other" + ], + [ + "point" + ] ], "filter": { "wsLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["ws"], ["ws"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "ws" + ], + [ + "ws" + ] + ] }, "hsLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["hs"], ["hs"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "hs" + ], + [ + "hs" + ] + ] }, "ysLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["ys"], ["ys"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "ys" + ], + [ + "ys" + ] + ] }, "YSFQ": { - "layerName": ["hubei_xiaogan_hm_psfq"], - "filter": [["YS"]] + "layerName": [ + "hubei_xiaogan_hm_psfq" + ], + "filter": [ + [ + "YS" + ] + ] }, "WSFQ": { - "layerName": ["hubei_xiaogan_hm_psfq"], - "filter": [["WS"]] + "layerName": [ + "hubei_xiaogan_hm_psfq" + ], + "filter": [ + [ + "WS" + ] + ] }, "oldCity": { - "layerName": ["city_boundary"], - "filter": [["老城区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "老城区" + ] + ], "easeTo": { - "center": [113.933, 30.926], + "center": [ + 113.933, + 30.926 + ], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": ["city_boundary"], - "filter": [["南城新区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "南城新区" + ] + ], "easeTo": { - "center": [113.933, 30.886], + "center": [ + 113.933, + 30.886 + ], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": ["city_boundary"], - "filter": [["东城新区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "东城新区" + ] + ], "easeTo": { - "center": [113.983, 30.896], + "center": [ + 113.983, + 30.896 + ], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": ["city_boundary"], - "filter": [["东城新区", "南城新区", "老城区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "东城新区", + "南城新区", + "老城区" + ] + ], "easeTo": { - "center": [113.953, 30.906], + "center": [ + 113.953, + 30.906 + ], "zoom": 13.6, "pitch": 55 } } } -} +} \ No newline at end of file diff --git a/src/views/sponeScreen/cityGK/PhysicalGeography.vue b/src/views/sponeScreen/cityGK/PhysicalGeography.vue index 1c231a6..17c17d2 100644 --- a/src/views/sponeScreen/cityGK/PhysicalGeography.vue +++ b/src/views/sponeScreen/cityGK/PhysicalGeography.vue @@ -80,7 +80,17 @@ }, ]); const showTotalArea = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ { layername: 'topography', @@ -99,17 +109,24 @@ show: true, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.202, - heading: 2.281299097855777, - zoom: 35358.12942752382, - pitch: -25.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.202], + zoom: 9, + pitch: 55, }); }; const showCenterCity = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -128,17 +145,24 @@ show: false, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.212, - heading: 2.281299097855777, - zoom: 60358.12942752382, - pitch: -45.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.212], + zoom: 10.5, + pitch: 10, }); }; const showBuiltCity = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -157,16 +181,24 @@ show: true, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.262, - heading: 2.281299097855777, - zoom: 42358.12942752382, - pitch: -35.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.262], + zoom: 10.5, + pitch: 10, }); + // newfiberMap.setCenter({ + // lng: 114.312, + // lat: 34.262, + // heading: 2.281299097855777, + // zoom: 42358.12942752382, + // pitch: -35.2508969308367, + // roll: 0.005453465256790101, + // }); }; const showOneCenterLayer = () => { + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -185,20 +217,25 @@ show: true, }, ]); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter1, 'oneCenter'); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter2, 'oneCenter'); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter, 'oneCenter'); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.742, - heading: 2.281299097855777, - zoom: 75358.12942752382, - pitch: -80.2508969308367, - roll: 0.005453465256790101, + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + pitch: 10, }); }; const setLayerVisible = () => { wmsVisibility.value = !wmsVisibility.value; + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); // newfiberMap.removeByIds(['oneCenter']); // if (!newfiberMap.xdmWms) { // newfiberMap.xdmWms = newfiberMap.loadWmsLayer({ @@ -211,14 +248,22 @@ // let imageryProvider = newfiberMap.getLayers([newfiberMap.xdmWms])[0]; // imageryProvider.show = !!!imageryProvider.show; newfiberMapBoxVectorLayer.addWMSLayer('demo:hn_kf_hm_dilei'); - // if (wmsVisibility.value) { - // newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'visible'); - // } else { - // newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); - // } + if (wmsVisibility.value) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'visible'); + } else { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } }; onMounted(() => { + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + pitch: 10, + }); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter1, 'oneCenter'); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter2, 'oneCenter'); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter, 'oneCenter'); diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue index 6cfe6d3..0268099 100644 --- a/src/views/sponeScreen/cityGK/index.vue +++ b/src/views/sponeScreen/cityGK/index.vue @@ -26,6 +26,7 @@ import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部 import PhysicalGeography from '@/views/sponeScreen/cityGK/PhysicalGeography.vue'; //头部 import bus from '@/bus/index'; +import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import { onBeforeUnmount } from 'vue'; const { proxy } = getCurrentInstance(); @@ -66,7 +67,14 @@ }); onBeforeUnmount(() => { if (!newfiberMap) return; - newfiberMap.removeByIds(['oneCenter']); + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ { layername: 'buildingModel', diff --git a/public/static/libs/mapbox/style/HaiMianScreen.json b/public/static/libs/mapbox/style/HaiMianScreen.json index ac6803f..6acc50d 100644 --- a/public/static/libs/mapbox/style/HaiMianScreen.json +++ b/public/static/libs/mapbox/style/HaiMianScreen.json @@ -2,9 +2,14 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": ["/static/libs/mapbox/style/sprite/sprite5"], + "sprites": [ + "/static/libs/mapbox/style/sprite/sprite5" + ], "init": { - "center": [114.312, 34.802], + "center": [ + 114.312, + 34.802 + ], "zoom": 12.9, "pitch": 55, "style": "/static/libs/mapbox/style/customs/whiteMapStyle.json" @@ -29,7 +34,16 @@ "params": { "id": "newfiber-XYZLayer", "url": "https://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=a603e07a17766447f9e74f14c5454efa", - "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"], + "subdomains": [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7" + ], "minZoom": 1, "maxZoom": 19, "tileType": "" @@ -37,7 +51,9 @@ "methods": [ { "name": "addTo", - "params": ["''||map"] + "params": [ + "''||map" + ] }, { "name": "hide", @@ -51,7 +67,16 @@ "params": { "id": "newfiber-WMTSLayer", "url": "https://t{s}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=5095c97223409ac114493d71ecb9cd87", - "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"] + "subdomains": [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7" + ] }, "methods": [] }, @@ -60,7 +85,12 @@ "type": "CanvasLayer", "params": { "id": "newfiber-CanvasLayer", - "bbox": [110.98300209463804, 32.415967161418266, 111.34992583909221, 32.599933881244255], + "bbox": [ + 110.98300209463804, + 32.415967161418266, + 111.34992583909221, + 32.599933881244255 + ], "width": 3000, "height": 1172, "images": "''||Array(16).fill().map((i,idx)=> `https://server1.wh-nf.cn:9000/newfiber-standard/2024/01/06/step${idx+1}.png`)" @@ -91,7 +121,9 @@ "methods": [ { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "color", @@ -133,15 +165,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -187,15 +225,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -242,19 +286,28 @@ "methods": [ { "name": "shape", - "params": ["circle"] + "params": [ + "circle" + ] }, { "name": "color", - "params": ["rgba(236,223,25,1.0)"] + "params": [ + "rgba(236,223,25,1.0)" + ] }, { "name": "size", - "params": ["size", "''||function(v){return v}"] + "params": [ + "size", + "''||function(v){return v}" + ] }, { "name": "animate", - "params": [true] + "params": [ + true + ] }, { "name": "style", @@ -278,15 +331,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -331,19 +390,27 @@ "methods": [ { "name": "shape", - "params": ["circle"] + "params": [ + "circle" + ] }, { "name": "color", - "params": ["rgba(255,0,0,1.0)"] + "params": [ + "rgba(255,0,0,1.0)" + ] }, { "name": "size", - "params": [10] + "params": [ + 10 + ] }, { "name": "animate", - "params": [true] + "params": [ + true + ] }, { "name": "style", @@ -367,17 +434,24 @@ "methods": [ { "name": "shape", - "params": ["map_selected"] + "params": [ + "map_selected" + ] }, { "name": "size", - "params": [30] + "params": [ + 30 + ] }, { "name": "style", "params": [ { - "offsets": [0, 0] + "offsets": [ + 0, + 0 + ] } ] } @@ -394,15 +468,21 @@ "methods": [ { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "size", - "params": [2] + "params": [ + 2 + ] }, { "name": "color", - "params": ["rgba(189, 209, 150,1)"] + "params": [ + "rgba(189, 209, 150,1)" + ] } ] } @@ -427,9 +507,26 @@ "key": "hn_kf_hm_pipeline", "source-layer": "hn_kf_hm_pipeline", "type": "line", - "filter": ["in", "类型", ""], + "filter": [ + "in", + "类型", + "" + ], "paint": { - "line-color": ["match", ["get", "类型"], "ys", "#1b76ff", "ws", "#ff4c61", "hs", "#d8ad4f", "#000000"], + "line-color": [ + "match", + [ + "get", + "类型" + ], + "ys", + "#1b76ff", + "ws", + "#ff4c61", + "hs", + "#d8ad4f", + "#000000" + ], "line-width": 2 }, "layout": {}, @@ -443,9 +540,16 @@ "key": "hubei_xiaogan_hm_city_boundary", "source-layer": "hubei_xiaogan_hm_city_boundary", "type": "fill", - "filter": ["in", "name", ""], + "filter": [ + "in", + "name", + "" + ], "paint": { - "fill-color": ["get", "fill_color"] + "fill-color": [ + "get", + "fill_color" + ] }, "layout": {}, "minzoom": 10, @@ -458,9 +562,16 @@ "key": "hubei_xiaogan_hm_psfq", "source-layer": "hubei_xiaogan_hm_psfq", "type": "fill", - "filter": ["in", "type", ""], + "filter": [ + "in", + "type", + "" + ], "paint": { - "fill-color": ["get", "fill_color"], + "fill-color": [ + "get", + "fill_color" + ], "fill-opacity": 0.4 }, "layout": {}, @@ -474,17 +585,36 @@ "key": "hn_kf_hm_pipeline_point", "source-layer": "hn_kf_hm_pipeline_point", "type": "symbol", - "filter": ["in", "类型", ""], + "filter": [ + "in", + "类型", + "" + ], "paint": { "text-color": "rgba(255, 255, 255, 1)", "text-halo-color": "rgba(14, 139, 90, 1)", "text-halo-width": 2 }, "layout": { - "icon-image": ["match", ["get", "类型"], "ys", "ysj", "ws", "wsj", "hs", "hsj", "ysbz"], + "icon-image": [ + "match", + [ + "get", + "类型" + ], + "ys", + "ysj", + "ws", + "wsj", + "hs", + "hsj", + "ysbz" + ], "icon-size": 0.5, "text-field": "{管线点号}", - "text-font": ["KlokanTech Noto Sans Regular"], + "text-font": [ + "KlokanTech Noto Sans Regular" + ], "text-size": 13, "text-line-height": 3, "text-anchor": "top" @@ -500,7 +630,11 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": ["in", "type", ""], + "filter": [ + "in", + "type", + "" + ], "paint": { "text-color": "rgba(255, 255, 255, 1)", "text-halo-color": "rgba(14, 139, 90, 1)", @@ -509,7 +643,10 @@ "layout": { "icon-image": [ "match", - ["get", "type"], + [ + "get", + "type" + ], "YSBZ", "rainBengZhan_icon", "WSBZ", @@ -527,6 +664,7 @@ "origine", "origine_icon", "spongeFacility", + "spongeFacility_icon", "pipeMonitor", "spongeFacility_icon", "waterFactory", @@ -538,85 +676,192 @@ "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": ["KlokanTech Noto Sans Regular"], + "text-font": [ + "KlokanTech Noto Sans Regular" + ], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [0, -0.8] + "text-offset": [ + 0, + -0.8 + ] }, "mType": "geojson" } ], "orders": [ - ["newfiber-XYZLayer"], - ["hubei_xiaogan_hm_psfq"], - ["city_boundary"], - ["all_boundary"], - ["pipeline_info"], - ["pipeline_point"], - ["poi_label"], - ["place_label_city"], - ["road_major_label"], - ["place_label_other"], - ["point"] + [ + "newfiber-XYZLayer" + ], + [ + "hubei_xiaogan_hm_psfq" + ], + [ + "city_boundary" + ], + [ + "all_boundary" + ], + [ + "pipeline_info" + ], + [ + "pipeline_point" + ], + [ + "poi_label" + ], + [ + "place_label_city" + ], + [ + "road_major_label" + ], + [ + "place_label_other" + ], + [ + "point" + ] ], "filter": { "wsLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["ws"], ["ws"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "ws" + ], + [ + "ws" + ] + ] }, "hsLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["hs"], ["hs"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "hs" + ], + [ + "hs" + ] + ] }, "ysLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["ys"], ["ys"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "ys" + ], + [ + "ys" + ] + ] }, "YSFQ": { - "layerName": ["hubei_xiaogan_hm_psfq"], - "filter": [["YS"]] + "layerName": [ + "hubei_xiaogan_hm_psfq" + ], + "filter": [ + [ + "YS" + ] + ] }, "WSFQ": { - "layerName": ["hubei_xiaogan_hm_psfq"], - "filter": [["WS"]] + "layerName": [ + "hubei_xiaogan_hm_psfq" + ], + "filter": [ + [ + "WS" + ] + ] }, "oldCity": { - "layerName": ["city_boundary"], - "filter": [["老城区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "老城区" + ] + ], "easeTo": { - "center": [113.933, 30.926], + "center": [ + 113.933, + 30.926 + ], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": ["city_boundary"], - "filter": [["南城新区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "南城新区" + ] + ], "easeTo": { - "center": [113.933, 30.886], + "center": [ + 113.933, + 30.886 + ], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": ["city_boundary"], - "filter": [["东城新区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "东城新区" + ] + ], "easeTo": { - "center": [113.983, 30.896], + "center": [ + 113.983, + 30.896 + ], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": ["city_boundary"], - "filter": [["东城新区", "南城新区", "老城区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "东城新区", + "南城新区", + "老城区" + ] + ], "easeTo": { - "center": [113.953, 30.906], + "center": [ + 113.953, + 30.906 + ], "zoom": 13.6, "pitch": 55 } } } -} +} \ No newline at end of file diff --git a/src/views/sponeScreen/cityGK/PhysicalGeography.vue b/src/views/sponeScreen/cityGK/PhysicalGeography.vue index 1c231a6..17c17d2 100644 --- a/src/views/sponeScreen/cityGK/PhysicalGeography.vue +++ b/src/views/sponeScreen/cityGK/PhysicalGeography.vue @@ -80,7 +80,17 @@ }, ]); const showTotalArea = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ { layername: 'topography', @@ -99,17 +109,24 @@ show: true, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.202, - heading: 2.281299097855777, - zoom: 35358.12942752382, - pitch: -25.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.202], + zoom: 9, + pitch: 55, }); }; const showCenterCity = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -128,17 +145,24 @@ show: false, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.212, - heading: 2.281299097855777, - zoom: 60358.12942752382, - pitch: -45.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.212], + zoom: 10.5, + pitch: 10, }); }; const showBuiltCity = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -157,16 +181,24 @@ show: true, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.262, - heading: 2.281299097855777, - zoom: 42358.12942752382, - pitch: -35.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.262], + zoom: 10.5, + pitch: 10, }); + // newfiberMap.setCenter({ + // lng: 114.312, + // lat: 34.262, + // heading: 2.281299097855777, + // zoom: 42358.12942752382, + // pitch: -35.2508969308367, + // roll: 0.005453465256790101, + // }); }; const showOneCenterLayer = () => { + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -185,20 +217,25 @@ show: true, }, ]); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter1, 'oneCenter'); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter2, 'oneCenter'); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter, 'oneCenter'); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.742, - heading: 2.281299097855777, - zoom: 75358.12942752382, - pitch: -80.2508969308367, - roll: 0.005453465256790101, + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + pitch: 10, }); }; const setLayerVisible = () => { wmsVisibility.value = !wmsVisibility.value; + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); // newfiberMap.removeByIds(['oneCenter']); // if (!newfiberMap.xdmWms) { // newfiberMap.xdmWms = newfiberMap.loadWmsLayer({ @@ -211,14 +248,22 @@ // let imageryProvider = newfiberMap.getLayers([newfiberMap.xdmWms])[0]; // imageryProvider.show = !!!imageryProvider.show; newfiberMapBoxVectorLayer.addWMSLayer('demo:hn_kf_hm_dilei'); - // if (wmsVisibility.value) { - // newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'visible'); - // } else { - // newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); - // } + if (wmsVisibility.value) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'visible'); + } else { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } }; onMounted(() => { + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + pitch: 10, + }); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter1, 'oneCenter'); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter2, 'oneCenter'); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter, 'oneCenter'); diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue index 6cfe6d3..0268099 100644 --- a/src/views/sponeScreen/cityGK/index.vue +++ b/src/views/sponeScreen/cityGK/index.vue @@ -26,6 +26,7 @@ import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部 import PhysicalGeography from '@/views/sponeScreen/cityGK/PhysicalGeography.vue'; //头部 import bus from '@/bus/index'; +import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import { onBeforeUnmount } from 'vue'; const { proxy } = getCurrentInstance(); @@ -66,7 +67,14 @@ }); onBeforeUnmount(() => { if (!newfiberMap) return; - newfiberMap.removeByIds(['oneCenter']); + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ { layername: 'buildingModel', diff --git a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js index 0f91e59..082a9ab 100644 --- a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js +++ b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js @@ -89,7 +89,7 @@ } //添加geoserver图层 static addWMSLayer(layerName) { - if (!newfiberMapbox.map.getLayer()) { + if (!newfiberMapbox.map.getLayer(layerName)) { newfiberMapbox.map.addSource(layerName, { type: 'raster', // use the tiles option to specify a WMS tile source URL diff --git a/public/static/libs/mapbox/style/HaiMianScreen.json b/public/static/libs/mapbox/style/HaiMianScreen.json index ac6803f..6acc50d 100644 --- a/public/static/libs/mapbox/style/HaiMianScreen.json +++ b/public/static/libs/mapbox/style/HaiMianScreen.json @@ -2,9 +2,14 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": ["/static/libs/mapbox/style/sprite/sprite5"], + "sprites": [ + "/static/libs/mapbox/style/sprite/sprite5" + ], "init": { - "center": [114.312, 34.802], + "center": [ + 114.312, + 34.802 + ], "zoom": 12.9, "pitch": 55, "style": "/static/libs/mapbox/style/customs/whiteMapStyle.json" @@ -29,7 +34,16 @@ "params": { "id": "newfiber-XYZLayer", "url": "https://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=a603e07a17766447f9e74f14c5454efa", - "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"], + "subdomains": [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7" + ], "minZoom": 1, "maxZoom": 19, "tileType": "" @@ -37,7 +51,9 @@ "methods": [ { "name": "addTo", - "params": ["''||map"] + "params": [ + "''||map" + ] }, { "name": "hide", @@ -51,7 +67,16 @@ "params": { "id": "newfiber-WMTSLayer", "url": "https://t{s}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=5095c97223409ac114493d71ecb9cd87", - "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"] + "subdomains": [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7" + ] }, "methods": [] }, @@ -60,7 +85,12 @@ "type": "CanvasLayer", "params": { "id": "newfiber-CanvasLayer", - "bbox": [110.98300209463804, 32.415967161418266, 111.34992583909221, 32.599933881244255], + "bbox": [ + 110.98300209463804, + 32.415967161418266, + 111.34992583909221, + 32.599933881244255 + ], "width": 3000, "height": 1172, "images": "''||Array(16).fill().map((i,idx)=> `https://server1.wh-nf.cn:9000/newfiber-standard/2024/01/06/step${idx+1}.png`)" @@ -91,7 +121,9 @@ "methods": [ { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "color", @@ -133,15 +165,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -187,15 +225,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -242,19 +286,28 @@ "methods": [ { "name": "shape", - "params": ["circle"] + "params": [ + "circle" + ] }, { "name": "color", - "params": ["rgba(236,223,25,1.0)"] + "params": [ + "rgba(236,223,25,1.0)" + ] }, { "name": "size", - "params": ["size", "''||function(v){return v}"] + "params": [ + "size", + "''||function(v){return v}" + ] }, { "name": "animate", - "params": [true] + "params": [ + true + ] }, { "name": "style", @@ -278,15 +331,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -331,19 +390,27 @@ "methods": [ { "name": "shape", - "params": ["circle"] + "params": [ + "circle" + ] }, { "name": "color", - "params": ["rgba(255,0,0,1.0)"] + "params": [ + "rgba(255,0,0,1.0)" + ] }, { "name": "size", - "params": [10] + "params": [ + 10 + ] }, { "name": "animate", - "params": [true] + "params": [ + true + ] }, { "name": "style", @@ -367,17 +434,24 @@ "methods": [ { "name": "shape", - "params": ["map_selected"] + "params": [ + "map_selected" + ] }, { "name": "size", - "params": [30] + "params": [ + 30 + ] }, { "name": "style", "params": [ { - "offsets": [0, 0] + "offsets": [ + 0, + 0 + ] } ] } @@ -394,15 +468,21 @@ "methods": [ { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "size", - "params": [2] + "params": [ + 2 + ] }, { "name": "color", - "params": ["rgba(189, 209, 150,1)"] + "params": [ + "rgba(189, 209, 150,1)" + ] } ] } @@ -427,9 +507,26 @@ "key": "hn_kf_hm_pipeline", "source-layer": "hn_kf_hm_pipeline", "type": "line", - "filter": ["in", "类型", ""], + "filter": [ + "in", + "类型", + "" + ], "paint": { - "line-color": ["match", ["get", "类型"], "ys", "#1b76ff", "ws", "#ff4c61", "hs", "#d8ad4f", "#000000"], + "line-color": [ + "match", + [ + "get", + "类型" + ], + "ys", + "#1b76ff", + "ws", + "#ff4c61", + "hs", + "#d8ad4f", + "#000000" + ], "line-width": 2 }, "layout": {}, @@ -443,9 +540,16 @@ "key": "hubei_xiaogan_hm_city_boundary", "source-layer": "hubei_xiaogan_hm_city_boundary", "type": "fill", - "filter": ["in", "name", ""], + "filter": [ + "in", + "name", + "" + ], "paint": { - "fill-color": ["get", "fill_color"] + "fill-color": [ + "get", + "fill_color" + ] }, "layout": {}, "minzoom": 10, @@ -458,9 +562,16 @@ "key": "hubei_xiaogan_hm_psfq", "source-layer": "hubei_xiaogan_hm_psfq", "type": "fill", - "filter": ["in", "type", ""], + "filter": [ + "in", + "type", + "" + ], "paint": { - "fill-color": ["get", "fill_color"], + "fill-color": [ + "get", + "fill_color" + ], "fill-opacity": 0.4 }, "layout": {}, @@ -474,17 +585,36 @@ "key": "hn_kf_hm_pipeline_point", "source-layer": "hn_kf_hm_pipeline_point", "type": "symbol", - "filter": ["in", "类型", ""], + "filter": [ + "in", + "类型", + "" + ], "paint": { "text-color": "rgba(255, 255, 255, 1)", "text-halo-color": "rgba(14, 139, 90, 1)", "text-halo-width": 2 }, "layout": { - "icon-image": ["match", ["get", "类型"], "ys", "ysj", "ws", "wsj", "hs", "hsj", "ysbz"], + "icon-image": [ + "match", + [ + "get", + "类型" + ], + "ys", + "ysj", + "ws", + "wsj", + "hs", + "hsj", + "ysbz" + ], "icon-size": 0.5, "text-field": "{管线点号}", - "text-font": ["KlokanTech Noto Sans Regular"], + "text-font": [ + "KlokanTech Noto Sans Regular" + ], "text-size": 13, "text-line-height": 3, "text-anchor": "top" @@ -500,7 +630,11 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": ["in", "type", ""], + "filter": [ + "in", + "type", + "" + ], "paint": { "text-color": "rgba(255, 255, 255, 1)", "text-halo-color": "rgba(14, 139, 90, 1)", @@ -509,7 +643,10 @@ "layout": { "icon-image": [ "match", - ["get", "type"], + [ + "get", + "type" + ], "YSBZ", "rainBengZhan_icon", "WSBZ", @@ -527,6 +664,7 @@ "origine", "origine_icon", "spongeFacility", + "spongeFacility_icon", "pipeMonitor", "spongeFacility_icon", "waterFactory", @@ -538,85 +676,192 @@ "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": ["KlokanTech Noto Sans Regular"], + "text-font": [ + "KlokanTech Noto Sans Regular" + ], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [0, -0.8] + "text-offset": [ + 0, + -0.8 + ] }, "mType": "geojson" } ], "orders": [ - ["newfiber-XYZLayer"], - ["hubei_xiaogan_hm_psfq"], - ["city_boundary"], - ["all_boundary"], - ["pipeline_info"], - ["pipeline_point"], - ["poi_label"], - ["place_label_city"], - ["road_major_label"], - ["place_label_other"], - ["point"] + [ + "newfiber-XYZLayer" + ], + [ + "hubei_xiaogan_hm_psfq" + ], + [ + "city_boundary" + ], + [ + "all_boundary" + ], + [ + "pipeline_info" + ], + [ + "pipeline_point" + ], + [ + "poi_label" + ], + [ + "place_label_city" + ], + [ + "road_major_label" + ], + [ + "place_label_other" + ], + [ + "point" + ] ], "filter": { "wsLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["ws"], ["ws"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "ws" + ], + [ + "ws" + ] + ] }, "hsLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["hs"], ["hs"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "hs" + ], + [ + "hs" + ] + ] }, "ysLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["ys"], ["ys"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "ys" + ], + [ + "ys" + ] + ] }, "YSFQ": { - "layerName": ["hubei_xiaogan_hm_psfq"], - "filter": [["YS"]] + "layerName": [ + "hubei_xiaogan_hm_psfq" + ], + "filter": [ + [ + "YS" + ] + ] }, "WSFQ": { - "layerName": ["hubei_xiaogan_hm_psfq"], - "filter": [["WS"]] + "layerName": [ + "hubei_xiaogan_hm_psfq" + ], + "filter": [ + [ + "WS" + ] + ] }, "oldCity": { - "layerName": ["city_boundary"], - "filter": [["老城区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "老城区" + ] + ], "easeTo": { - "center": [113.933, 30.926], + "center": [ + 113.933, + 30.926 + ], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": ["city_boundary"], - "filter": [["南城新区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "南城新区" + ] + ], "easeTo": { - "center": [113.933, 30.886], + "center": [ + 113.933, + 30.886 + ], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": ["city_boundary"], - "filter": [["东城新区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "东城新区" + ] + ], "easeTo": { - "center": [113.983, 30.896], + "center": [ + 113.983, + 30.896 + ], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": ["city_boundary"], - "filter": [["东城新区", "南城新区", "老城区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "东城新区", + "南城新区", + "老城区" + ] + ], "easeTo": { - "center": [113.953, 30.906], + "center": [ + 113.953, + 30.906 + ], "zoom": 13.6, "pitch": 55 } } } -} +} \ No newline at end of file diff --git a/src/views/sponeScreen/cityGK/PhysicalGeography.vue b/src/views/sponeScreen/cityGK/PhysicalGeography.vue index 1c231a6..17c17d2 100644 --- a/src/views/sponeScreen/cityGK/PhysicalGeography.vue +++ b/src/views/sponeScreen/cityGK/PhysicalGeography.vue @@ -80,7 +80,17 @@ }, ]); const showTotalArea = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ { layername: 'topography', @@ -99,17 +109,24 @@ show: true, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.202, - heading: 2.281299097855777, - zoom: 35358.12942752382, - pitch: -25.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.202], + zoom: 9, + pitch: 55, }); }; const showCenterCity = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -128,17 +145,24 @@ show: false, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.212, - heading: 2.281299097855777, - zoom: 60358.12942752382, - pitch: -45.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.212], + zoom: 10.5, + pitch: 10, }); }; const showBuiltCity = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -157,16 +181,24 @@ show: true, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.262, - heading: 2.281299097855777, - zoom: 42358.12942752382, - pitch: -35.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.262], + zoom: 10.5, + pitch: 10, }); + // newfiberMap.setCenter({ + // lng: 114.312, + // lat: 34.262, + // heading: 2.281299097855777, + // zoom: 42358.12942752382, + // pitch: -35.2508969308367, + // roll: 0.005453465256790101, + // }); }; const showOneCenterLayer = () => { + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -185,20 +217,25 @@ show: true, }, ]); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter1, 'oneCenter'); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter2, 'oneCenter'); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter, 'oneCenter'); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.742, - heading: 2.281299097855777, - zoom: 75358.12942752382, - pitch: -80.2508969308367, - roll: 0.005453465256790101, + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + pitch: 10, }); }; const setLayerVisible = () => { wmsVisibility.value = !wmsVisibility.value; + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); // newfiberMap.removeByIds(['oneCenter']); // if (!newfiberMap.xdmWms) { // newfiberMap.xdmWms = newfiberMap.loadWmsLayer({ @@ -211,14 +248,22 @@ // let imageryProvider = newfiberMap.getLayers([newfiberMap.xdmWms])[0]; // imageryProvider.show = !!!imageryProvider.show; newfiberMapBoxVectorLayer.addWMSLayer('demo:hn_kf_hm_dilei'); - // if (wmsVisibility.value) { - // newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'visible'); - // } else { - // newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); - // } + if (wmsVisibility.value) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'visible'); + } else { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } }; onMounted(() => { + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + pitch: 10, + }); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter1, 'oneCenter'); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter2, 'oneCenter'); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter, 'oneCenter'); diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue index 6cfe6d3..0268099 100644 --- a/src/views/sponeScreen/cityGK/index.vue +++ b/src/views/sponeScreen/cityGK/index.vue @@ -26,6 +26,7 @@ import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部 import PhysicalGeography from '@/views/sponeScreen/cityGK/PhysicalGeography.vue'; //头部 import bus from '@/bus/index'; +import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import { onBeforeUnmount } from 'vue'; const { proxy } = getCurrentInstance(); @@ -66,7 +67,14 @@ }); onBeforeUnmount(() => { if (!newfiberMap) return; - newfiberMap.removeByIds(['oneCenter']); + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ { layername: 'buildingModel', diff --git a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js index 0f91e59..082a9ab 100644 --- a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js +++ b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js @@ -89,7 +89,7 @@ } //添加geoserver图层 static addWMSLayer(layerName) { - if (!newfiberMapbox.map.getLayer()) { + if (!newfiberMapbox.map.getLayer(layerName)) { newfiberMapbox.map.addSource(layerName, { type: 'raster', // use the tiles option to specify a WMS tile source URL diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue index c2a10a0..5d07f2d 100644 --- a/src/views/sponeScreen/waterFlood/index.vue +++ b/src/views/sponeScreen/waterFlood/index.vue @@ -81,14 +81,14 @@ dialogShow.value = true; }); setTimeout(() => { - newfiberMap.setView({ - lng: 114.342, - lat: 34.702, - heading: 2.281299097855777, - zoom: 6358.12942752382, - pitch: -25.2508969308367, - roll: 0.005453465256790101, - }); + // newfiberMap.setView({ + // lng: 114.342, + // lat: 34.702, + // heading: 2.281299097855777, + // zoom: 6358.12942752382, + // pitch: -25.2508969308367, + // roll: 0.005453465256790101, + // }); bus.emit('setIniteLayer', [ { diff --git a/public/static/libs/mapbox/style/HaiMianScreen.json b/public/static/libs/mapbox/style/HaiMianScreen.json index ac6803f..6acc50d 100644 --- a/public/static/libs/mapbox/style/HaiMianScreen.json +++ b/public/static/libs/mapbox/style/HaiMianScreen.json @@ -2,9 +2,14 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": ["/static/libs/mapbox/style/sprite/sprite5"], + "sprites": [ + "/static/libs/mapbox/style/sprite/sprite5" + ], "init": { - "center": [114.312, 34.802], + "center": [ + 114.312, + 34.802 + ], "zoom": 12.9, "pitch": 55, "style": "/static/libs/mapbox/style/customs/whiteMapStyle.json" @@ -29,7 +34,16 @@ "params": { "id": "newfiber-XYZLayer", "url": "https://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=a603e07a17766447f9e74f14c5454efa", - "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"], + "subdomains": [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7" + ], "minZoom": 1, "maxZoom": 19, "tileType": "" @@ -37,7 +51,9 @@ "methods": [ { "name": "addTo", - "params": ["''||map"] + "params": [ + "''||map" + ] }, { "name": "hide", @@ -51,7 +67,16 @@ "params": { "id": "newfiber-WMTSLayer", "url": "https://t{s}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=5095c97223409ac114493d71ecb9cd87", - "subdomains": ["0", "1", "2", "3", "4", "5", "6", "7"] + "subdomains": [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7" + ] }, "methods": [] }, @@ -60,7 +85,12 @@ "type": "CanvasLayer", "params": { "id": "newfiber-CanvasLayer", - "bbox": [110.98300209463804, 32.415967161418266, 111.34992583909221, 32.599933881244255], + "bbox": [ + 110.98300209463804, + 32.415967161418266, + 111.34992583909221, + 32.599933881244255 + ], "width": 3000, "height": 1172, "images": "''||Array(16).fill().map((i,idx)=> `https://server1.wh-nf.cn:9000/newfiber-standard/2024/01/06/step${idx+1}.png`)" @@ -91,7 +121,9 @@ "methods": [ { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "color", @@ -133,15 +165,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -187,15 +225,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -242,19 +286,28 @@ "methods": [ { "name": "shape", - "params": ["circle"] + "params": [ + "circle" + ] }, { "name": "color", - "params": ["rgba(236,223,25,1.0)"] + "params": [ + "rgba(236,223,25,1.0)" + ] }, { "name": "size", - "params": ["size", "''||function(v){return v}"] + "params": [ + "size", + "''||function(v){return v}" + ] }, { "name": "animate", - "params": [true] + "params": [ + true + ] }, { "name": "style", @@ -278,15 +331,21 @@ "methods": [ { "name": "size", - "params": [3] + "params": [ + 3 + ] }, { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "texture", - "params": ["02"] + "params": [ + "02" + ] }, { "name": "color", @@ -331,19 +390,27 @@ "methods": [ { "name": "shape", - "params": ["circle"] + "params": [ + "circle" + ] }, { "name": "color", - "params": ["rgba(255,0,0,1.0)"] + "params": [ + "rgba(255,0,0,1.0)" + ] }, { "name": "size", - "params": [10] + "params": [ + 10 + ] }, { "name": "animate", - "params": [true] + "params": [ + true + ] }, { "name": "style", @@ -367,17 +434,24 @@ "methods": [ { "name": "shape", - "params": ["map_selected"] + "params": [ + "map_selected" + ] }, { "name": "size", - "params": [30] + "params": [ + 30 + ] }, { "name": "style", "params": [ { - "offsets": [0, 0] + "offsets": [ + 0, + 0 + ] } ] } @@ -394,15 +468,21 @@ "methods": [ { "name": "shape", - "params": ["line"] + "params": [ + "line" + ] }, { "name": "size", - "params": [2] + "params": [ + 2 + ] }, { "name": "color", - "params": ["rgba(189, 209, 150,1)"] + "params": [ + "rgba(189, 209, 150,1)" + ] } ] } @@ -427,9 +507,26 @@ "key": "hn_kf_hm_pipeline", "source-layer": "hn_kf_hm_pipeline", "type": "line", - "filter": ["in", "类型", ""], + "filter": [ + "in", + "类型", + "" + ], "paint": { - "line-color": ["match", ["get", "类型"], "ys", "#1b76ff", "ws", "#ff4c61", "hs", "#d8ad4f", "#000000"], + "line-color": [ + "match", + [ + "get", + "类型" + ], + "ys", + "#1b76ff", + "ws", + "#ff4c61", + "hs", + "#d8ad4f", + "#000000" + ], "line-width": 2 }, "layout": {}, @@ -443,9 +540,16 @@ "key": "hubei_xiaogan_hm_city_boundary", "source-layer": "hubei_xiaogan_hm_city_boundary", "type": "fill", - "filter": ["in", "name", ""], + "filter": [ + "in", + "name", + "" + ], "paint": { - "fill-color": ["get", "fill_color"] + "fill-color": [ + "get", + "fill_color" + ] }, "layout": {}, "minzoom": 10, @@ -458,9 +562,16 @@ "key": "hubei_xiaogan_hm_psfq", "source-layer": "hubei_xiaogan_hm_psfq", "type": "fill", - "filter": ["in", "type", ""], + "filter": [ + "in", + "type", + "" + ], "paint": { - "fill-color": ["get", "fill_color"], + "fill-color": [ + "get", + "fill_color" + ], "fill-opacity": 0.4 }, "layout": {}, @@ -474,17 +585,36 @@ "key": "hn_kf_hm_pipeline_point", "source-layer": "hn_kf_hm_pipeline_point", "type": "symbol", - "filter": ["in", "类型", ""], + "filter": [ + "in", + "类型", + "" + ], "paint": { "text-color": "rgba(255, 255, 255, 1)", "text-halo-color": "rgba(14, 139, 90, 1)", "text-halo-width": 2 }, "layout": { - "icon-image": ["match", ["get", "类型"], "ys", "ysj", "ws", "wsj", "hs", "hsj", "ysbz"], + "icon-image": [ + "match", + [ + "get", + "类型" + ], + "ys", + "ysj", + "ws", + "wsj", + "hs", + "hsj", + "ysbz" + ], "icon-size": 0.5, "text-field": "{管线点号}", - "text-font": ["KlokanTech Noto Sans Regular"], + "text-font": [ + "KlokanTech Noto Sans Regular" + ], "text-size": 13, "text-line-height": 3, "text-anchor": "top" @@ -500,7 +630,11 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": ["in", "type", ""], + "filter": [ + "in", + "type", + "" + ], "paint": { "text-color": "rgba(255, 255, 255, 1)", "text-halo-color": "rgba(14, 139, 90, 1)", @@ -509,7 +643,10 @@ "layout": { "icon-image": [ "match", - ["get", "type"], + [ + "get", + "type" + ], "YSBZ", "rainBengZhan_icon", "WSBZ", @@ -527,6 +664,7 @@ "origine", "origine_icon", "spongeFacility", + "spongeFacility_icon", "pipeMonitor", "spongeFacility_icon", "waterFactory", @@ -538,85 +676,192 @@ "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": ["KlokanTech Noto Sans Regular"], + "text-font": [ + "KlokanTech Noto Sans Regular" + ], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [0, -0.8] + "text-offset": [ + 0, + -0.8 + ] }, "mType": "geojson" } ], "orders": [ - ["newfiber-XYZLayer"], - ["hubei_xiaogan_hm_psfq"], - ["city_boundary"], - ["all_boundary"], - ["pipeline_info"], - ["pipeline_point"], - ["poi_label"], - ["place_label_city"], - ["road_major_label"], - ["place_label_other"], - ["point"] + [ + "newfiber-XYZLayer" + ], + [ + "hubei_xiaogan_hm_psfq" + ], + [ + "city_boundary" + ], + [ + "all_boundary" + ], + [ + "pipeline_info" + ], + [ + "pipeline_point" + ], + [ + "poi_label" + ], + [ + "place_label_city" + ], + [ + "road_major_label" + ], + [ + "place_label_other" + ], + [ + "point" + ] ], "filter": { "wsLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["ws"], ["ws"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "ws" + ], + [ + "ws" + ] + ] }, "hsLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["hs"], ["hs"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "hs" + ], + [ + "hs" + ] + ] }, "ysLine1": { - "layerName": ["pipeline_info", "pipeline_point"], - "filter": [["ys"], ["ys"]] + "layerName": [ + "pipeline_info", + "pipeline_point" + ], + "filter": [ + [ + "ys" + ], + [ + "ys" + ] + ] }, "YSFQ": { - "layerName": ["hubei_xiaogan_hm_psfq"], - "filter": [["YS"]] + "layerName": [ + "hubei_xiaogan_hm_psfq" + ], + "filter": [ + [ + "YS" + ] + ] }, "WSFQ": { - "layerName": ["hubei_xiaogan_hm_psfq"], - "filter": [["WS"]] + "layerName": [ + "hubei_xiaogan_hm_psfq" + ], + "filter": [ + [ + "WS" + ] + ] }, "oldCity": { - "layerName": ["city_boundary"], - "filter": [["老城区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "老城区" + ] + ], "easeTo": { - "center": [113.933, 30.926], + "center": [ + 113.933, + 30.926 + ], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": ["city_boundary"], - "filter": [["南城新区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "南城新区" + ] + ], "easeTo": { - "center": [113.933, 30.886], + "center": [ + 113.933, + 30.886 + ], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": ["city_boundary"], - "filter": [["东城新区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "东城新区" + ] + ], "easeTo": { - "center": [113.983, 30.896], + "center": [ + 113.983, + 30.896 + ], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": ["city_boundary"], - "filter": [["东城新区", "南城新区", "老城区"]], + "layerName": [ + "city_boundary" + ], + "filter": [ + [ + "东城新区", + "南城新区", + "老城区" + ] + ], "easeTo": { - "center": [113.953, 30.906], + "center": [ + 113.953, + 30.906 + ], "zoom": 13.6, "pitch": 55 } } } -} +} \ No newline at end of file diff --git a/src/views/sponeScreen/cityGK/PhysicalGeography.vue b/src/views/sponeScreen/cityGK/PhysicalGeography.vue index 1c231a6..17c17d2 100644 --- a/src/views/sponeScreen/cityGK/PhysicalGeography.vue +++ b/src/views/sponeScreen/cityGK/PhysicalGeography.vue @@ -80,7 +80,17 @@ }, ]); const showTotalArea = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ { layername: 'topography', @@ -99,17 +109,24 @@ show: true, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.202, - heading: 2.281299097855777, - zoom: 35358.12942752382, - pitch: -25.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.202], + zoom: 9, + pitch: 55, }); }; const showCenterCity = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -128,17 +145,24 @@ show: false, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.212, - heading: 2.281299097855777, - zoom: 60358.12942752382, - pitch: -45.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.212], + zoom: 10.5, + pitch: 10, }); }; const showBuiltCity = () => { - newfiberMap.removeByIds(['oneCenter']); + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -157,16 +181,24 @@ show: true, }, ]); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.262, - heading: 2.281299097855777, - zoom: 42358.12942752382, - pitch: -35.2508969308367, - roll: 0.005453465256790101, + newfiberMapbox.map.easeTo({ + center: [114.312, 34.262], + zoom: 10.5, + pitch: 10, }); + // newfiberMap.setCenter({ + // lng: 114.312, + // lat: 34.262, + // heading: 2.281299097855777, + // zoom: 42358.12942752382, + // pitch: -35.2508969308367, + // roll: 0.005453465256790101, + // }); }; const showOneCenterLayer = () => { + if (newfiberMapbox.map.getLayer('demo:hn_kf_hm_dilei')) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } bus.emit('setIniteLayer', [ // { // layername: 'buildingModel', @@ -185,20 +217,25 @@ show: true, }, ]); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter1, 'oneCenter'); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter2, 'oneCenter'); - newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter, 'oneCenter'); - newfiberMap.setCenter({ - lng: 114.312, - lat: 34.742, - heading: 2.281299097855777, - zoom: 75358.12942752382, - pitch: -80.2508969308367, - roll: 0.005453465256790101, + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + pitch: 10, }); }; const setLayerVisible = () => { wmsVisibility.value = !wmsVisibility.value; + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); // newfiberMap.removeByIds(['oneCenter']); // if (!newfiberMap.xdmWms) { // newfiberMap.xdmWms = newfiberMap.loadWmsLayer({ @@ -211,14 +248,22 @@ // let imageryProvider = newfiberMap.getLayers([newfiberMap.xdmWms])[0]; // imageryProvider.show = !!!imageryProvider.show; newfiberMapBoxVectorLayer.addWMSLayer('demo:hn_kf_hm_dilei'); - // if (wmsVisibility.value) { - // newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'visible'); - // } else { - // newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); - // } + if (wmsVisibility.value) { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'visible'); + } else { + newfiberMapbox.map.setLayoutProperty('demo:hn_kf_hm_dilei', 'visibility', 'none'); + } }; onMounted(() => { + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter', oneCenter); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1); + newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter2', oneCenter2); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + pitch: 10, + }); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter1, 'oneCenter'); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter2, 'oneCenter'); // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter, 'oneCenter'); diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue index 6cfe6d3..0268099 100644 --- a/src/views/sponeScreen/cityGK/index.vue +++ b/src/views/sponeScreen/cityGK/index.vue @@ -26,6 +26,7 @@ import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部 import PhysicalGeography from '@/views/sponeScreen/cityGK/PhysicalGeography.vue'; //头部 import bus from '@/bus/index'; +import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import { onBeforeUnmount } from 'vue'; const { proxy } = getCurrentInstance(); @@ -66,7 +67,14 @@ }); onBeforeUnmount(() => { if (!newfiberMap) return; - newfiberMap.removeByIds(['oneCenter']); + newfiberMapBoxVectorLayer.removeByIds([ + 'oneCenter', + 'oneCenter_label', + 'oneCenter1', + 'oneCenter1_label', + 'oneCenter2', + 'oneCenter2_label', + ]); bus.emit('setIniteLayer', [ { layername: 'buildingModel', diff --git a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js index 0f91e59..082a9ab 100644 --- a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js +++ b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js @@ -89,7 +89,7 @@ } //添加geoserver图层 static addWMSLayer(layerName) { - if (!newfiberMapbox.map.getLayer()) { + if (!newfiberMapbox.map.getLayer(layerName)) { newfiberMapbox.map.addSource(layerName, { type: 'raster', // use the tiles option to specify a WMS tile source URL diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue index c2a10a0..5d07f2d 100644 --- a/src/views/sponeScreen/waterFlood/index.vue +++ b/src/views/sponeScreen/waterFlood/index.vue @@ -81,14 +81,14 @@ dialogShow.value = true; }); setTimeout(() => { - newfiberMap.setView({ - lng: 114.342, - lat: 34.702, - heading: 2.281299097855777, - zoom: 6358.12942752382, - pitch: -25.2508969308367, - roll: 0.005453465256790101, - }); + // newfiberMap.setView({ + // lng: 114.342, + // lat: 34.702, + // heading: 2.281299097855777, + // zoom: 6358.12942752382, + // pitch: -25.2508969308367, + // roll: 0.005453465256790101, + // }); bus.emit('setIniteLayer', [ { diff --git a/vite.config.js b/vite.config.js index 24dcf41..ea36ec6 100644 --- a/vite.config.js +++ b/vite.config.js @@ -7,8 +7,8 @@ const Timestamp = new Date().getTime(); //随机时间戳 // const targetUrl = 'http://192.168.16.254:7200'; //孙逢时 -const targetUrl = 'http://192.168.20.52:7300'; //杨辉 -// const targetUrl = 'https://server2.wh-nf.cn:8082/prod-api'; //线上 +// const targetUrl = 'http://192.168.20.52:7300'; //杨辉 +const targetUrl = 'https://server2.wh-nf.cn:8082/prod-api'; //线上 // https://vitejs.dev/config/ export default defineConfig(({ mode, command }) => {