package-lock.json
ÎļþÌ«´ó public/CimSDK/Workers/image/¾üʱê»æ/ÈËÃñ·À¿Õ²¿ÊðÓëÐж¯/ÈËÃñ·À¿ÕÐж¯/10-44100-1-ÈËÃñ·À¿ÕÊèÉ¢Ðж¯.png
@@ -1,11 +1,15 @@ const isWeb = location.href.indexOf("web") > -1; var hostname = isWeb ? "" : location.hostname; var port = isWeb ? "" : location.port; var web = isWeb ? "/web" : ""; var iisHost = "http://" + hostname + ":" + port + web; const config = { ifreamLogin: iisHost + "/mapscreen/index.html", jsonUrl: iisHost + "/data/json/", }; const isWeb = location.href.indexOf("StressTest") > -1; var hostname = isWeb ? "" : location.hostname; var port = isWeb ? "" : location.port; var web = isWeb ? "/StressTest" : ""; var iisHost = "http://" + hostname + ":" + port + web; const config = { ifreamLogin: iisHost + "/mapscreen/index.html", jsonUrl: iisHost + "/data/json/", // 线é¢åæ é ç½®"10-26400-1", xmjb:["10-35000-1","10-33400-1","10-33401-1","10-33402-1","10-33403-1","10-33404-1", "10-35000-0","10-34400-1","10-34500-1","10-34501-1","10-34700-1","10-34900-1","10-34901-1", "10-29100-1"], };
@@ -1,1643 +1,21 @@ { "name": "SmartEarth", "id": 1, "open": true, "children": [{ "id": "82A0C3DE", "name": "èªç¶ç¯å¢", "children": [{ "id": "3803C067", "sourceType": "tdmap", "name": "é¥æå½±å", "urls": "https://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=3ec79cf7a9dcc6bb18411a5414b148cb", "layer": "", "alpha": 1, "maximumLevel": 18, "Level": [0, 26], "checked": false, "rename": false }, { "id": "634152A9", "sourceType": "txmap", "name": "çµåå°å¾", "urls": "https://rt1.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=3", "layer": "", "alpha": 1, "maximumLevel": 18, "Level": [0, 26], "checked": true, "rename": false }, { "id": "0B71FBEC", "name": "å°å½¢å¾", "children": [], "rename": false }, { "id": "B0F7A313", "name": "æ°åé«ç¨", "children": [], "rename": false }, { "id": "01DF0BCB", "name": "å ´è¶£ç¹", "sourceType": "location", "checked": true, "rename": false, "disabled": true, "flyTo": ["122.492765", "31.996999", "12034357.82", 359.9999999999998, -89.80884256710566] }], "rename": false, "expanded": true, "checked": true }, { "id": "82C3DE", "name": "社ä¼ç¯å¢", "children": [{ "id": "BEC8A8E2", "name": "人æç¯å¢", "children": [], "rename": false, "checked": false }, { "id": "37E2E74E", "name": "ç»æµç¯å¢", "children": [], "rename": false }, { "id": "B4FDFB67", "name": "交éç¯å¢", "children": [], "rename": false }], "rename": false, "expanded": true }, { "id": "4FE10401", "name": "ä¿¡æ¯ç¯å¢", "children": [{ "id": "BEE9438A", "name": "èªç¶çµç£ç¯å¢", "children": [], "rename": false }, { "id": "734B1292", "name": "æ´ä½çµç£ç¯å¢", "children": [], "rename": false }], "rename": false, "expanded": true }, { "id": "82C3DX", "name": "å½±å", "children": null, "rename": false, "expanded": false, "_children": [{ "id": "8B9FAE96", "sourceType": "arcgis", "name": "ArcGISå½±å", "urls": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", "layer": "", "alpha": 1, "maximumLevel": 26, "Level": [0, 26], "checked": true, "rename": false }, { "id": "52F67C44", "sourceType": "gdmap", "name": "é«å¾·æ³¨è®°", "urls": "https://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}", "layer": "", "alpha": 1, "maximumLevel": 18, "Level": [0, 26], "checked": false, "rename": false } ], "checked": false }, { "id": "4FE10400", "name": "模å", "children": [{ "id": "D6D9C4BC", "sourceType": "gltf", "name": "é£æºæ¨¡å1", "urls": "http://183.162.245.49:8090/ModelLibrary/é£è¡ç©/feiji.glb", "effects": false, "effectsMaxHeight": 150, "backFaceCulling": true, "maximumScreenSpaceError": 16, "maximumMemoryUsage": 512, "lon": 119.789, "lat": 25.519, "height": 1200, "heading": 0, "roll": 0, "pitch": 0, "scale": 1, "near": 0, "far": 999999999, "checked": false, "rename": false }, { "id": "D6D9C4BE", "sourceType": "gltf", "name": "é£æºæ¨¡å2", "urls": "http://183.162.245.49:8090/ModelLibrary/é£è¡ç©/feiji.glb", "effects": false, "effectsMaxHeight": 150, "backFaceCulling": true, "maximumScreenSpaceError": 16, "maximumMemoryUsage": 512, "lon": 119.782727, "lat": 25.516739, "height": 1000, "heading": 0, "roll": 0, "pitch": 0, "scale": 1, "near": 0, "far": 999999999, "checked": false, "rename": false }, { "id": "D6D9C4BD", "sourceType": "gltf", "name": "å«æ模å", "urls": "http://183.162.245.49:8090/ModelLibrary/太空/weixin.gltf", "effects": false, "effectsMaxHeight": 150, "backFaceCulling": true, "maximumScreenSpaceError": 16, "maximumMemoryUsage": 512, "lon": 111.75, "lat": 28.73, "height": 338000, "heading": 0, "roll": 0, "pitch": 0, "scale": 60, "near": 0, "far": 999999999, "checked": false, "rename": false } ], "rename": false, "checked": false, "_children": null, "expanded": false }, { "id": "BF993EEC", "name": "å®ä½", "children": [{ "id": "4E80A73B", "name": "åå§", "sourceType": "SimpleGraphic", "class": "billboard", "style": { "id": "4E80A73B", "name": "åå§", "position": { "x": -2177777.6382824746, "y": 4388758.233098305, "z": 4070021.5570232095 }, "image": "http://183.162.245.49:8090/yanshi0418/wujiaoxing.png", "scale": 1.5, "rotation": 0, "width": 32, "height": 32, "color": "rgb(255,255,255)", "horizontalOrigin": 0, "verticalOrigin": 1, "heightReference": 0, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "showLabel": false, "label_text": "æ°å»ºææ¬", "label_font": "24px å®ä½", "label_style": 2, "label_scale": 1, "label_fillColor": "rgb(255,255,255)", "label_outlineColor": "rgb(0,0,0)", "label_outlineWidth": 0, "label_showBackground": false, "label_backgroundColor": "rgba(42,42,42,0.8)", "label_horizontalOrigin": 0, "label_verticalOrigin": 0, "label_heightReference": 1, "label_distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "billboard", "propData": {} }, "checked": false, "rename": false }, { "id": "11E65749", "name": "æåº", "sourceType": "SimpleGraphic", "class": "billboard", "style": { "id": "11E65749", "name": "æåº", "position": { "x": -2605753.7598548946, "y": 4741900.243320153, "z": 3365811.3415483204 }, "image": "http://183.162.245.49:8090/yanshi0418/yuanquan.png", "scale": 1.5, "rotation": 0, "width": 32, "height": 32, "color": "rgb(255,255,255)", "horizontalOrigin": 0, "verticalOrigin": 1, "heightReference": 0, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "showLabel": false, "label_text": "æ°å»ºææ¬", "label_font": "24px å®ä½", "label_style": 2, "label_scale": 1, "label_fillColor": "rgb(255,255,255)", "label_outlineColor": "rgb(0,0,0)", "label_outlineWidth": 0, "label_showBackground": false, "label_backgroundColor": "rgba(42,42,42,0.8)", "label_horizontalOrigin": 0, "label_verticalOrigin": 0, "label_heightReference": 1, "label_distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "billboard", "propData": {} }, "checked": false, "rename": false }, { "id": "61E74C87", "name": "ä½æé群", "sourceType": "SimpleGraphic", "class": "billboard", "style": { "id": "61E74C87", "name": "ä½æé群", "position": { "x": -2804424.880761257, "y": 5001366.224228234, "z": 2783839.9247218217 }, "image": "http://183.162.245.49:8090/yanshi0418/sanjiaoxing.png", "scale": 1.5, "rotation": 0, "width": 32, "height": 32, "color": "rgb(255,255,255)", "horizontalOrigin": 0, "verticalOrigin": 1, "heightReference": 0, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "showLabel": false, "label_text": "æ°å»ºææ¬", "label_font": "24px å®ä½", "label_style": 2, "label_scale": 1, "label_fillColor": "rgb(255,255,255)", "label_outlineColor": "rgb(0,0,0)", "label_outlineWidth": 0, "label_showBackground": false, "label_backgroundColor": "rgba(42,42,42,0.8)", "label_horizontalOrigin": 0, "label_verticalOrigin": 0, "label_heightReference": 1, "label_distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "billboard", "propData": {} }, "checked": false, "rename": false }, { "id": "6BFF77A2", "name": "å¦å 群", "sourceType": "SimpleGraphic", "class": "billboard", "style": { "id": "6BFF77A2", "name": "å¦å 群", "position": { "x": -2858943.5624323706, "y": 5004388.033933317, "z": 2722702.065406316 }, "image": "http://183.162.245.49:8090/yanshi0418/tankequn.png", "scale": 2, "rotation": 0, "width": 32, "height": 32, "color": "rgb(255,255,255)", "horizontalOrigin": 0, "verticalOrigin": 1, "heightReference": 0, "distanceDisplayCondition": { "near": 0, "far": "500000" }, "showLabel": false, "label_text": "æ°å»ºææ¬", "label_font": "24px å®ä½", "label_style": 2, "label_scale": 1, "label_fillColor": "rgb(255,255,255)", "label_outlineColor": "rgb(0,0,0)", "label_outlineWidth": 0, "label_showBackground": false, "label_backgroundColor": "rgba(42,42,42,0.8)", "label_horizontalOrigin": 0, "label_verticalOrigin": 0, "label_heightReference": 1, "label_distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "billboard", "propData": {} }, "checked": false, "rename": false }, { "id": "6BFF77A6", "name": "é£æºç¾¤", "sourceType": "SimpleGraphic", "class": "billboard", "style": { "id": "6BFF77A6", "name": "é£æºç¾¤", "position": { "x": -2863666.95170697, "y": 4996294.502196852, "z": 2732517.936915382 }, "image": "http://183.162.245.49:8090/yanshi0418/feijiqun.png", "scale": 4, "rotation": 0, "width": 32, "height": 32, "color": "rgb(255,255,255)", "horizontalOrigin": 0, "verticalOrigin": 1, "heightReference": 0, "distanceDisplayCondition": { "near": "10000", "far": "2000000" }, "showLabel": false, "label_text": "æ°å»ºææ¬", "label_font": "24px å®ä½", "label_style": 2, "label_scale": 1, "label_fillColor": "rgb(255,255,255)", "label_outlineColor": "rgb(0,0,0)", "label_outlineWidth": 0, "label_showBackground": false, "label_backgroundColor": "rgba(42,42,42,0.8)", "label_horizontalOrigin": 0, "label_verticalOrigin": 0, "label_heightReference": 1, "label_distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "billboard", "propData": {} }, "checked": false, "rename": false } ], "rename": false, "expanded": false, "checked": false }, { "id": "0A51CF71", "name": "æµçº¿", "children": [{ "id": "0043A493", "name": "å京å°å京", "sourceType": "FlowField", "style": { "width": 8, "color": "#0000ff", "clampToGround": true }, "positions": [{ "x": -2178663.142924422, "y": 4388756.365739068, "z": 4069552.1464237026 }, { "x": -2605913.7997011724, "y": 4741817.347345968, "z": 3365807.161119517 } ], "checked": false, "rename": false }, { "id": "BFF675EC", "name": "å京å°ç¦å·", "sourceType": "FlowField", "style": { "width": 8, "color": "#0000ff", "clampToGround": true }, "positions": [{ "x": -2605913.7997011724, "y": 4741817.347345968, "z": 3365807.161119517 }, { "x": -2804239.8379912334, "y": 5000164.305813948, "z": 2786194.5392209366 } ], "checked": false, "rename": false }, { "id": "87D8926C", "name": "ç¦å·å°å¹³æ½", "sourceType": "FlowField", "style": { "width": 8, "color": "#0000ff", "clampToGround": true }, "positions": [{ "x": -2804239.8379912334, "y": 5000164.305813948, "z": 2786194.5392209366 }, { "x": -2860797.2230127472, "y": 4998842.80952202, "z": 2730893.5688466853 } ], "checked": false, "rename": false } ], "rename": false, "expanded": false, "checked": false }, { "id": "AD66C2CA", "name": "éæ线", "children": [{ "id": "FF5557E9", "name": "å京å°å京", "sourceType": "SimpleGraphic", "class": "polyline", "style": { "id": "FF5557E9", "name": "å京å°å京", "positions": [{ "x": -2178663.142924422, "y": 4388756.365739068, "z": 4069552.1464237026 }, { "x": -2605913.7997011724, "y": 4741817.347345968, "z": 3365807.161119517 } ], "clampToGround": true, "color": "rgba(230,209,23,0.91)", "outlineWidth": 0, "outlineColor": "rgba(255,255,255,0.6)", "width": 10, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "polyline", "propData": {} }, "checked": false, "rename": false }, { "id": "35ADD547", "name": "å京å°ç¦å·", "sourceType": "SimpleGraphic", "class": "polyline", "style": { "id": "35ADD547", "name": "å京å°ç¦å·", "positions": [{ "x": -2605913.7997011724, "y": 4741817.347345968, "z": 3365807.161119517 }, { "x": -2804239.8379912334, "y": 5000164.305813948, "z": 2786194.5392209366 } ], "clampToGround": true, "color": "rgba(211,218,7,0.91)", "outlineWidth": 0, "outlineColor": "rgba(255,255,255,0.6)", "width": 10, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "polyline", "propData": {} }, "checked": false, "rename": false }, { "id": "9F07E807", "name": "ç¦å·å°å¹³æ½", "sourceType": "SimpleGraphic", "class": "polyline", "style": { "id": "9F07E807", "name": "ç¦å·å°å¹³æ½", "positions": [{ "x": -2804239.8379912334, "y": 5000164.305813948, "z": 2786194.5392209366 }, { "x": -2860797.2230127472, "y": 4998842.80952202, "z": 2730893.5688466853 } ], "clampToGround": true, "color": "rgba(211,218,7,0.91)", "outlineWidth": 0, "outlineColor": "rgba(255,255,255,0.6)", "width": 10, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "polyline", "propData": {} }, "checked": false, "rename": false }, { "id": "8D8D7789", "name": "绿", "sourceType": "SimpleGraphic", "class": "polyline", "style": { "id": "8D8D7789", "name": "æ°å»ºçº¿", "positions": [{ "x": -2165775.8076072233, "y": 5470423.667881753, "z": 3200000 }, { "x": -2178663.142924422, "y": 4388756.365739068, "z": 4069552.1464237026 } ], "clampToGround": false, "color": "rgb(0,255,0)", "outlineWidth": 0, "outlineColor": "rgba(255,255,255,0.6)", "width": 8, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "polyline", "propData": {} }, "checked": false, "rename": false }, { "id": "EB6B36B8", "name": "绿", "sourceType": "SimpleGraphic", "class": "polyline", "style": { "id": "EB6B36B8", "name": "æ°å»ºçº¿", "positions": [{ "x": -2165775.8076072233, "y": 5470423.667881753, "z": 3200000 }, { "x": -2605913.7997011724, "y": 4741817.347345968, "z": 3365807.161119517 } ], "clampToGround": false, "color": "rgb(0,255,0)", "outlineWidth": 0, "outlineColor": "rgba(255,255,255,0.6)", "width": 8, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "polyline", "propData": {} }, "checked": false, "rename": false }, { "id": "511659D5", "name": "æ©", "sourceType": "SimpleGraphic", "class": "polyline", "style": { "id": "511659D5", "name": "æ°å»ºçº¿", "positions": [{ "x": -2165775.8076072233, "y": 5470423.667881753, "z": 3200000 }, { "x": -2804239.8379912334, "y": 5000164.305813948, "z": 2786194.5392209366 } ], "clampToGround": false, "color": "rgb(251,192,0)", "outlineWidth": 0, "outlineColor": "rgba(255,255,255,0.6)", "width": 8, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "polyline", "propData": {} }, "checked": false, "rename": false }, { "id": "66DE14E1", "name": "红", "sourceType": "SimpleGraphic", "class": "polyline", "style": { "id": "66DE14E1", "name": "红", "positions": [{ "x": -2165775.8076072233, "y": 5470423.667881753, "z": 3200000 }, { "x": -2860797.2230127472, "y": 4998842.80952202, "z": 2730893.5688466853 } ], "clampToGround": false, "color": "rgb(255,0,0)", "outlineWidth": 0, "outlineColor": "rgba(255,255,255,0.6)", "width": 8, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "polyline", "propData": { "æ¾ç¤º": "ä¼ è¾ä¸æ" } }, "checked": false, "rename": false }, { "id": "8FBFA692", "name": "ä¼ è¾ä¸æ", "sourceType": "SimpleGraphic", "class": "label", "style": { "id": "8FBFA692", "name": "ä¼ è¾ä¸æ", "position": { "x": -2504021.6930618295, "y": 5146120.2321936805, "z": 2805949.459284321 }, "text": "ä¼ è¾ä¸æ", "font": "Blod 24px å®ä½", "style": 2, "scale": 1.5, "fillColor": "rgb(255,5,5)", "outlineColor": "rgb(0,0,0)", "outlineWidth": 2, "showBackground": false, "backgroundColor": "rgba(255,255,255,0.8)", "horizontalOrigin": 0, "verticalOrigin": 0, "heightReference": 0, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "label", "propData": {} }, "checked": false, "rename": false } ], "rename": false, "expanded": false, "checked": false }, { "id": "0F268387", "name": "æ¼ç¤ºå¨ç»", "children": [{ "id": "7BA80DFE", "name": "æ¼ç¤ºææ¬", "children": [{ "id": "710A1A45", "name": "æ¾ç¤ºåå§èæ", "sourceType": "SimpleGraphic", "class": "label", "style": { "id": "710A1A45", "name": "æ¾ç¤ºåå§èæ", "position": { "x": -1976994.7704157822, "y": 5312648.937025312, "z": 2913420.1059886804 }, "text": "æ¾ç¤ºåå§èæ", "font": "Blod 24px å®ä½", "style": 2, "scale": 2, "fillColor": "rgb(4,71,255)", "outlineColor": "rgb(255,255,255)", "outlineWidth": 2, "showBackground": true, "backgroundColor": "rgba(237,238,237,0.8)", "horizontalOrigin": 0, "verticalOrigin": 0, "heightReference": 0, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "label", "propData": {} }, "checked": false, "rename": false }, { "id": "8BE2C18A", "name": "æ¾ç¤ºæåºèæ", "sourceType": "SimpleGraphic", "class": "label", "style": { "id": "8BE2C18A", "name": "æ¾ç¤ºæåºèæ", "position": { "x": -1978815.2671918862, "y": 5310666.81558018, "z": 2915764.244466945 }, "text": "æ¾ç¤ºæåºèæ", "font": "Blod 24px å®ä½", "style": 2, "scale": 2, "fillColor": "rgb(4,71,255)", "outlineColor": "rgb(255,255,255)", "outlineWidth": 2, "showBackground": true, "backgroundColor": "rgba(237,238,237,0.8)", "horizontalOrigin": 0, "verticalOrigin": 0, "heightReference": 0, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "label", "propData": {} }, "checked": false, "rename": false }, { "id": "CEF22C36", "name": "æ¾ç¤ºä½æé群", "sourceType": "SimpleGraphic", "class": "label", "style": { "id": "CEF22C36", "name": "æ¾ç¤ºä½æé群", "position": { "x": -1976317.2208451265, "y": 5311724.687855815, "z": 2915551.762152148 }, "text": "æ¾ç¤ºä½æé群", "font": "Blod 24px å®ä½", "style": 2, "scale": 2, "fillColor": "rgb(4,71,255)", "outlineColor": "rgb(255,255,255)", "outlineWidth": 2, "showBackground": true, "backgroundColor": "rgba(237,238,237,0.8)", "horizontalOrigin": 0, "verticalOrigin": 0, "heightReference": 0, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "label", "propData": {} }, "checked": false, "rename": false }, { "id": "366033A3", "name": "æ¾ç¤ºä»»å¡é¨é", "sourceType": "SimpleGraphic", "class": "label", "style": { "id": "366033A3", "name": "æ¾ç¤ºä»»å¡é¨é", "position": { "x": -1973140.3861496295, "y": 5311712.170560667, "z": 2917735.8969992967 }, "text": "æ¾ç¤ºä»»å¡é¨é", "font": "Blod 24px å®ä½", "style": 2, "scale": 2, "fillColor": "rgb(4,71,255)", "outlineColor": "rgb(255,255,255)", "outlineWidth": 2, "showBackground": true, "backgroundColor": "rgba(237,238,237,0.8)", "horizontalOrigin": 0, "verticalOrigin": 0, "heightReference": 0, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "label", "propData": {} }, "checked": false, "rename": false }, { "id": "EF666AD4", "name": "æ¾ç¤ºç©ºä¸å«æ", "sourceType": "SimpleGraphic", "class": "label", "style": { "id": "EF666AD4", "name": "æ¾ç¤ºç©ºä¸å«æ", "position": { "x": -1975302.1204429076, "y": 5312139.576684197, "z": 2915492.3948352933 }, "text": "æ¾ç¤ºç©ºä¸å«æ", "font": "Blod 24px å®ä½", "style": 2, "scale": 2, "fillColor": "rgb(4,71,255)", "outlineColor": "rgb(255,255,255)", "outlineWidth": 2, "showBackground": true, "backgroundColor": "rgba(237,238,237,0.8)", "horizontalOrigin": 0, "verticalOrigin": 0, "heightReference": 0, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "label", "propData": {} }, "checked": false, "rename": false }, { "id": "538C10DD", "name": "æ¾ç¤ºé讯é¾è·¯", "sourceType": "SimpleGraphic", "class": "label", "style": { "id": "538C10DD", "name": "æ¾ç¤ºé讯é¾è·¯", "position": { "x": -2427484.1461830046, "y": 5129466.303803725, "z": 2901667.826433188 }, "text": "æ¾ç¤ºé讯é¾è·¯", "font": "Blod 24px å®ä½", "style": 2, "scale": 2, "fillColor": "rgb(4,71,255)", "outlineColor": "rgb(255,255,255)", "outlineWidth": 2, "showBackground": true, "backgroundColor": "rgba(237,238,237,0.8)", "horizontalOrigin": 0, "verticalOrigin": 0, "heightReference": 0, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "label", "propData": {} }, "checked": false, "rename": false }, { "id": "D70F3606", "name": "ç¶ææ¥è¯¢", "sourceType": "SimpleGraphic", "class": "label", "style": { "id": "D70F3606", "name": "ç¶ææ¥è¯¢", "position": { "x": -1945238.182542511, "y": 5323868.935441875, "z": 2914297.185356595 }, "text": "ç¶ææ¥è¯¢", "font": "Blod 24px å®ä½", "style": 2, "scale": 2, "fillColor": "rgb(4,71,255)", "outlineColor": "rgb(255,255,255)", "outlineWidth": 2, "showBackground": true, "backgroundColor": "rgba(237,238,237,0.8)", "horizontalOrigin": 0, "verticalOrigin": 0, "heightReference": 0, "distanceDisplayCondition": { "near": 0, "far": 100000000 }, "type": "label", "propData": {} }, "checked": false, "rename": false } ], "rename": false, "expanded": false, "checked": false }, { "id": "1A49A755", "name": "ä¿¡æ¯é¾è·¯æ¾ç¤º_æ¼ç¤ºå·¥å ·", "sourceType": "demoAnimation", "animationDatas": [{ "id": "2D288AA8", "description": "é»è®¤ä½ç½®", "type": "ä½ç½®", "view": { "lon": "109.131740", "lat": "32.194800", "height": "6718919.27", "heading": 354.1, "pitch": -88.70000000000033 }, "value": "2", "time": 1, "isClick": false }, { "id": "9528863B", "description": "æ¾ç¤ºåå§èæ", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["710A1A45"], "value": "2", "time": 3, "isClick": false }, { "id": "2EE22084", "description": "éèåå§èæ", "actionType": "éè对象", "type": "æä½", "selectInfo": ["710A1A45"], "value": "1", "isClick": false }, { "id": "436E8612", "description": "æ¾ç¤ºåå§ä½ç½®å¾æ ", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["4E80A73B"], "value": "2", "time": 1, "isClick": false }, { "id": "17B2211B", "description": "éèåå§ä½ç½®å¾æ ", "actionType": "éè对象", "type": "æä½", "selectInfo": ["4E80A73B"], "value": "2", "time": 1, "isClick": false }, { "id": "F5C63A93", "description": "æ¾ç¤ºåå§ä½ç½®å¾æ ", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["4E80A73B"], "value": "2", "time": 1, "isClick": false }, { "id": "DBE809A1", "description": "æ¾ç¤ºé»è®¤ä½ç½®", "type": "ä½ç½®", "view": { "lon": "115.051816", "lat": "29.355704", "height": "5580389.26", "heading": 357.83323848386374, "pitch": -86.5961304830374 }, "value": "1", "isClick": false }, { "id": "F6092392", "description": "æ¾ç¤ºæåºèæ", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["8BE2C18A"], "value": "2", "time": 3, "isClick": false }, { "id": "A58FFA7A", "description": "éèæåºèæ", "actionType": "éè对象", "type": "æä½", "selectInfo": ["8BE2C18A"], "value": "1", "isClick": false }, { "id": "C9EB0972", "description": "æ¾ç¤ºæåºä½ç½®å¾æ ", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["11E65749"], "value": "2", "time": 1, "isClick": false }, { "id": "EF6DC4CB", "description": "éèæåºä½ç½®å¾æ ", "actionType": "éè对象", "type": "æä½", "selectInfo": ["11E65749"], "value": "2", "time": 1, "isClick": false }, { "id": "27A3C0C9", "description": "æ¾ç¤ºæåºä½ç½®å¾æ ", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["11E65749"], "value": "2", "time": 1, "isClick": false }, { "id": "CC244478", "description": "æ¾ç¤ºé»è®¤ä½ç½®", "type": "ä½ç½®", "view": { "lon": "114.329684", "lat": "29.267469", "height": "5054497.61", "heading": 357.840511288967, "pitch": -86.58465869527897 }, "value": "1", "isClick": false }, { "id": "C25D7DCA", "description": "æ¾ç¤ºå京å°å京æµçº¿", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["0043A493"], "value": "1", "isClick": false }, { "id": "7142D4A5", "description": "æ¾ç¤ºå京å°å京æµéæ线", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["FF5557E9"], "value": "2", "time": 2, "isClick": false }, { "id": "E2DF762C", "description": "æ¾ç¤ºä½æé群", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["CEF22C36"], "value": "2", "time": 3, "isClick": false }, { "id": "796581AF", "description": "éèä½æé群", "actionType": "éè对象", "type": "æä½", "selectInfo": ["CEF22C36"], "value": "1", "isClick": false }, { "id": "32A1280D", "description": "æ¾ç¤ºä½æé群å¾æ ", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["61E74C87"], "value": "2", "time": 1, "isClick": false }, { "id": "4E1D947D", "description": "éèä½æé群å¾æ ", "actionType": "éè对象", "type": "æä½", "selectInfo": ["61E74C87"], "value": "2", "time": 1, "isClick": false }, { "id": "C059F92D", "description": "æ¾ç¤ºä½æé群å¾æ ", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["61E74C87"], "value": "2", "time": 1, "isClick": false }, { "id": "C63EA02F", "description": "æ¾ç¤ºé»è®¤ä½ç½®", "type": "ä½ç½®", "view": { "lon": "121.374870", "lat": "26.142288", "height": "4356039.31", "heading": 357.83212449218917, "pitch": -86.59788083067261 }, "value": "1", "isClick": false }, { "id": "44844F07", "description": "æ¾ç¤ºå京å°ç¦å·æµçº¿", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["BFF675EC"], "value": "1", "isClick": false }, { "id": "B4A16045", "description": "æ¾ç¤ºå京å°ç¦å·æµéæ线", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["35ADD547"], "value": "2", "time": 2, "isClick": false }, { "id": "DC17A35C", "description": "æ¾ç¤ºä»»å¡é¨é", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["366033A3"], "value": "2", "time": 3, "isClick": false }, { "id": "A815E926", "description": "éèä»»å¡é¨é", "actionType": "éè对象", "type": "æä½", "selectInfo": ["366033A3"], "value": "1", "isClick": false }, { "id": "9E7AB544", "description": "æ¾ç¤ºä½ç½®", "type": "ä½ç½®", "view": { "lon": "119.771912", "lat": "25.466326", "height": "339051.61", "heading": 9.339648782481907, "pitch": -88.04943417072181 }, "value": "1", "isClick": false }, { "id": "813E3326", "description": "æ¾ç¤ºä½æé群å¾æ ", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["6BFF77A2", "6BFF77A6"], "value": "2", "time": 1, "isClick": false }, { "id": "A6B66EF2", "description": "éèä½æé群å¾æ ", "actionType": "éè对象", "type": "æä½", "selectInfo": ["6BFF77A2", "6BFF77A6"], "value": "2", "time": 1, "isClick": false }, { "id": "F1AD0C76", "description": "æ¾ç¤ºä½æé群å¾æ ", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["6BFF77A2", "6BFF77A6"], "value": "2", "time": 1, "isClick": false }, { "id": "7396F648", "description": "æ¾ç¤ºä½ç½®", "type": "ä½ç½®", "view": { "lon": "119.771912", "lat": "25.466326", "height": "339051.61", "heading": 9.339648782481907, "pitch": -88.04943417072181 }, "value": "1", "isClick": false }, { "id": "61C3049A", "description": "æ¾ç¤ºç¦å·å°å¹³æ½æµçº¿", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["87D8926C"], "value": "1", "isClick": false }, { "id": "B7888A36", "description": "æ¾ç¤ºç¦å·å°å¹³æ½éæ线", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["9F07E807"], "value": "2", "time": 2, "isClick": false }, { "id": "56F9BA71", "description": "æ¾ç¤ºä½ç½®", "type": "ä½ç½®", "view": { "lon": "119.806705", "lat": "29.388126", "height": "5092401.07", "heading": 9.339708130989383, "pitch": -88.03886634582898 }, "value": "1", "isClick": false }, { "id": "019624F2", "description": "æ¾ç¤ºç©ºä¸å«æ", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["EF666AD4"], "value": "2", "time": 3, "isClick": false }, { "id": "A2DBBAF5", "description": "éè空ä¸å«æ", "actionType": "éè对象", "type": "æä½", "selectInfo": ["EF666AD4"], "value": "1", "isClick": false }, { "id": "91C04225", "description": "æ¾ç¤ºç©ºä¸å«æä½ç½®æ¨¡å", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["D6D9C4BD"], "value": "2", "time": 3, "isClick": false }, { "id": "7ABC8DE3", "description": "侧é¢å±ç¤ºå«æä½ç½®", "type": "ä½ç½®", "view": { "lon": "119.401895", "lat": "16.071907", "height": "1110461.97", "heading": 351.41184354978844, "pitch": -38.112339035741634 }, "value": "1", "isClick": false }, { "id": "66A51790", "description": "æ¾ç¤ºé讯é¾è·¯", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["538C10DD"], "value": "2", "time": 3, "isClick": false }, { "id": "9A815AEB", "description": "éèé讯é¾è·¯", "actionType": "éè对象", "type": "æä½", "selectInfo": ["538C10DD"], "value": "1", "isClick": false }, { "id": "00626E61", "description": "æ¾ç¤ºä¸åå§é讯", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["8D8D7789"], "value": "2", "time": 1, "isClick": false }, { "id": "78BDCA78", "description": "æ¾ç¤ºä¸æåºé讯", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["EB6B36B8"], "value": "2", "time": 1, "isClick": false }, { "id": "7A6D4A89", "description": "æ¾ç¤ºä¸ä½æé群é讯", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["511659D5"], "value": "2", "time": 1, "isClick": false }, { "id": "0FF24EE3", "description": "æ¾ç¤ºä¸ä»»å¡é¨éé讯", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["66DE14E1"], "value": "2", "time": 1, "isClick": false }, { "id": "46B81E42", "description": "俯ç°è§è§ä¸æ¥çææ¥é¾è·¯", "type": "ä½ç½®", "view": { "lon": "113.584353", "lat": "28.702565", "height": "4506822.70", "heading": 356.2799638925634, "pitch": -86.80804153101452 }, "value": "1", "isClick": false }, { "id": "F898D72A", "description": "æ¾ç¤ºçº¢è²é讯线 ç¶ææ¥è¯¢", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["D70F3606"], "value": "2", "time": 2, "isClick": false }, { "id": "DBDC549D", "description": "éè红è²é讯线 ç¶ææ¥è¯¢", "actionType": "éè对象", "type": "æä½", "selectInfo": ["D70F3606"], "value": "1", "isClick": false }, { "id": "D8B7773E", "description": "æ¾ç¤ºä¼ è¾ä¸æ", "actionType": "æ¾ç¤ºå¯¹è±¡", "type": "æä½", "selectInfo": ["8FBFA692"], "value": "2", "time": 3, "isClick": false }, { "id": "06ECE52F", "description": "å ³éä¼ è¾ä¸æ", "actionType": "éè对象", "type": "æä½", "selectInfo": ["8FBFA692"], "value": "1", "isClick": false }, { "id": "B6D8F034", "description": "å ³éæææ¼ç¤ºèæ¬", "actionType": "éè对象", "type": "æä½", "selectInfo": [ "4FE10400", "D6D9C4BC", "D6D9C4BE", "D6D9C4BD", "BF993EEC", "4E80A73B", "11E65749", "61E74C87", "6BFF77A2", "6BFF77A6", "0A51CF71", "0043A493", "BFF675EC", "87D8926C", "AD66C2CA", "FF5557E9", "35ADD547", "9F07E807", "8D8D7789", "EB6B36B8", "511659D5", "66DE14E1", "8FBFA692", "7BA80DFE", "710A1A45", "8BE2C18A", "CEF22C36", "366033A3", "EF666AD4", "538C10DD", "D70F3606" ], "value": "1", "isClick": false } ], "checked": true, "rename": false } ], "rename": false, "expanded": true, "checked": false } ], "flyTo": [109.13174, 32.1948, 6718919.27, 354.1, -88.7], "mapStatus": { "rotateFlyTime": 30, "sunLight": false, "lightIntensity": 2, "lightColor": "#ffffff", "brightness": 1, "contrast": 1, "saturation": 1 } } { "name": "SmartEarth", "id": 1, "open": true, "children": [ { "id": "82A0C3DE", "name": "模åæ°æ®", "children": [] }, { "id": "82A0C3DF", "name": "WMSæå¡", "children": [] },{ "id": "82A0C3DA", "name": "TMSæå¡", "children": [] } ] } public/data/json/jb.json
¶Ô±ÈÐÂÎļþ ÎļþÌ«´ó public/data/json/ͼ²ãµ¼³ö.json
¶Ô±ÈÐÂÎļþ @@ -0,0 +1 @@ [{"id":"82A0C3DE","name":"模åæ°æ®","children":[]},{"id":"82A0C3DF","name":"WMSæå¡","children":[]},{"id":"82A0C3DA","name":"TMSæå¡","children":[]},{"id":"82A0C3DE","name":"模åæ°æ®","children":[]},{"id":"82A0C3DF","name":"WMSæå¡","children":[]},{"id":"82A0C3DA","name":"TMSæå¡","children":[]}] public/data/json/·½°¸µ¼³ö.json
¶Ô±ÈÐÂÎļþ @@ -0,0 +1 @@ [{"children":[{"name":"èç¹1","lon":"120.862482","lat":"44.778622","alt":"299999.999999","heading":360,"pitch":-90,"roll":0,"time":3,"flag":2,"id":1717573124886}],"id":1717573118242,"name":"æ¹æ¡1"}] src/assets/img/subject/itemBg.png
@@ -1,117 +1,129 @@ const menuData = { // 主èå menuData: [ { id: "layerManage", name: "å¾å±ç®¡ç", }, { id: "measure", name: "æµé", }, { id: "plot", name: "æ ç»", }, { id: "special", name: "ç¹æ", }, { id: "analyse", name: "åæ", }, { id: "history", name: "åå²å½±å对æ¯", }, { id: "dimensions", name: "äºä¸ç»´èå¨", }, ], //äºçº§èå-æµé measure: [ { id: "m1", name: "æ°´å¹³è·ç¦»", }, { id: "m2", name: "表é¢è·ç¦»", }, { id: "m3", name: "表é¢é¢ç§¯", }, { id: "m4", name: "å¹³é¢é¢ç§¯", }, { id: "m5", name: "æµ·æé«åº¦", }, { id: "m6", name: "åç´é«åº¦", }, ], //äºçº§èå-æ ç» plot: [ { id: "p1", name: "ç¢éæ ç»", }, { id: "militaryPlot", name: "åäºæ ç»", }, { id: "p3", name: "模åæ·»å ", }, ], //äºçº§èå-ç¹æ special: [ { id: "s1", name: "ç«ç°", }, { id: "s2", name: "å·æ³", }, ], analyse: [ { id: "a1", name: "åæ¹é计ç®", }, { id: "a2", name: "洪水淹没åæ", }, { id: "a3", name: "洪水淹没åæ", }, { id: "a4", name: "çé«çº¿åæ", }, { id: "a5", name: "å¡åº¦åæ", }, { id: "a6", name: "å°å½¢åé¢åæ", }, { id: "a7", name: "å°å½¢å¼æ", }, ], }; export default menuData; const menuData = { // 主èå menuData: [ { id: "layerManage", name: "å¾å±ç®¡ç" }, { id: "s3", name: "æ¹æ¡æµè¯" }, { id: "s4", name: "åºå¾å½±å" } // { // id: "measure", // name: "æµé" // }, // { // id: "plot", // name: "æ ç»" // }, // { // id: "special", // name: "ç¹æ" // }, // { // id: "analyse", // name: "åæ" // }, // { // id: "history", // name: "åå²å½±å对æ¯" // }, // { // id: "dimensions", // name: "äºä¸ç»´èå¨" // } ], //äºçº§èå-æµé measure: [ { id: "m1", name: "æ°´å¹³è·ç¦»" }, { id: "m2", name: "表é¢è·ç¦»" }, { id: "m3", name: "表é¢é¢ç§¯" }, { id: "m4", name: "å¹³é¢é¢ç§¯" }, { id: "m5", name: "æµ·æé«åº¦" }, { id: "m6", name: "åç´é«åº¦" }, { id: "m7", name: "æ¸ é¤" } ], //äºçº§èå-æ ç» plot: [ { id: "p1", name: "ç¢éæ ç»" }, { id: "militaryPlot", name: "åäºæ ç»" }, { id: "p3", name: "模åæ·»å " } ], //äºçº§èå-ç¹æ special: [ { id: "s1", name: "ç«ç°" }, { id: "s2", name: "å·æ³" } ], analyse: [ { id: "a1", name: "åæ¹é计ç®" }, { id: "a2", name: "洪水淹没åæ" }, { id: "a3", name: "洪水淹没åæ" }, { id: "a4", name: "çé«çº¿åæ" }, { id: "a5", name: "å¡åº¦åæ" }, { id: "a6", name: "å°å½¢åé¢åæ" }, { id: "a7", name: "å°å½¢å¼æ" } ] }; export default menuData; src/assets/js/map/layerManage.js
@@ -1,288 +1,344 @@ const layerManage = { layerManage: [], setAddLayer(res) { switch (res.sourceType) { // arcgis å½±åå¾ case "arcgis": this.addArcGisLayer(res); break; //é«å¾·å°å¾ case "gdmap": this.addGaoLayer(res); break; //ç¢éå¾ case "SimpleGraphic": this.addSimpleGraphicLayer(res); break; // æµå 线 case "FlowField": this.addFlowFieldLayer(res); break; // gltf模å case "gltf": this.addGltfLayer(res); break; //天å°å¾ case "tdmap": this.addTdMapLayer(res); break; // è ¾è®¯å°å¾ case "txmap": this.addTxMapLayer(res); break; } }, addSimpleGraphicLayer(res) { switch (res.style.type) { case "label": this.addLabelSimpleGraphic(res); break; case "billboard": this.addBillboardSimpleGraphic(res); break; case "polyline": this.addPolylineSimpleGraphic(res); break; } }, setRemoveLayer(res) { for (var i = 0; i < this.layerManage.length; i++) { var obj = this.layerManage[i]; if (obj.id === res.id) { switch (obj.type) { case "label": case "billboard": case "polyline": case "txmap": case "tdmap": case "arcgis": case "gdmap": obj.layer.removeFromMap(); break; case "FlowField": obj.layer.deleteObject(); break; case "gltf": earthCtrl.factory.removeModel(obj.layer); break; } this.layerManage.splice(i, 1); i--; } } }, addTdMapLayer(res) { var layer = earthCtrl.factory.createImageryLayer({ sourceType: "mapworld", url: res.urls, layers: "tdtBasicLayer", style: "default", format: "image/jpeg", maximumLevel: res.maximumLevel, layer: "", tileMatrixSetID: "", }); this.layerManage.push({ id: res.id, layer: layer, type: "tdmap", }); }, addTxMapLayer(res) { var layer = earthCtrl.factory.createImageryLayer({ sourceType: "qqmap", url: "https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229", customTags: { sx: function (imageryProvider, x, y, level) { return x >> 4; }, sy: function (imageryProvider, x, y, level) { return ((1 << level) - y) >> 4; }, }, tilingScheme: earthCtrl.core.getOffsetTilingScheme(), // åç§»çº æ£ }); this.layerManage.push({ id: res.id, layer: layer, type: "txmap", }); }, addGltfLayer(res) { var layer = earthCtrl.factory.createModel({ name: res.name, url: res.urls, lon: res.lon, lat: res.lat, alt: res.height, heading: res.heading, scale: res.scale, minimumPixelSize: 100, id: { name: "gltf", }, }); this.layerManage.push({ id: res.id, layer: layer, type: "gltf", }); }, addPolylineSimpleGraphic(res) { var style = res.style; var std = []; for (var i in style.positions) { var position = this.getCartographic(style.positions[i]); std.push(position.lon, position.lat, position.alt); } const positions = SmartEarth.Cesium.Cartesian3.fromDegreesArrayHeights(std); const layer = earthCtrl.factory.createPolyline({ name: style.name, lineColor: new SmartEarth.Cesium.PolylineGlowMaterialProperty({ //æ线åå æè´¨ color: SmartEarth.Cesium.Color.fromCssColorString(style.color), //é¢è² }), lineWidth: style.width, isDepthTest: false, clampToGround: false, positions: positions, }); this.layerManage.push({ id: res.id, layer: layer, type: "polyline", }); }, addArcGisLayer(res) { var layer = earthCtrl.factory.createImageryLayer({ sourceType: "arcgis", url: res.urls, enablePickFeatures: false, }); this.layerManage.push({ id: res.id, layer: layer, type: "arcgis", }); }, addFlowFieldLayer(res) { var style = res.style; var std = []; for (var i in res.positions) { var position = this.getCartographic(res.positions[i]); std.push([position.lon, position.lat]); } var obj = { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "LineString", coordinates: std, }, properties: { osm_id: "66023824", code: 5115, fclass: "tertiary", name: "", ref: "", oneway: "B", maxspeed: 0, layer: 0, bridge: "F", tunnel: "F", }, }, ], }; let layer = earthCtrl.factory.createPathLayer({ url: obj, color: "#0033FF", //线çé¢è² width: style.width, //线ç宽度 pointColor: "#FFFFFF", //移å¨ç¹çé¢è² speed: 0.5, }); this.layerManage.push({ id: res.id, layer: layer, type: "FlowField", }); }, addGaoLayer(res) { var layer = earthCtrl.factory.createImageryLayer({ sourceType: "gdmap", url: res.urls, minimumLevel: 3, maximumLevel: 18, }); this.layerManage.push({ id: res.id, layer: layer, type: "gdmap", }); }, addBillboardSimpleGraphic(res) { var style = res.style; var position = this.getCartographic(style.position); const layer = earthCtrl.factory.createBillboard({ name: "billboard", id: style.id, image: style.image, width: style.width, height: style.height, lon: position.lon, lat: position.lat, alt: position.alt, scale: style.scale, distanceDisplayCondition: style.distanceDisplayCondition, }); this.layerManage.push({ id: res.id, layer: layer, type: "billboard", }); }, getCartographic(res) { var cartographic = Cesium.Cartographic.fromCartesian(res); return { lon: Cesium.Math.toDegrees(cartographic.longitude), lat: Cesium.Math.toDegrees(cartographic.latitude), alt: cartographic.height, }; }, addLabelSimpleGraphic(res) { var style = res.style; var position = this.getCartographic(style.position); var layer = earthCtrl.factory.createLabel({ name: style.name, id: style.id, text: style.text, font: style.font, outlineWidth: 2, fillColor: Cesium.Color.fromCssColorString(style.fillColor), lon: position.lon, lat: position.lat, alt: position.alt, showBackground: true, backgroundColor: Cesium.Color.fromCssColorString(style.backgroundColor), scale: style.scale, distanceDisplayCondition: style.distanceDisplayCondition, clampToGround: true, }); this.layerManage.push({ id: res.id, layer: layer, type: "label", }); }, }; export default layerManage; const layerManage = { layerManage: [], setAddLayer(res) { switch (res.sourceType) { // arcgis å½±åå¾ case "arcgis": this.addArcGisLayer(res); break; //é«å¾·å°å¾ case "gdmap": this.addGaoLayer(res); break; //ç¢éå¾ case "SimpleGraphic": this.addSimpleGraphicLayer(res); break; // æµå 线 case "FlowField": this.addFlowFieldLayer(res); break; // gltf模å case "gltf": this.addGltfLayer(res); break; // gltf模å case "3DTiles": this.add3DTilesLayer(res); break; //天å°å¾ case "tdmap": this.addTdMapLayer(res); break; // è ¾è®¯å°å¾ case "txmap": this.addTxMapLayer(res); break; // è ¾è®¯å°å¾ case "WMS": this.addWMSLayer(res); break; // è ¾è®¯å°å¾ case "TMS": this.addTMSLayer(res); break; } }, addSimpleGraphicLayer(res) { switch (res.style.type) { case "label": this.addLabelSimpleGraphic(res); break; case "billboard": this.addBillboardSimpleGraphic(res); break; case "polyline": this.addPolylineSimpleGraphic(res); break; } }, setRemoveLayer(res) { for (var i = 0; i < this.layerManage.length; i++) { var obj = this.layerManage[i]; if (obj.id === res.id) { switch (obj.type) { case "WMS": case "TMS": case "label": case "billboard": case "polyline": case "txmap": case "tdmap": case "arcgis": case "gdmap": obj.layer.removeFromMap(); break; case "FlowField": obj.layer.deleteObject(); break; case "gltf": earthCtrl.factory.removeModel(obj.layer); break; case "3DTiles": obj.layer.deleteObject(); break; } this.layerManage.splice(i, 1); i--; } } }, addTMSLayer(res) { const layer = earthCtrl.factory.createImageryLayer({ sourceType: "tms", url: res.url }); this.layerManage.push({ id: res.id, layer: layer, type: "TMS" }); }, addWMSLayer(res) { const layer = earthCtrl.factory.createImageryLayer({ sourceType: "wms", url: res.url, layers: "", parameters: { format: "image/png", srs: "EPSG:4326", version: 1.3 } }); this.layerManage.push({ id: res.id, layer: layer, type: "WMS" }); }, addTdMapLayer(res) { var layer = earthCtrl.factory.createImageryLayer({ sourceType: "mapworld", url: res.urls, layers: "tdtBasicLayer", style: "default", format: "image/jpeg", maximumLevel: res.maximumLevel, layer: "", tileMatrixSetID: "" }); this.layerManage.push({ id: res.id, layer: layer, type: "tdmap" }); }, addTxMapLayer(res) { var layer = earthCtrl.factory.createImageryLayer({ sourceType: "qqmap", url: "https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229", customTags: { sx: function (imageryProvider, x, y, level) { return x >> 4; }, sy: function (imageryProvider, x, y, level) { return ((1 << level) - y) >> 4; } }, tilingScheme: earthCtrl.core.getOffsetTilingScheme() // åç§»çº æ£ }); this.layerManage.push({ id: res.id, layer: layer, type: "txmap" }); }, add3DTilesLayer(res) { const layer = earthCtrl.factory.create3DTilesets({ url: res.url }); earthCtrl.camera.flyToObj(layer); this.layerManage.push({ id: res.id, layer: layer, type: "3DTiles" }); }, addGltfLayer(res) { var layer = earthCtrl.factory.createModel({ name: res.name, url: res.urls, lon: res.lon, lat: res.lat, alt: res.height, heading: res.heading, scale: res.scale, minimumPixelSize: 100, id: { name: "gltf" } }); this.layerManage.push({ id: res.id, layer: layer, type: "gltf" }); }, addPolylineSimpleGraphic(res) { var style = res.style; var std = []; for (var i in style.positions) { var position = this.getCartographic(style.positions[i]); std.push(position.lon, position.lat, position.alt); } const positions = SmartEarth.Cesium.Cartesian3.fromDegreesArrayHeights(std); const layer = earthCtrl.factory.createPolyline({ name: style.name, lineColor: new SmartEarth.Cesium.PolylineGlowMaterialProperty({ //æ线åå æè´¨ color: SmartEarth.Cesium.Color.fromCssColorString(style.color) //é¢è² }), lineWidth: style.width, isDepthTest: false, clampToGround: false, positions: positions }); this.layerManage.push({ id: res.id, layer: layer, type: "polyline" }); }, addArcGisLayer(res) { var layer = earthCtrl.factory.createImageryLayer({ sourceType: "arcgis", url: res.urls, enablePickFeatures: false }); this.layerManage.push({ id: res.id, layer: layer, type: "arcgis" }); }, addFlowFieldLayer(res) { var style = res.style; var std = []; for (var i in res.positions) { var position = this.getCartographic(res.positions[i]); std.push([position.lon, position.lat]); } var obj = { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "LineString", coordinates: std }, properties: { osm_id: "66023824", code: 5115, fclass: "tertiary", name: "", ref: "", oneway: "B", maxspeed: 0, layer: 0, bridge: "F", tunnel: "F" } } ] }; let layer = earthCtrl.factory.createPathLayer({ url: obj, color: "#0033FF", //线çé¢è² width: style.width, //线ç宽度 pointColor: "#FFFFFF", //移å¨ç¹çé¢è² speed: 0.5 }); this.layerManage.push({ id: res.id, layer: layer, type: "FlowField" }); }, addGaoLayer(res) { var layer = earthCtrl.factory.createImageryLayer({ sourceType: "gdmap", url: res.urls, minimumLevel: 3, maximumLevel: 18 }); this.layerManage.push({ id: res.id, layer: layer, type: "gdmap" }); }, addBillboardSimpleGraphic(res) { var style = res.style; var position = this.getCartographic(style.position); const layer = earthCtrl.factory.createBillboard({ name: "billboard", id: style.id, image: style.image, width: style.width, height: style.height, lon: position.lon, lat: position.lat, alt: position.alt, scale: style.scale, distanceDisplayCondition: style.distanceDisplayCondition }); this.layerManage.push({ id: res.id, layer: layer, type: "billboard" }); }, getCartographic(res) { var cartographic = Cesium.Cartographic.fromCartesian(res); return { lon: Cesium.Math.toDegrees(cartographic.longitude), lat: Cesium.Math.toDegrees(cartographic.latitude), alt: cartographic.height }; }, addLabelSimpleGraphic(res) { var style = res.style; var position = this.getCartographic(style.position); var layer = earthCtrl.factory.createLabel({ name: style.name, id: style.id, text: style.text, font: style.font, outlineWidth: 2, fillColor: Cesium.Color.fromCssColorString(style.fillColor), lon: position.lon, lat: position.lat, alt: position.alt, showBackground: true, backgroundColor: Cesium.Color.fromCssColorString(style.backgroundColor), scale: style.scale, distanceDisplayCondition: style.distanceDisplayCondition, clampToGround: true }); this.layerManage.push({ id: res.id, layer: layer, type: "label" }); } }; export default layerManage; src/assets/js/map/menuManager.js
@@ -1,30 +1,83 @@ import store from "@/store"; const menuManager = { meuFLag: null, init(res) { this.menuFlag = null; switch (res.id) { // å¾å±ç®¡ç case "layerManage": store.state.layerFlag = res.id; break; // åå²å½±åå¯¹æ¯ case "history": break; // äºä¸ç»´èå¨ case "dimensions": break; // äºä¸ç»´èå¨ case "militaryPlot": store.state.layerFlag = res.id; this.menuFlag = res.id; break; default: this.menuFlag = res.id; break; } return this.menuFlag; }, }; export default menuManager; import store from "@/store"; import { fa } from "element-plus/es/locales.mjs"; const menuManager = { meuFLag: null, showImageLayers: true, colorAll: { point: SmartEarth.Cesium.Color.fromCssColorString("#ff0000"), polyline: SmartEarth.Cesium.Color.fromCssColorString("#ffff0050"), polygon: SmartEarth.Cesium.Color.fromCssColorString("#ffff0050") }, init(res) { this.menuFlag = null; switch (res.id) { // å¾å±ç®¡ç case "layerManage": store.state.layerFlag = res.id; break; //æ°´å¹³è·ç¦» case "m1": earthCtrl.measure.horizontalDistance(this.colorAll, (e) => {}); break; //表é¢è·ç¦» case "m2": earthCtrl.measure.clampLineDistance(this.colorAll, (e) => {}); break; //表é¢é¢ç§¯ case "m3": earthCtrl.measure.surfaceArea( { ...this.colorAll, tin: true, // æ¯å¦æ¾ç¤ºtinä¸è§ç½ onlyTerrain: false // æ¯å¦åªæµéç²¾ç»å°å½¢ }, (e) => {} ); break; //å¹³é¢é¢ç§¯ case "m4": earthCtrl.measure.planeArea(this.colorAll, (e) => {}); break; //æµ·æé«åº¦ case "m5": earthCtrl.measure.altitude(this.colorAll, (e) => {}); break; //åç´é«åº¦ case "m6": earthCtrl.measure.height(this.colorAll, (e) => {}); break; //æ¸ é¤ case "m7": earthCtrl.measure.clearResult(); break; // åå²å½±åå¯¹æ¯ case "history": break; // äºä¸ç»´èå¨ case "dimensions": store.state.dimensionsFlag = !store.state.dimensionsFlag; break; //åäºæ ç» case "militaryPlot": store.state.layerFlag = res.id; this.menuFlag = res.id; break; //é£è¡æ¹æ¡ case "s3": store.state.setFlyPlanFlag = !store.state.setFlyPlanFlag; break; case "s4": this.showImageLayers = !this.showImageLayers; window.Viewer.imageryLayers.get(0).show = this.showImageLayers; window.Viewer.imageryLayers.get(1).show = this.showImageLayers; break; default: break; } return this.menuFlag; } }; export default menuManager; src/assets/js/mapClick.js
@@ -1,51 +1,59 @@ import store from "@/store"; import configTool from "@/assets/js/tool/configTool"; const mapClick = { Init() { this.addLeftClick(); this.addRightClick(); addEventListener("mouseup", (event) => { store.state.rightMeuFlag = false; }); }, addLeftClick() { var that = this; let handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); handler.setInputAction(function (event) { console.log("æ¨çé¼ æ å·¦å»äºä¸ä¸"); store.state.rightMeuFlag = false; let pick = Viewer.scene.pick(event.position); if (Cesium.defined(pick)) { if (pick.id && pick.id._properties) { that.showProperties(pick.id._properties); } } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, addRightClick() { var that = this; let handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); handler.setInputAction(function (event) { console.log("æ¨çé¼ æ å³å»äºä¸ä¸"); // å¼å¯å³ä¾§èå that.showRightMenu(event); // å³å»è·åç»çº¬åº¦ that.setRIghtPosition(event); }, Cesium.ScreenSpaceEventType.RIGHT_CLICK); }, showProperties(res) { store.state.showProperties = res; }, setRIghtPosition(res) { var coodinate = configTool.getViewerPosition(res); store.state.rightCoodinate = coodinate; }, showRightMenu(res) { document.getElementsByClassName("rightMenuBox")[0].style.left = res.position.x + "px"; document.getElementsByClassName("rightMenuBox")[0].style.top = res.position.y + "px"; store.state.rightMeuFlag = true; }, }; export default mapClick; import store from "@/store"; import configTool from "@/assets/js/tool/configTool"; const mapClick = { Init() { this.addLeftClick(); this.addRightClick(); addEventListener("mouseup", (event) => { store.state.rightMeuFlag = false; }); }, addLeftClick() { var that = this; let handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); handler.setInputAction(function (event) { console.log("æ¨çé¼ æ å·¦å»äºä¸ä¸"); store.state.rightMeuFlag = false; let pick = Viewer.scene.pick(event.position); if (Cesium.defined(pick)) { if (pick.id && pick.id._properties) { that.showProperties(pick.id._properties); } } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, addRightClick() { var that = this; let handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); handler.setInputAction(function (event) { console.log("æ¨çé¼ æ å³å»äºä¸ä¸"); store.state.rightMeuFlag = false; let pick = Viewer.scene.pick(event.position); if (Cesium.defined(pick)) { console.log(123) }else{ // å¼å¯å³ä¾§èå that.showRightMenu(event); // å³å»è·åç»çº¬åº¦ that.setRIghtPosition(event); } }, Cesium.ScreenSpaceEventType.RIGHT_CLICK); }, showProperties(res) { store.state.showProperties = res; }, setRIghtPosition(res) { var coodinate = configTool.getViewerPosition(res); store.state.rightCoodinate = coodinate; }, showRightMenu(res) { document.getElementsByClassName("rightMenuBox")[0].style.left = res.position.x + "px"; document.getElementsByClassName("rightMenuBox")[0].style.top = res.position.y + "px"; store.state.rightMeuFlag = true; }, }; export default mapClick; src/assets/js/mapView.js
@@ -1,27 +1,46 @@ import mapClick from "./mapClick"; import store from "@/store"; import configTool from "@/assets/js/tool/configTool"; const mapView = { init() { window.earthCtrl = new SmartEarth.EarthCtrl("cesiumContainer", { printLog: false, }); window.Viewer = earthCtrl._Viewer; window.Cesium = SmartEarth.Cesium; earthCtrl.camera.stop(); //åæ¶é£è¡ç¶æ // å ³é深度æ£æµ Viewer.scene.globe.depthTestAgainstTerrain = false; // é£è¡å®ä½ configTool.setMapFly({ lon: 120.862482, lat: 44.7786221, alt: 300000, heading: 6.283185307179586, pitch: -1.5707963267948966, roll: 0, }); // 120.923461, 44.232539 mapClick.Init(); }, }; export default mapView; import mapClick from "./mapClick"; import store from "@/store"; import configTool from "@/assets/js/tool/configTool"; import mapPlan from "./tool/mapPlan"; const mapView = { init() { window.earthCtrl = new SmartEarth.EarthCtrl("cesiumContainer", { // printLog: false }); window.Viewer = earthCtrl._Viewer; window.Cesium = SmartEarth.Cesium; earthCtrl.camera.stop(); //åæ¶é£è¡ç¶æ // å ³é深度æ£æµ Viewer.scene.globe.depthTestAgainstTerrain = false; window.widget = Viewer.widget; earthCtrl.showFPS = true; // é£è¡å®ä½ // configTool.setMapFly({ // lon: 120.862482, // lat: 44.7786221, // alt: 300000, // heading: 6.283185307179586, // pitch: -1.5707963267948966, // roll: 0 // }); try { Viewer.scene.postRender.addEventListener(() => { }); } catch (e) { if (window.widget._showRenderLoopErrors) { var title = "å¼å§æ¶é´: " + mapPlan.startTime + "ç»ææ¶é´: " + mapPlan.formatDate(); window.widget.showErrorPanel(title, undefined, e); } } mapClick.Init(); } }; export default mapView; src/assets/js/tool/configTool.js
@@ -1,66 +1,89 @@ const configTool = { time: 5, setMapFly(res) { var that = this; const alt = res.alt == 0 ? 100 : res.alt; //设置åå§è§å¾ä½ç½® Viewer.camera.flyTo({ // fromDegrees()æ¹æ³ï¼å°ç»çº¬åº¦åé«ç¨è½¬æ¢ä¸ºä¸çåæ destination: Cesium.Cartesian3.fromDegrees(res.lon, res.lat, alt), orientation: { // æ¹å heading: res.heading, // è§è§ pitch: res.pitch, // å¾æè§åº¦ roll: res.roll, // 设置é£è¡æç»æ¶é´ï¼é»è®¤ä¼æ ¹æ®è·ç¦»æ¥è®¡ç® duration: that.time, }, }); }, getNewDateTime() { return new Date().getTime(); }, getEndDateTime() { return this.getNewDateTime() + 3600 * 2; }, //ç¹å»è·åç»çº¬åº¦ getViewerPosition(res) { const cartesain = Viewer.camera.pickEllipsoid(res.position); var cartographic = Cesium.Cartographic.fromCartesian(cartesain); return { lon: parseFloat(Cesium.Math.toDegrees(cartographic.longitude)).toFixed(6), lat: parseFloat(Cesium.Math.toDegrees(cartographic.latitude)).toFixed(6), alt: cartographic.height, heading: Viewer.scene.camera.heading, pitch: Viewer.scene.camera.pitch, roll: Viewer.scene.camera.roll, }; }, //è·åå½åè§è§ä¿¡æ¯ getViewerCamera() { var position = Viewer.scene.camera.positionCartographic; return { lon: Cesium.Math.toDegrees(position.longitude).toFixed(6), lat: Cesium.Math.toDegrees(position.latitude).toFixed(6), alt: position.height, heading: Viewer.scene.camera.heading, pitch: Viewer.scene.camera.pitch, roll: Viewer.scene.camera.roll, }; }, getTreeDataCheck(res, std) { for (var i in res) { if (res[i].children) { this.getTreeDataCheck(res[i].children, std); } else { if (res[i].checked) { std.push(res[i].id); } } } return std; }, }; export default configTool; const configTool = { time: 5, setMapFly(res) { var that = this; const alt = res.alt == 0 ? 100 : res.alt; //设置åå§è§å¾ä½ç½® Viewer.camera.flyTo({ // fromDegrees()æ¹æ³ï¼å°ç»çº¬åº¦åé«ç¨è½¬æ¢ä¸ºä¸çåæ destination: Cesium.Cartesian3.fromDegrees(res.lon, res.lat, alt), orientation: { // æ¹å heading: res.heading, // è§è§ pitch: res.pitch, // å¾æè§åº¦ roll: res.roll, // 设置é£è¡æç»æ¶é´ï¼é»è®¤ä¼æ ¹æ®è·ç¦»æ¥è®¡ç® duration: that.time } }); }, getNewDateTime() { return new Date().getTime(); }, getEndDateTime() { return this.getNewDateTime() + 3600 * 2; }, //ç¹å»è·åç»çº¬åº¦ getViewerPosition(res) { const cartesain = Viewer.camera.pickEllipsoid(res.position); var cartographic = Cesium.Cartographic.fromCartesian(cartesain); return { lon: parseFloat(Cesium.Math.toDegrees(cartographic.longitude)).toFixed(6), lat: parseFloat(Cesium.Math.toDegrees(cartographic.latitude)).toFixed(6), alt: cartographic.height, heading: Viewer.scene.camera.heading, pitch: Viewer.scene.camera.pitch, roll: Viewer.scene.camera.roll }; }, //è·åå½åè§è§ä¿¡æ¯ getViewerCamera() { var position = Viewer.scene.camera.positionCartographic; return { lon: Cesium.Math.toDegrees(position.longitude).toFixed(6), lat: Cesium.Math.toDegrees(position.latitude).toFixed(6), alt: position.height.toFixed(6), heading: Cesium.Math.toDegrees(Viewer.scene.camera.heading), pitch: Cesium.Math.toDegrees(Viewer.scene.camera.pitch), roll: Cesium.Math.toDegrees(Viewer.scene.camera.roll) }; }, getTreeDataCheck(res, std) { for (var i in res) { if (res[i].children) { this.getTreeDataCheck(res[i].children, std); } else { if (res[i].checked) { std.push(res[i].id); } } } return std; }, generateID() { return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace( /[xy]/g, function (c) { var r = (Math.random() * 16) | 0, v = c === "x" ? r : (r & 0x3) | 0x8; return v.toString(16); } ); }, saveToJson(data, res) { let content = JSON.stringify(data); let blob = new Blob([content], { type: "" }); var reader = new FileReader(); reader.onloadend = () => { let url = reader.result; let triggerDownload = document.createElement("a"); triggerDownload.download = (res) + ".json"; triggerDownload.href = url; triggerDownload.click(); }; reader.readAsDataURL(blob); } }; export default configTool; src/assets/js/tool/mapPlan.js
¶Ô±ÈÐÂÎļþ @@ -0,0 +1,91 @@ const mapPlan = { planListData: null, planStart: false, planIndex: null, planStopTime: null, planTimeOut: null, startTime: null, stopTime: null, Init(res) { if (!res.children || res.children == 0) return; if (this.planStart) { this.closed(); } this.planIndex = 0; this.planListData = res.children; this.planStart = true; this.setPlanFlyStart(); this.startTime = this.formatDate(); }, closed() { this.planStart = false; if (this.planTimeOut) { clearTimeout(this.planTimeOut); this.planTimeOut = null; } this.planIndex = 0; this.planListData = null; this.stopTime = this.formatDate(); console.log("å¼å§æ¶é´: " + this.startTime + "ç»ææ¶é´: " + this.stopTime); }, setPlanFlyStart() { const obj = this.planListData[this.planIndex]; this.planStopTime = obj.time; if (this.planTimeOut) { clearTimeout(this.planTimeOut); this.planTimeOut = null; } const that = this; try { earthCtrl.camera.flyTo( obj.lon, obj.lat, obj.alt, obj.height, obj.pitch, obj.roll, null, () => { this.setPlanFlyNext(); } ); } catch (e) { if (window.widget._showRenderLoopErrors) { var title = "å¼å§æ¶é´: " + this.startTime + "ç»ææ¶é´: " + this.formatDate(); window.widget.showErrorPanel(title, undefined, e); } } }, setPlanFlyNext() { this.planIndex++; const time = this.planStopTime * 1000; this.planIndex = this.planIndex == this.planListData.length ? 0 : this.planIndex; if (this.planStart == true) { var that = this; this.planTimeOut = setTimeout(() => { that.setPlanFlyStart(); }, time); } }, formatDate(time) { //æ¶é´æ³è½¬æ¥æ let date = new Date(); let y = date.getFullYear(); let MM = date.getMonth() + 1; MM = MM < 10 ? "0" + MM : MM; let d = date.getDate(); d = d < 10 ? "0" + d : d; let h = date.getHours(); h = h < 10 ? "0" + h : h; let m = date.getMinutes(); m = m < 10 ? "0" + m : m; let s = date.getSeconds(); s = s < 10 ? "0" + s : s; return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s; } }; export default mapPlan; src/assets/js/tool/palyTools.js
@@ -1,87 +1,87 @@ import configTool from "@/assets/js/tool/configTool"; import store from "@/store"; const palyTools = { playIndex: 0, isPlay: false, data: null, time: null, depthTestAgainstTerrain: null, Init(res) { if (res.sourceType != "demoAnimation") return; this.data = res.animationDatas; this.playIndex = 0; this.isPlay = true; this.playStart(); this.depthTestAgainstTerrain = Viewer.scene.globe.depthTestAgainstTerrain; if (this.depthTestAgainstTerrain) { Viewer.scene.globe.depthTestAgainstTerrain = false; } }, stop() { clearTimeout(this.time); this.time = null; this.playIndex = 0; this.isPlay = false; Viewer.scene.globe.depthTestAgainstTerrain = this.depthTestAgainstTerrain; this.depthTestAgainstTerrain = null; }, playStart() { if (this.playIndex > this.data.length - 1) { this.stop(); return; } else if (!this.isPlay) { return; } let thisPlay = this.data[this.playIndex]; if (thisPlay.type === "ä½ç½®") { let position = thisPlay.view; Viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees( position.lon, position.lat, position.height ), orientation: { heading: Cesium.Math.toRadians(position.heading), pitch: Cesium.Math.toRadians(position.pitch), roll: 0, }, }); } else if (thisPlay.type === "æä½") { let show; if (thisPlay.actionType === "æ¾ç¤ºå¯¹è±¡") { show = true; } else if (thisPlay.actionType === "éè对象") { show = false; } store.state.setAnimation = { info: thisPlay.selectInfo, show: show, }; } let time = 0; if (thisPlay.type === "ä½ç½®") { time = 3; } if (thisPlay.time) { this.timeOut(() => { // å®æ¶ this.playIndex++; this.playStart(); }, thisPlay.time + time); } else { this.timeOut(() => { // å®æ¶ this.playIndex++; this.playStart(); }, time); } }, timeOut(callback, time) { clearTimeout(this.time); this.time = setTimeout(callback, time * 1000); }, }; export default palyTools; import configTool from "@/assets/js/tool/configTool"; import store from "@/store"; const palyTools = { playIndex: 0, isPlay: false, data: null, time: null, depthTestAgainstTerrain: null, Init(res) { if (res.sourceType != "demoAnimation") return; this.data = res.animationDatas; this.playIndex = 0; this.isPlay = true; this.playStart(); this.depthTestAgainstTerrain = Viewer.scene.globe.depthTestAgainstTerrain; if (this.depthTestAgainstTerrain) { Viewer.scene.globe.depthTestAgainstTerrain = false; } }, stop() { clearTimeout(this.time); this.time = null; this.playIndex = 0; this.isPlay = false; Viewer.scene.globe.depthTestAgainstTerrain = this.depthTestAgainstTerrain; this.depthTestAgainstTerrain = null; }, playStart() { if (this.playIndex > this.data.length - 1) { this.stop(); return; } else if (!this.isPlay) { return; } let thisPlay = this.data[this.playIndex]; if (thisPlay.type === "ä½ç½®") { let position = thisPlay.view; Viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees( position.lon, position.lat, position.height ), orientation: { heading: Cesium.Math.toRadians(position.heading), pitch: Cesium.Math.toRadians(position.pitch), roll: 0, }, }); } else if (thisPlay.type === "æä½") { let show; if (thisPlay.actionType === "æ¾ç¤ºå¯¹è±¡") { show = true; } else if (thisPlay.actionType === "éè对象") { show = false; } store.state.setAnimation = { info: thisPlay.selectInfo, show: show, }; } let time = 0; if (thisPlay.type === "ä½ç½®") { time = 3; } if (thisPlay.time) { this.timeOut(() => { // å®æ¶ this.playIndex++; this.playStart(); }, thisPlay.time + time); } else { this.timeOut(() => { // å®æ¶ this.playIndex++; this.playStart(); }, time); } }, timeOut(callback, time) { clearTimeout(this.time); this.time = setTimeout(callback, time * 1000); }, }; export default palyTools; src/components/map/flyPlan.vue
¶Ô±ÈÐÂÎļþ @@ -0,0 +1,343 @@ <template> <div v-drag class="flyBox"> <div class="layerTitle"> <div class="tileLeft"> <div class="titleLable">æ¹æ¡æµè¯</div> </div> <div class="set"> <div @click="setAddManagerFile()" class="titleImg" style="margin-right: 10px" title="å¯¼å ¥" > <el-icon :size="20"> <FolderOpened /> </el-icon> </div> <div @click="setoutManagerFile()" class="titleImg" style="margin-right: 10px" title="导åº" > <el-icon :size="20"> <Download /> </el-icon> </div> <div @click="setAddManagerLayer()" class="titleImg" style="margin-right: 10px" title="æ·»å " > <el-icon :size="20"> <Plus /> </el-icon> </div> <div class="titleImg" @click="store.state.setFlyPlanFlag = false" title="å ³é" > <el-icon :size="20"> <Close /> </el-icon> </div> </div> </div> <div class="layerContent"> <div class="planMessge"></div> <div class="planTree"> <el-tree :data="treeData" :props="defaultProps"> <template #default="{ node, data }"> <span class="custom-tree-node"> <div @dblclick="flyTo(data)" style="display: flex; margin: 1px"> <div>{{ node.label }}</div> <div v-show="data.children" style="display: flex; align-items: center" > <a @click="setAddManagerLayer(data)"> <el-icon style="margin-left: 10px"><Plus /> </el-icon ></a> <a @click="seVideoPlay(data)"> <el-icon style="margin-left: 10px"><VideoPlay /> </el-icon ></a> <a @click="seVideoStop(data)"> <el-icon style="margin-left: 10px"><Close /> </el-icon ></a> </div> <div v-show="data.planType == 2" style="display: flex; align-items: center" > <a @click="setEditData(data)"> <el-icon style="margin-left: 10px"><Edit /> </el-icon ></a> </div> </div> </span> </template> </el-tree> </div> </div> </div> </template> <script lang="ts" setup> import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue"; import { ArrowRight, ArrowLeft, Plus, CloseBold, VideoPause, VideoPlay, Delete, Close, Upload, Download, FolderOpened, Edit } from "@element-plus/icons-vue"; import configTool from "../../assets/js/tool/configTool"; import { useStore } from "vuex"; import mapPlan from "./../../assets/js/tool/mapPlan.js"; import palyTools from "../../assets/js/tool/palyTools"; import { jsx } from "vue/jsx-runtime"; const store = useStore(); interface Tree { label: string; children?: Tree[]; } const defaultProps = { children: "children", label: "name" }; const checkData = ref(null); const treeData = ref([]); const setAddManagerLayer = (res) => { checkData.value = null; if (res) { store.state.setAddEntityList = { flag: true, title: "èç¹æ·»å ", type: 2 }; checkData.value = res; } else { store.state.setAddEntityList = { flag: true, title: "æ¹æ¡æ·»å ", type: 2 }; } }; const setAddManagerFile = () => { store.state.setAddEntityList = { flag: true, title: "æ°æ®å¯¼å ¥", type: 3 }; }; const setoutManagerFile = () => { configTool.saveToJson(treeData.value, "æ¹æ¡å¯¼åº"); }; const setEditData = (res) => { const obj = { ...res }; console.log(obj); store.state.setAddEntityList = { flag: true, title: "èç¹ä¿®æ¹", type: 2, editData: obj }; }; const flyTo = (res) => { if (res.children) return; earthCtrl.camera.flyTo( res.lon, res.lat, res.alt, res.height, res.pitch, res.roll, null, () => {} ); }; const seVideoPlay = (res) => { mapPlan.Init(res); }; const seVideoStop = () => { mapPlan.closed(); }; const addEntityData = (val) => { const id = configTool.getEndDateTime(); if (val.flag == 1) { treeData.value.push({ children: [], id: id, name: val.name, planType: 1 }); } else if (val.flag == 2) { if (val.pid) { const valDatta = JSON.parse(JSON.stringify(treeData.value)); const objData = valDatta.filter((rs) => { if (rs.id == val.pid) { if (rs.children) { const obj = rs.children.filter((os) => { if (os.id == val.id) { os.name = val.name; os.lon = val.lon; os.lat = val.lat; os.alt = val.alt; os.heading = val.heading; os.pitch = val.pitch; os.roll = val.roll; os.time = val.time; } return os; }); rs.children = obj; } } return rs; }); if (objData) { treeData.value = []; treeData.value = objData; } // for (var i in resData) { // if (resData[i].id === val.pid) { // console.log(resData[i].children); // if (resData[i].children) { // for (var j in resData[i].children) { // if (resData[i].children[j].id == val.id) { // resData[i].children[j] = val; // } // } // } // } // } // console.log(resData); // treeData.value= resData; // treeData.value.forEach((element) => { // if (element.id == val.id) { // element.children.forEach(obj =>{ // if(obj.id === val.id){ // obj= val; // } // }) // } // }); } else { treeData.value.forEach((element) => { if (element.id == checkData.value.id) { val.id = id; val.pid = element.id; val.type = "ä½ç½®"; (val.planType = 2), element.children.push(val); } }); } } else if (val.flag == 3) { const object = val.value; for (var i in object) { treeData.value.push(object[i]); } } }; defineExpose({ addEntityData }); </script> <style lang="less" scoped> .flyBox { width: 300px; height: 600px; background: rgba(7, 8, 14, 0.8); box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); z-index: 41; top: 150px; right: 1%; position: absolute; display: flex; flex-direction: column; .layerTitle { width: calc(100% - 27px); height: 42px; background: #30bcff; box-shadow: 0 2px 3px rgba(16, 133, 80, 0.5); border-bottom: 1px solid #20bc74; display: flex; justify-content: space-between; padding-left: 7px; padding-right: 20px; color: white; .tileLeft { height: 100%; display: flex; align-items: center; .titleLable { font-size: 18px; font-family: Source Han Sans CN; font-weight: 400; color: #ffffff; } } .titleImg { width: 20px; height: 100%; display: flex; align-items: center; color: #fff; } .set { cursor: pointer; display: flex; } } .layerContent { flex: 1; display: flex; flex-direction: column; .planMessge { :first-child { margin: 2% 0%; } margin-left: 40%; transform: translate(-30%, 0); } .planTree { flex: 1; justify-content: center; } } .el-tree { background: transparent; color: white; } /deep/.el-tree-node__content:hover { background: transparent !important; } /deep/ .el-tree-node:focus > .el-tree-node__content { background: transparent; } } </style> src/components/map/layerManager.vue
@@ -1,351 +1,415 @@ <template> <div v-drag class="layerBox"> <div class="layerTitle"> <div class="tileLeft"> <div @click="setCloseLayer" class="titleImg"> <ArrowLeft /> </div> <div class="titleLable">å¾å±ç®¡ç</div> </div> <div class="titleImg set" @click="store.state.layerFlag = null" title="å ³é"> <CloseBold /> </div> </div> <div class="layerContent"> <el-tree node-key="id" :props="props" :highlight-current="false" :data="treeData" show-checkbox :expand-on-click-node="false" @check-change="handleCheckChange" ref="treeRef"> <template #default="{ node, data }"> <span class="custom-tree-node"> <span class="label">{{ node.label }}</span> <span class="button" v-if="data.sourceType == 'demoAnimation'"> <el-dropdown trigger="click"> <span class="el-dropdown-link"> <el-icon style="color: wheat" class="el-icon--right"> <MoreFilled /> </el-icon> </span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item @click="playNode(data)">ææ¾</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </span> </span> </template> </el-tree> </div> </div> </template> <script lang="ts" setup> import { ref, onMounted, nextTick, watch } from "vue"; import { ElTree } from "element-plus"; interface Tree { id: number; label: string; children?: Tree[]; } const treeRef = ref<InstanceType<typeof ElTree>>(); import { MoreFilled, Setting, CloseBold } from "@element-plus/icons-vue"; import palyTools from "@/assets/js/tool/palyTools"; import configTool from "@/assets/js/tool/configTool"; import layerManager from "@/assets/js/map/layerManage"; import axios from "axios"; import store from "@/store"; const treeData = ref([]); const props = { label: "name", children: "children", }; const handleCheckChange = (data, check, indeterminate) => { if (data.children) return; if (data._children) { for (var i in data._children) { var layer = data._children[i]; if (check) { layerManager.setAddLayer(layer); } else { layerManager.setRemoveLayer(layer); } } } else { if (check) { layerManager.setAddLayer(data); } else { layerManager.setRemoveLayer(data); } } }; const playNode = (res) => { palyTools.Init(res); }; const setTreeDataStart = (res) => { treeData.value = res.children; var obj = configTool.getTreeDataCheck(res.children, []); nextTick(() => { treeRef.value!.setCheckedKeys(obj, false); setLayerStart(); }); }; const setLayerStart = () => { var obj = treeRef.value!.getCheckedNodes(false, false); setAddLayer(obj); }; const setAddLayer = (res) => { for (var i in res) { if (res[i]._children) { setAddLayer(res[i]._children); } else { layerManager.setAddLayer(res[i]); } } }; const setTreeStart = () => { var url = config.jsonUrl + "SmartEarth.json"; axios.get(url).then((res) => { setTreeDataStart(res.data); }); }; const setAnimation = (res) => { var info = res.info; for (var i in info) { var obj = treeRef.value!.getNode(info[i]); if (res.show) { layerManager.setAddLayer(obj.data); } else { layerManager.setRemoveLayer(obj.data); } } var valCheck = treeRef.value!.getCheckedKeys(); for (var i in info) { if (res.show) { valCheck.push(info[i]); } else { if (valCheck.indexOf(info[i]) > -1) { valCheck.splice(valCheck.indexOf(info[i]), 1); } } } nextTick(() => { treeRef.value!.setCheckedKeys(valCheck, false); store.state.setAnimation = false; }); }; onMounted(() => { setTreeStart(); }); watch( () => store.state.setAnimation, (newVal, oldVal) => { if (newVal) { setAnimation(newVal); } }, { immediate: true, deep: true } ); </script> <style lang="less" scoped> .layerBox { width: 300px; height: 600px; background: rgba(7, 8, 14, 0.8); box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); position: absolute; z-index: 41; top: 150px; right: 1%; .layerTitle { width: calc(100% - 27px); height: 42px; background: #30bcff; box-shadow: 0 2px 3px rgba(16, 133, 80, 0.5); border-bottom: 1px solid #20bc74; display: flex; justify-content: space-between; padding-left: 7px; padding-right: 20px; color: white; .tileLeft { height: 100%; display: flex; align-items: center; .titleLable { font-size: 18px; font-family: Source Han Sans CN; font-weight: 400; color: #ffffff; } } .titleImg { width: 20px; height: 100%; display: flex; align-items: center; color: #fff; } .set { cursor: pointer; } } .layerContent { height: 525px; padding: 0 8px; overflow: auto; overflow-y: auto; } .layerContent::-webkit-scrollbar { width: 8px; } .layerContent::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(35, 47, 42, 0.8); } .layerContent::-webkit-scrollbar-track { border-radius: 0; background: rgba(35, 47, 42, 0.8); } .el-tree { width: 100%; overflow-y: auto; } .layerContent .el-tree-node__content { overflow: hidden; } .layerContent .custom-tree-node { overflow: hidden; flex-shrink: 1; flex-grow: 1; display: flex; align-items: center; justify-content: space-between; font-size: 16px; padding-right: 8px; } .layerContent .custom-tree-node .label { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; } .layerContent .custom-tree-node .button { flex-grow: 0; flex-shrink: 0; } } .dropdown_box { position: relative; } /deep/.el-select-dropdown__item { font-size: 12px !important; } .el-tree { background: transparent; } /deep/ .el-tree-node { background: #0d131d; color: #ffffff; font-size: 20px; font-weight: 300; margin-top: 3px; padding: 8px; } /deep/ .el-tree-node:focus > .el-tree-node__content { background: transparent; } /deep/ .el-tree-node__content:hover { background: #0d131d; } /deep/ .el-tree-node__children { background: #1e2a3d; .el-tree-node { background: #1e2a3d; margin-top: 0; padding: 4px; } } /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background: rgba(104, 156, 255, 0.5) !important; } .highlight { background: rgba(104, 156, 255, 0.5) !important; } // .custom-tree-node { // flex: 1; // display: flex; // align-items: center; // justify-content: space-between; // font-size: 16px; // padding-right: 8px; // } .el-dropdown-menu { background: rgba(7, 8, 14, 0.8); box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); color: #fff; border: 0; /deep/ .el-dropdown-menu__item { color: #fff; } } /deep/ .el-dropdown-menu__item:not(.is-disabled):focus { background-color: rgba(104, 156, 255, 0.5); color: #fff; } </style> <style> .el-popper.is-light { border: 1px solid rgba(7, 8, 14, 0.8) !important; } .el-scrollbar { border: 0 !important; } </style> <template> <div v-drag class="layerBox"> <div class="layerTitle"> <div class="tileLeft"> <div @click="setCloseLayer" class="titleImg"> <ArrowLeft /> </div> <div class="titleLable">å¾å±ç®¡ç</div> </div> <div class="set"> <div @click="setAddManagerFile()" class="titleImg" style="margin-right: 10px" title="å¯¼å ¥" > <el-icon :size="20"> <FolderOpened /> </el-icon> </div> <div @click="setoutManagerFile()" class="titleImg" style="margin-right: 10px" title="导åº" > <el-icon :size="20"> <Download /> </el-icon> </div> <div @click="setAddManagerLayer" class="titleImg" style="margin-right: 10px" title="æ·»å " > <el-icon :size="20"> <Plus /> </el-icon> </div> <div class="titleImg" @click="store.state.layerFlag = null" title="å ³é" > <el-icon :size="20"> <Close /> </el-icon> </div> </div> </div> <div class="layerContent"> <el-tree node-key="id" :props="props" :highlight-current="false" :data="treeData" show-checkbox :expand-on-click-node="false" @check-change="handleCheckChange" ref="treeRef" class="stafftree" > </el-tree> </div> </div> </template> <script lang="ts" setup> import { ref, onMounted, nextTick, watch } from "vue"; import { ElTree } from "element-plus"; interface Tree { id: number; label: string; children?: Tree[]; } const treeRef = ref<InstanceType<typeof ElTree>>(); import { MoreFilled, Setting, Close, Plus, defineProps, FolderOpened, Download } from "@element-plus/icons-vue"; import palyTools from "@/assets/js/tool/palyTools"; import configTool from "@/assets/js/tool/configTool"; import layerManager from "@/assets/js/map/layerManage"; import axios from "axios"; import store from "@/store"; const treeData = ref([]); const props = { label: "name", children: "children" }; const setAddManagerLayer = () => { store.state.setAddEntityList = { flag: true, title: "å¾å±æ·»å ", type: 1 }; }; const setAddManagerFile = () => { store.state.setAddEntityList = { flag: true, title: "å¾å±å¯¼å ¥", type: 3 }; }; const setoutManagerFile = () => { configTool.saveToJson(treeData.value, "å¾å±å¯¼åº"); }; const handleCheckChange = (data, check, indeterminate) => { if (data.children) return; if (data._children) { for (var i in data._children) { var layer = data._children[i]; if (check) { layerManager.setAddLayer(layer); } else { layerManager.setRemoveLayer(layer); } } } else { if (check) { layerManager.setAddLayer(data); } else { layerManager.setRemoveLayer(data); } } }; const playNode = (res) => { palyTools.Init(res); }; const setTreeDataStart = (res) => { treeData.value = res.children; var obj = configTool.getTreeDataCheck(res.children, []); nextTick(() => { treeRef.value!.setCheckedKeys(obj, false); setLayerStart(); }); }; const setLayerStart = () => { var obj = treeRef.value!.getCheckedNodes(false, false); setAddLayer(obj); }; const setAddLayer = (res) => { for (var i in res) { if (res[i]._children) { setAddLayer(res[i]._children); } else { layerManager.setAddLayer(res[i]); } } }; const setTreeStart = () => { var url = config.jsonUrl + "SmartEarth.json"; axios.get(url).then((res) => { setTreeDataStart(res.data); }); }; const setAnimation = (res) => { var info = res.info; for (var i in info) { var obj = treeRef.value!.getNode(info[i]); if (res.show) { layerManager.setAddLayer(obj.data); } else { layerManager.setRemoveLayer(obj.data); } } var valCheck = treeRef.value!.getCheckedKeys(); for (var i in info) { if (res.show) { valCheck.push(info[i]); } else { if (valCheck.indexOf(info[i]) > -1) { valCheck.splice(valCheck.indexOf(info[i]), 1); } } } nextTick(() => { treeRef.value!.setCheckedKeys(valCheck, false); store.state.setAnimation = false; }); }; const addGeometry = (val) => { if (val.flag) { for (var i in val.value) { treeData.value.push(val.value[i]); } } else { val.id = configTool.getEndDateTime(); if (val.sourceType === "3DTiles") { treeData.value[0].children.push(val); } else if (val.sourceType === "WMS") { treeData.value[1].children.push(val); } else if (val.sourceType === "TMS") { treeData.value[2].children.push(val); } } }; onMounted(() => { setTreeStart(); }); defineExpose({ addGeometry }); watch( () => store.state.setAnimation, (newVal, oldVal) => { if (newVal) { setAnimation(newVal); } }, { immediate: true, deep: true } ); </script> <style lang="less" scoped> .layerBox { width: 300px; height: 600px; background: rgba(7, 8, 14, 0.8); box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); position: absolute; z-index: 41; top: 150px; right: 1%; .layerTitle { width: calc(100% - 27px); height: 42px; background: #30bcff; box-shadow: 0 2px 3px rgba(16, 133, 80, 0.5); border-bottom: 1px solid #20bc74; display: flex; justify-content: space-between; padding-left: 7px; padding-right: 20px; color: white; .tileLeft { height: 100%; display: flex; align-items: center; .titleLable { font-size: 18px; font-family: Source Han Sans CN; font-weight: 400; color: #ffffff; } } .titleImg { width: 20px; height: 100%; color: #fff; display: flex; align-items: center; } .set { cursor: pointer; display: flex; } } .layerContent { height: 525px; padding: 0 8px; overflow: auto; overflow-y: auto; } .layerContent::-webkit-scrollbar { width: 8px; } .layerContent::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(35, 47, 42, 0.8); } .layerContent::-webkit-scrollbar-track { border-radius: 0; background: rgba(35, 47, 42, 0.8); } .el-tree { width: 100%; overflow-y: auto; } .layerContent .el-tree-node__content { overflow: hidden; } .layerContent .custom-tree-node { overflow: hidden; flex-shrink: 1; flex-grow: 1; display: flex; align-items: center; justify-content: space-between; font-size: 16px; padding-right: 8px; } .layerContent .custom-tree-node .label { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; } .layerContent .custom-tree-node .button { flex-grow: 0; flex-shrink: 0; } } .dropdown_box { position: relative; } /deep/.el-select-dropdown__item { font-size: 12px !important; } .el-tree { background: transparent; } /deep/ .el-tree-node { background: #0d131d; color: #ffffff; font-size: 14px; font-weight: 300; margin-top: 3px; padding: 8px; } /deep/ .el-tree-node:focus > .el-tree-node__content { background: transparent; } /deep/ .el-tree-node__content:hover { background: #0d131d; } /deep/ .el-tree-node__children { background: #1e2a3d; .el-tree-node { background: #1e2a3d; margin-top: 0; padding: 4px; font-size: 12px; } } /deep/ .stafftree > .el-tree-node > .el-tree-node__content .el-checkbox { display: none; } /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background: rgba(104, 156, 255, 0.5) !important; } .highlight { background: rgba(104, 156, 255, 0.5) !important; } // .custom-tree-node { // flex: 1; // display: flex; // align-items: center; // justify-content: space-between; // font-size: 16px; // padding-right: 8px; // } .el-dropdown-menu { background: rgba(7, 8, 14, 0.8); box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); color: #fff; border: 0; /deep/ .el-dropdown-menu__item { color: #fff; } } /deep/ .el-dropdown-menu__item:not(.is-disabled):focus { background-color: rgba(104, 156, 255, 0.5); color: #fff; } </style> <style> .el-popper.is-light { border: 1px solid rgba(7, 8, 14, 0.8) !important; } .el-scrollbar { border: 0 !important; } </style> src/components/map/layerMenu.vue
@@ -1,174 +1,176 @@ <template> <div class="MenuBox"> <!-- èå --> <div class="menuContent" v-show="!menuIsShow" :class="{ menuActive: menuIsShow }"> <div class="menuItemBox" @click="setMenuClick(item)" :id="item.id" v-for="(item, index) in menuOption" :key="index"> {{ item.name }} </div> <div class="closeMenu" @click="setMenuIsShow"> <el-icon :size="20"> <DArrowRight /> </el-icon> </div> </div> <div v-show="menuIsShow" @click="setMenuIsShow" class="rightMenu"> <el-icon :size="20"> <DArrowLeft /> </el-icon> </div> </div> <!-- äºçº§èå --> <div class="childMenuBox" v-show="childMenuIsShow"> <div @click="setChildMenuClick(item)" v-for="(item, key) in childMenuOption" :key="key"> {{ item.name }} </div> </div> </template> <script lang="ts" setup> import { ref, onMounted, nextTick, watch } from "vue"; import { DArrowRight, DArrowLeft } from "@element-plus/icons-vue"; import menuData from "@/assets/js/data/menuData"; import menuManager from "@/assets/js/map/menuManager"; import militaryPlotting from "@/components/plot/militaryPlotting"; const menuOption = ref([]); const childMenuOption = ref([]); const menuIsShow = ref(false); const childMenuIsShow = ref(false); const setCheckMenuFlag = ref(null); // èåæ¾éåæ¢ const setMenuIsShow = () => { menuIsShow.value = !menuIsShow.value; }; // èååå§å const setMenuStart = () => { menuOption.value = menuData.menuData; }; //èåç¹å»äºä»¶ const setMenuClick = (res) => { const obj = menuManager.init(res); if (obj) { if (childMenuIsShow.value && obj == setCheckMenuFlag.value) { childMenuIsShow.value = false; setCheckMenuFlag.value = null; return; } setCheckMenuFlag.value = obj; var client = document.getElementById(obj).getBoundingClientRect().left; document.getElementsByClassName("childMenuBox")[0].style.left = client + "px"; childMenuOption.value = menuData[obj]; childMenuIsShow.value = true; } else { childMenuIsShow.value = false; setCheckMenuFlag.value = null; } }; //äºçº§èåç¹å»äºä»¶ const setChildMenuClick = (item) => { var obj = menuManager.init(item); childMenuIsShow.value = false; setCheckMenuFlag.value = null; }; onMounted(() => { setMenuStart(); }); </script> <style lang="less" scoped> .MenuBox { z-index: 40; position: absolute; top: 80px; right: 0px; border-radius: 0 6px 6px 0; font-family: microsoft yahei; .menuContent { display: flex; height: 40px; border: 1px solid #30bcff; } .menuItemBox { color: white; background: rgba(26, 37, 23, 0.8); box-shadow: inset 0px 10px 40px 10px rgba(26, 37, 23, 1); line-height: 40px; padding: 0px 10px; font-size: 14px; } .menuItemBox:hover { color: #30bcff; } .menuActive { width: 0px; transition: width 10s linear 10s; /* Safari */ -webkit-transition: width 10s linear 10s; } .closeMenu { width: 30px; height: 100%; background: #30bcff; color: white; display: flex; position: relative; justify-content: center; align-items: center; } .rightMenu { width: 30px; height: 30px; background: rgba(26, 37, 23, 0.8); border: 1px solid #30bcff; color: #30bcff; display: flex; justify-content: center; align-items: center; border-radius: 5px; } .rightMenu:hover { background: #30bcff !important; color: white; border: 1px solid #fff; } } .childMenuBox { padding: 10px; width: auto; color: white; background: rgba(35, 47, 42, 0.8); border: 1px solid #30bcff; position: absolute; z-index: 41; top: 123px; border-radius: 3px; transform: translate(-20%, 0); min-width: 52px; text-align: center; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); div { height: 36px; line-height: 36px; font-family: microsoft yahei; font-size: 12px; } div:hover { color: #30bcff; } } </style> <template> <div class="MenuBox"> <!-- èå --> <div class="menuContent" v-show="!menuIsShow" :class="{ menuActive: menuIsShow }"> <div class="menuItemBox" @click="setMenuClick(item)" :id="item.id" v-for="(item, index) in menuOption" :key="index"> {{ item.name }} </div> <div class="closeMenu" @click="setMenuIsShow"> <el-icon :size="20"> <DArrowRight /> </el-icon> </div> </div> <div v-show="menuIsShow" @click="setMenuIsShow" class="rightMenu"> <el-icon :size="20"> <DArrowLeft /> </el-icon> </div> </div> <!-- äºçº§èå --> <div class="childMenuBox" v-show="childMenuIsShow"> <div @click="setChildMenuClick(item)" v-for="(item, key) in childMenuOption" :key="key"> {{ item.name }} </div> </div> </template> <script lang="ts" setup> import { ref, onMounted, nextTick, watch } from "vue"; import { DArrowRight, DArrowLeft } from "@element-plus/icons-vue"; import menuData from "@/assets/js/data/menuData"; import menuManager from "@/assets/js/map/menuManager"; import militaryPlotting from "@/components/plot/militaryPlotting"; const menuOption = ref([]); const childMenuOption = ref([]); const menuIsShow = ref(false); const childMenuIsShow = ref(false); const setCheckMenuFlag = ref(null); // èåæ¾éåæ¢ const setMenuIsShow = () => { menuIsShow.value = !menuIsShow.value; if (menuIsShow.value) { childMenuIsShow.value = false; } }; // èååå§å const setMenuStart = () => { menuOption.value = menuData.menuData; }; //èåç¹å»äºä»¶ const setMenuClick = (res) => { const obj = menuManager.init(res); if (obj) { if (childMenuIsShow.value && obj == setCheckMenuFlag.value) { childMenuIsShow.value = false; setCheckMenuFlag.value = null; return; } setCheckMenuFlag.value = obj; var client = document.getElementById(obj).getBoundingClientRect().left; document.getElementsByClassName("childMenuBox")[0].style.left = client + "px"; childMenuOption.value = menuData[obj]; childMenuIsShow.value = true; } else { childMenuIsShow.value = false; setCheckMenuFlag.value = null; } }; //äºçº§èåç¹å»äºä»¶ const setChildMenuClick = (item) => { var obj = menuManager.init(item); childMenuIsShow.value = false; setCheckMenuFlag.value = null; }; onMounted(() => { setMenuStart(); }); </script> <style lang="less" scoped> .MenuBox { z-index: 40; position: absolute; top: 80px; right: 0px; border-radius: 0 6px 6px 0; font-family: microsoft yahei; .menuContent { display: flex; height: 40px; border: 1px solid #30bcff; } .menuItemBox { color: white; background: rgba(26, 37, 23, 0.8); box-shadow: inset 0px 10px 40px 10px rgba(26, 37, 23, 1); line-height: 40px; padding: 0px 10px; font-size: 14px; } .menuItemBox:hover { color: #30bcff; } .menuActive { width: 0px; transition: width 10s linear 10s; /* Safari */ -webkit-transition: width 10s linear 10s; } .closeMenu { width: 30px; height: 100%; background: #30bcff; color: white; display: flex; position: relative; justify-content: center; align-items: center; } .rightMenu { width: 30px; height: 30px; background: rgba(26, 37, 23, 0.8); border: 1px solid #30bcff; color: #30bcff; display: flex; justify-content: center; align-items: center; border-radius: 5px; } .rightMenu:hover { background: #30bcff !important; color: white; border: 1px solid #fff; } } .childMenuBox { padding: 10px; width: auto; color: white; background: rgba(35, 47, 42, 0.8); border: 1px solid #30bcff; position: absolute; z-index: 41; top: 123px; border-radius: 3px; transform: translate(-20%, 0); min-width: 52px; text-align: center; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); div { height: 36px; line-height: 36px; font-family: microsoft yahei; font-size: 12px; } div:hover { color: #30bcff; } } </style> src/components/map/militaryPlottingLayer.vue
@@ -1,217 +1,528 @@ <template> <div v-drag class="layerBox"> <div class="layerTitle"> <div class="tileLeft"> <div @click="setCloseLayer" class="titleImg"> <ArrowLeft /> </div> <div class="titleLable">åäºæ ç»</div> </div> <div class="titleImg set" @click="store.state.layerFlag = null" title="å ³é"> <CloseBold /> </div> </div> <div class="layerContent"></div> </div> </template> <script lang="ts" setup> import { ref, onMounted, nextTick, watch } from "vue"; import { MoreFilled, Setting, CloseBold } from "@element-plus/icons-vue"; import store from "@/store"; onMounted(() => {}); </script> <style lang="less" scoped> .layerBox { width: 300px; height: 600px; background: rgba(7, 8, 14, 0.8); box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); position: absolute; z-index: 41; top: 150px; right: 1%; .layerTitle { width: calc(100% - 27px); height: 42px; background: #30bcff; box-shadow: 0 2px 3px rgba(16, 133, 80, 0.5); border-bottom: 1px solid #20bc74; display: flex; justify-content: space-between; padding-left: 7px; padding-right: 20px; color: white; .tileLeft { height: 100%; display: flex; align-items: center; .titleLable { font-size: 18px; font-family: Source Han Sans CN; font-weight: 400; color: #ffffff; } } .titleImg { width: 20px; height: 100%; display: flex; align-items: center; color: #fff; } .set { cursor: pointer; } } .layerContent { height: 525px; padding: 0 8px; overflow: auto; overflow-y: auto; } .layerContent::-webkit-scrollbar { width: 8px; } .layerContent::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(35, 47, 42, 0.8); } .layerContent::-webkit-scrollbar-track { border-radius: 0; background: rgba(35, 47, 42, 0.8); } .el-tree { width: 100%; overflow-y: auto; } .layerContent .el-tree-node__content { overflow: hidden; } .layerContent .custom-tree-node { overflow: hidden; flex-shrink: 1; flex-grow: 1; display: flex; align-items: center; justify-content: space-between; font-size: 16px; padding-right: 8px; } .layerContent .custom-tree-node .label { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; } .layerContent .custom-tree-node .button { flex-grow: 0; flex-shrink: 0; } } .dropdown_box { position: relative; } /deep/.el-select-dropdown__item { font-size: 12px !important; } .el-tree { background: transparent; } /deep/ .el-tree-node { background: #0d131d; color: #ffffff; font-size: 20px; font-weight: 300; margin-top: 3px; padding: 8px; } /deep/ .el-tree-node:focus > .el-tree-node__content { background: transparent; } /deep/ .el-tree-node__content:hover { background: #0d131d; } /deep/ .el-tree-node__children { background: #1e2a3d; .el-tree-node { background: #1e2a3d; margin-top: 0; padding: 4px; } } /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background: rgba(104, 156, 255, 0.5) !important; } .highlight { background: rgba(104, 156, 255, 0.5) !important; } // .custom-tree-node { // flex: 1; // display: flex; // align-items: center; // justify-content: space-between; // font-size: 16px; // padding-right: 8px; // } .el-dropdown-menu { background: rgba(7, 8, 14, 0.8); box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); color: #fff; border: 0; /deep/ .el-dropdown-menu__item { color: #fff; } } /deep/ .el-dropdown-menu__item:not(.is-disabled):focus { background-color: rgba(104, 156, 255, 0.5); color: #fff; } </style> <style> .el-popper.is-light { border: 1px solid rgba(7, 8, 14, 0.8) !important; } .el-scrollbar { border: 0 !important; } </style> <template> <div v-drag class="layerBox"> <div class="layerTitle"> <div class="tileLeft"> <div @click="setCloseLayer" class="titleImg"> <ArrowLeft /> </div> <div class="titleLable">åäºæ ç»</div> </div> <div class="titleImg set" @click="store.state.layerFlag = null" title="å ³é"> <CloseBold /> </div> </div> <div class="layerContent"> <div class="layerTree"> <el-tree :data="treeMenuData" :props="defaultProps" accordion @node-click="handleNodeClick" /> </div> <div class="layerTreeBox"> <div class="grade-item" v-for="el in currentGradeList" :key="el.label" @click="CreateImageBillboard(el)"> <div class="g-img"> <img :src="el.image" alt="" /> </div> <div class="g-title"> <el-tooltip effect="dark" :content="el.label" placement="bottom"> <span>{{ showGradeCode ? el.code || el.label : el.label }}</span> </el-tooltip> </div> </div> </div> </div> </div> </template> <script lang="ts" setup> import { ref, onMounted, nextTick, watch } from "vue"; import { MoreFilled, Setting, CloseBold } from "@element-plus/icons-vue"; import store from "@/store"; import axios from "axios"; interface Tree { label: string; children?: Tree[]; } const treeMenuData = ref([]); const currentGradeList = ref([]); const handleNodeClick = (res) => { if (res.children && res.children.length > 0) return; if (res.children2 && res.children2.length > 0) { var obj = res.children2; const gradeList = []; obj.forEach((d) => { if (d.type == "file") { let codeName = d.data.codeName ? d.data.codeName.substring(0, d.data.codeName.lastIndexOf("-")) : ""; gradeList.push({ ...d, image: SmartEarthRootUrl + `Workers/image/${d.path.replace(/\\/g, "/")}`, name: d.label, code: codeName, }); } }); console.log(gradeList); currentGradeList.value = gradeList; } }; const CreateImageBillboard = (item) => { const svgstring = "PHN2ZyB3aWR0aD0iNDYwIiBoZWlnaHQ9IjQwOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRlc2M9IkNyZWF0ZWQgd2l0aCBpbWFnZXRyYWNlci5qcyB2ZXJzaW9uIDEuMi41IiA+PHBhdGggZmlsbD0icmdiKDAsMCwwKSIgc3Ryb2tlPSJyZ2IoMCwwLDApIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9IjEiIGQ9Ik0gMTAyIDM2IEwgMTI2IDU2IEwgMTM4IDQ4IEwgMjMwIDEzNiBMIDMzNCAzNiBRIDM0NiA2MCAzNTggMzYgTCA0MDggODYgTCAzODYgMTEyIEwgMzQyIDY4IEwgMjUyIDE1OCBMIDQzMiAzNDYgTCA0MTAgMzY0IEwgMjI2IDE4NCBMIDQ2IDM2MCBMIDI4IDMzOCBMIDIwNCAxNTggTCAxMTQgNjggTCA3NCAxMDggTCA1MiA5MCBMIDEwMiAzNiBaICIgLz48L3N2Zz4="; // const svgstring = // 'iVBORw0KGgoAAAANSUhEUgAAAGQAAABjCAYAAABt56XsAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKTWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaOWJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHiwmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryMAgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0lYqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHiNLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYAQH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6cwR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBiewhi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1cQPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqOY4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hMWEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgohJZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSUEko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/pdLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Yb1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7OUndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsbdi97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W7eva73VwnUCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxrPGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H08PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+Hvqa+It89viN+1n6Zfgf8nvs7+sv9j/i/4XnyFvFOBWABwQHlAb2BGoGzA2sDHwSZBKUHNQWNBbsGLww+FUIMCQ1ZH3KTb8AX8hv5YzPcZyya0RXKCJ0VWhv6MMwmTB7WEY6GzwjfEH5vpvlM6cy2CIjgR2yIuB9pGZkX+X0UKSoyqi7qUbRTdHF09yzWrORZ+2e9jvGPqYy5O9tqtnJ2Z6xqbFJsY+ybuIC4qriBeIf4RfGXEnQTJAntieTE2MQ9ieNzAudsmjOc5JpUlnRjruXcorkX5unOy553PFk1WZB8OIWYEpeyP+WDIEJQLxhP5aduTR0T8oSbhU9FvqKNolGxt7hKPJLmnVaV9jjdO31D+miGT0Z1xjMJT1IreZEZkrkj801WRNberM/ZcdktOZSclJyjUg1plrQr1zC3KLdPZisrkw3keeZtyhuTh8r35CP5c/PbFWyFTNGjtFKuUA4WTC+oK3hbGFt4uEi9SFrUM99m/ur5IwuCFny9kLBQuLCz2Lh4WfHgIr9FuxYji1MXdy4xXVK6ZHhp8NJ9y2jLspb9UOJYUlXyannc8o5Sg9KlpUMrglc0lamUycturvRauWMVYZVkVe9ql9VbVn8qF5VfrHCsqK74sEa45uJXTl/VfPV5bdra3kq3yu3rSOuk626s91m/r0q9akHV0IbwDa0b8Y3lG19tSt50oXpq9Y7NtM3KzQM1YTXtW8y2rNvyoTaj9nqdf13LVv2tq7e+2Sba1r/dd3vzDoMdFTve75TsvLUreFdrvUV99W7S7oLdjxpiG7q/5n7duEd3T8Wej3ulewf2Re/ranRvbNyvv7+yCW1SNo0eSDpw5ZuAb9qb7Zp3tXBaKg7CQeXBJ9+mfHvjUOihzsPcw83fmX+39QjrSHkr0jq/dawto22gPaG97+iMo50dXh1Hvrf/fu8x42N1xzWPV56gnSg98fnkgpPjp2Snnp1OPz3Umdx590z8mWtdUV29Z0PPnj8XdO5Mt1/3yfPe549d8Lxw9CL3Ytslt0utPa49R35w/eFIr1tv62X3y+1XPK509E3rO9Hv03/6asDVc9f41y5dn3m978bsG7duJt0cuCW69fh29u0XdwruTNxdeo94r/y+2v3qB/oP6n+0/rFlwG3g+GDAYM/DWQ/vDgmHnv6U/9OH4dJHzEfVI0YjjY+dHx8bDRq98mTOk+GnsqcTz8p+Vv9563Or59/94vtLz1j82PAL+YvPv655qfNy76uprzrHI8cfvM55PfGm/K3O233vuO+638e9H5ko/ED+UPPR+mPHp9BP9z7nfP78L/eE8/sl0p8zAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAB+UlEQVR42uydyxKDMAgADeP//zI9daanaiIgkN1zp01cHvERO1T1gDwIhwAhgBCEAEIQAg6cJUc9xv+1uuogQwAhCAGEIAQQAghBCCAEIYAQhABCtmKEP+RwdaU2Cy9dMSZDKFmAEIQAQhACCNmA+KdOLNb3PHUCCEEIIAQQghBACEIAIQgBhCAEEAIIQQjc5//9kMb3HWoKgXV+g3kicBESLedCED0kQgBNnVUW3OWinyCEDKF/IKRNhnDiF9o/yJBk5eq5kCrb02jqsFr+xeqLgAxp1z9shNBHyJCu/eO+EPpIsQzZvWwZzp+SVTZDrsoWzd2k3JMhycq1ZB7cbtkxL4TVlnsASoVBlpSxGLzikoadpYyhnvOTSuncuXc8E3L3B7tJCZiPvBEFrWU8PC7SIao6lCobIbuUrsDxS1hUVJUSVKriSlZVKTPLW8N+aiNEdUxlSnYxM+MzXtzYZsjM4DJKmQ0Wh5WmlDoAmcqp07LfXsjKQN+WkkTGcXhtafsOeGai389GnXCuBoHz+Hz3GKqO6YlP7McLz8KAYPHf9LkixUKQZRkMvEwU+/8hFU8Og6/ZSefJhZ1blV72vjTRKoEjO046c7CcaSLxrf6SLDDOtGXCS1Dycpn3XSdWgord2azz8plNbhnzKClCACEIAYQgBDz4DAD0csLPVYndhQAAAABJRU5ErkJggg=='; const decodedString = atob(svgstring); const svgBinaryString = decodedString; const dataURI = `data:image/svg+xml;base64,${btoa(svgBinaryString)}`; //const dataURI = `data:image/png;base64,${btoa(svgBinaryString)}`; const svgImage = dataURI; if (item.func) { // if (item.func == 'Bezierline' || item.func == 'BezierArrow') { // earthCtrl.Creator.militaryPlotting(item.func, entity => {}); // } else if (item.func === "Polyline") { earthCtrl.factory.createSimpleGraphic( "polyline", { name: item.code + "_" + item.name, showSize: true }, (entity) => { if (!entity) return; entity.name = item.code + "_" + item.name; } ); } else if (item.func === "Polyline2") { earthCtrl.factory.createSimpleGraphic( "polyline", { showSize: true }, (entity) => { if (!entity) return; entity.name = item.code + "_" + item.name; } ); } else if ( item.func === "Point" || item.func === "Polygon" || item.func === "Rectangle" || item.func === "Circle" || item.func === "Label" || item.func === "Billboard" ) { earthCtrl.factory.createSimpleGraphic( item.func.toLowerCase(), {}, (entity) => { if (!entity) return; entity.name = item.code + "_" + item.name; } ); } else if (item.func === "Model") { earthCtrl.factory.createSimpleGraphic( "model", { url: `jbimages/${item.model.replace(/\\/g, "/")}`, name: item.label, removeEdit: false, }, (entity) => {} ); } else { earthCtrl.factory.militaryPlotting(item.func, "polygon", (entity) => { if (!entity) return; entity.name = item.code + "_" + item.name; }); } } else { // if(item.code === "10-26400-1"){ // }else if(item.code === "10-35000-1"){ // earthCtrl.factory.militaryPlotting("customType1", (entity) => { // console.log(entity); // if (!entity) return; // entity.isEdit = false; // entity.name = item.code + "_" + item.name; // // entity.billboard.image._value = svgImage; // // }); // }else if(item.code === "10-23400-1"){ // earthCtrl.factory.militaryPlotting("customType2", (entity) => { // console.log(entity); // if (!entity) return; // entity.name = item.code + "_" + item.name; // // entity.billboard.image._value = svgImage; // // }); // }else{ // earthCtrl.factory.createSimpleGraphic( // "billboard", // { name: item.code + "_" + item.name }, // (entity) => { // if (!entity) return; // entity.name = item.code + "_" + item.name; // entity.billboard.width._value = 44; // entity.billboard.height._value = 44; // // entity.billboard.image._value = SmartEarthRootUrl + `Workers/newPic/${item.name}.png`; // entity.billboard.image._value = item.image; // // } // ); // } if (config.xmjb.indexOf(item.code) > -1) { var code = item.code.split("-"); earthCtrl.factory.militaryPlotting( "Type_" + code[0] + "_" + code[1], "", (entity) => { console.log(entity); if (!entity) return; // å¤æentityæ¯æ°ç»è¿æ¯å¯¹è±¡ console.log(Object.getPrototypeOf(entity)); if (!Array.isArray(entity)) { entity.name = item.code + "_" + item.name; // this.addSimpleGraphicjbTotree(entity); } else if (Array.isArray(entity)) { // entity.forEach((ele)=>{ // console.log(ele); // ele.name = item.code + "_" + item.name; // // this.addSimpleGraphicjbTotree(entity); // this.addArmyLabelTotree(ele); // }) var lineentity = entity[entity.length - 1]; lineentity.name = item.code + "_" + item.name; // this.addSimpleGraphicjbTotree(lineentity, entity); // this.addArmyLabeljbTotree(lineentity,entity); } // // entity.billboard.image._value = svgImage; } ); // earthCtrl.factory.militaryPlotting("Type_10_29100", "", (entity) => { // console.log(entity); // }); } else { if (item.code === "10-23400-1") { earthCtrl.factory.militaryPlotting( "GatheringPlace", "polygon", (entity) => { console.log(entity); if (!entity) return; entity.name = item.code + "_" + item.name; // entity.billboard.image._value = svgImage; } ); } else { earthCtrl.factory.createSimpleGraphic( "billboard", { name: item.code + "_" + item.name }, (entity) => { if (!entity) return; entity.name = item.code + "_" + item.name; entity.billboard.width._value = 44; entity.billboard.height._value = 44; // entity.billboard.image._value = SmartEarthRootUrl + `Workers/newPic/${item.name}.png`; entity.billboard.image._value = item.image; } ); } } } }; const setPlotJbStart = () => { const url = config.jsonUrl + "jb.json"; axios.get(url).then((res) => { if (res.status != 200) return; treeMenuData.value = handleJBData(res.data.children); }); }; const handleJBData = (data) => { data.forEach((el) => { if (el.children && el.children.length > 0) { if (el.children[0].type === "file") { el.children2 = el.children; delete el.children; } else { el.children = handleJBData(el.children); } } }); return data; }; onMounted(() => { setPlotJbStart(); }); </script> <style lang="less" scoped> .layerBox { width: 300px; height: 600px; background: rgba(7, 8, 14, 0.8); box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); position: absolute; z-index: 41; top: 150px; right: 1%; .layerTitle { width: calc(100% - 27px); height: 42px; background: #30bcff; box-shadow: 0 2px 3px rgba(16, 133, 80, 0.5); border-bottom: 1px solid #20bc74; display: flex; justify-content: space-between; padding-left: 7px; padding-right: 20px; color: white; .tileLeft { height: 100%; display: flex; align-items: center; .titleLable { font-size: 18px; font-family: Source Han Sans CN; font-weight: 400; color: #ffffff; } } .titleImg { width: 20px; height: 100%; display: flex; align-items: center; color: #fff; } .set { cursor: pointer; } } .layerContent { height: calc(100% - 16px); padding: 0 8px; overflow: auto; overflow-y: auto; display: flex; flex-direction: column; } .layerTree { height: 40%; overflow: auto; background: #0d131d; } .layerTreeBox { height: 52%; margin-top: 5px; overflow: auto; background: #0d131d; display: flex; justify-content: flex-start; flex-wrap: wrap; } .grade-item { display: flex; flex-direction: column; width: 25%; margin-bottom: 5px; cursor: pointer; display: flex; align-items: center; /* justify-content: center; */ } .g-title { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a9eeff; font-size: 12px; text-align: center; } .g-img { width: 60%; background-image: url("../../assets/img/subject/itemBg.png"); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; } .g-img img { width: 90%; height: 90%; } .layerContent::-webkit-scrollbar { width: 8px; } .layerContent::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(35, 47, 42, 0.8); } .layerContent::-webkit-scrollbar-track { border-radius: 0; background: rgba(35, 47, 42, 0.8); } .el-tree { width: 100%; overflow-y: auto; } .layerContent .el-tree-node__content { overflow: hidden; } .layerContent .custom-tree-node { overflow: hidden; flex-shrink: 1; flex-grow: 1; display: flex; align-items: center; justify-content: space-between; font-size: 16px; padding-right: 8px; } .layerContent .custom-tree-node .label { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; } .layerContent .custom-tree-node .button { flex-grow: 0; flex-shrink: 0; } } .dropdown_box { position: relative; } /deep/.el-select-dropdown__item { font-size: 12px !important; } .el-tree { background: transparent; } /deep/ .el-tree-node { // background: #0d131d; color: #ffffff; font-size: 12px; font-weight: 300; margin-top: 3px; padding: 8px; } /deep/ .el-tree-node:focus > .el-tree-node__content { background: transparent; } /deep/ .el-tree-node__content:hover { background: #0d131d; color: #409eff; } /deep/ .el-tree-node__children { background: #1e2a3d; .el-tree-node { background: #1e2a3d; margin-top: 0; padding: 4px; } } /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background: rgba(104, 156, 255, 0.5) !important; } .highlight { background: rgba(104, 156, 255, 0.5) !important; } .el-dropdown-menu { background: rgba(7, 8, 14, 0.8); box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); color: #fff; border: 0; /deep/ .el-dropdown-menu__item { color: #fff; } } /deep/ .el-dropdown-menu__item:not(.is-disabled):focus { background-color: rgba(104, 156, 255, 0.5); color: #fff; } /*å®ä¹æ»å¨æ¡é«å®½åèæ¯ é«å®½åå«å¯¹åºæ¨ªç«æ»å¨æ¡ç尺寸*/ ::-webkit-scrollbar { width: 2px; height: 16px; background-color: #f5f5f5; } /*å®ä¹æ»å¨æ¡è½¨é å é´å½±+åè§*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #f5f5f5; } /*å®ä¹æ»å å é´å½±+åè§*/ ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #555; } </style> <style> .el-popper.is-light { border: 1px solid rgba(7, 8, 14, 0.8) !important; } .el-scrollbar { border: 0 !important; } </style> src/store/index.ts
@@ -1,3 +1,4 @@ import { fa } from "element-plus/es/locale"; import { createStore } from "vuex"; export default createStore({ @@ -12,13 +13,20 @@ rightMeuFlag: false, rightMenuIndex: null, rightCoodinate: null, setFlyPlanFlag: false, setAddEntityList: { flag: false, title: "", type: 0 } }, mutations: { //éªè¯ç å·æ° setLoginCode(state, num) { state.loginCode = num; }, }, actions: {}, modules: {}, modules: {} }); src/views/Home.vue
@@ -24,10 +24,10 @@ import { getToken } from "@/utils/auth"; import navMenu from "@/components/navMenu"; onMounted(() => { const token = getToken(); if (!token) { router.push("/Login"); } // const token = getToken(); // if (!token) { // router.push("/Login"); // } }); </script> <style lang="less" scoped> @@ -35,11 +35,11 @@ width: 100%; height: 100%; .el-header { height: 60px; height: 0px; padding: 0px; } .el-main { height: calc(100% -60px); height: calc(100% - 0px); padding: 0px !important; } } src/views/Synthesis.vue
@@ -7,37 +7,311 @@ --> <template> <div class="MapBox"> <div class="banner" :class="{ leftMap: screenFlag }"> <div class="banner" :class="{ leftMap: screenFlag }"> <div id="cesiumContainer"></div> </div> <div class="leftMap" v-if="screenFlag"> <div class="leftMap" v-if="screenFlag"> <div id="cesiumContainer2"></div> </div> <!-- å¾å±ç®¡ç --> <layer-manager v-show="store.state.layerFlag == 'layerManage'"></layer-manager> <layer-manager ref="layerManaget" v-show="store.state.layerFlag == 'layerManage'" ></layer-manager> <!-- 顶é¨èå --> <layer-menu></layer-menu> <!-- å³å»èåäºä»¶ --> <rightMenuLayer v-show="store.state.rightMeuFlag"></rightMenuLayer> <!-- åäºæ ç» --> <military-plotting-layer v-if="store.state.layerFlag == 'militaryPlot'"></military-plotting-layer> <military-plotting-layer v-if="store.state.layerFlag == 'militaryPlot'" ></military-plotting-layer> <!-- é£è¡å®ä½ --> <flyPlan ref="flyPlanet" v-show="store.state.setFlyPlanFlag"></flyPlan> </div> <!-- æ·»å å¾å± --> <el-dialog v-model="store.state.setAddEntityList.flag" :title="store.state.setAddEntityList.title" width="700" :before-close="handleClose" > <div v-if="store.state.setAddEntityList.type === 1"> <el-form> <el-form-item label="å¾å±å称"> <el-input size="small" v-model="layerFrom.name" /> </el-form-item> <el-form-item label="å¾å±ç±»å"> <el-select size="small" v-model="layerFrom.sourceType"> <el-option label="3DTiles" value="3DTiles" /> <el-option label="WMS" value="WMS" /> <el-option label="TMS" value="TMS" /> </el-select> </el-form-item> <el-form-item label="å¾å±å°å"> <el-input size="small" v-model="layerFrom.url" /> </el-form-item> </el-form> </div> <div v-else-if="store.state.setAddEntityList.type === 2"> <el-form> <el-form-item label="å称"> <el-input size="small" v-model="entityFrom.name" /> </el-form-item> <el-form-item label="ç»åº¦" v-show="entityFlag"> <el-input size="small" v-model="entityFrom.lon" /> </el-form-item> <el-form-item label="纬度" v-show="entityFlag"> <el-input size="small" v-model="entityFrom.lat" /> </el-form-item> <el-form-item label="é«åº¦" v-show="entityFlag"> <el-input size="small" v-model="entityFrom.alt" /> </el-form-item> <el-form-item label="heading" v-show="entityFlag"> <el-input size="small" v-model="entityFrom.heading" /> </el-form-item> <el-form-item label="pitch" v-show="entityFlag"> <el-input size="small" v-model="entityFrom.pitch" /> </el-form-item> <el-form-item label="roll" v-show="entityFlag"> <el-input size="small" v-model="entityFrom.roll" /> </el-form-item> <el-form-item label="åçæ¶é¿(s)" v-show="entityFlag"> <el-input size="small" v-model="entityFrom.time" /> </el-form-item> </el-form> </div> <div v-else-if="store.state.setAddEntityList.type === 3"> <el-form> <el-form-item> <el-radio-group v-model="importFrom.type" class="ml-4"> <el-radio value="1" size="large">å¨çº¿å°å</el-radio> <el-radio value="2" size="large">æ¬å°æ件</el-radio> </el-radio-group> </el-form-item> <el-form-item v-show="importFrom.type == '1'"> <el-input v-model="importFrom.url"></el-input> </el-form-item> <el-form-item v-show="importFrom.type == '2'"> <div style="width: 100%"> <el-row :gutter="10"> <el-col :span="20"> <el-input disabled v-model="importFrom.file"></el-input> <input type="file" style="display: none" ref="inputFile" id="inputFile" accept=".json" @change="getFileData" /> </el-col> <el-col :span="4"> <el-button type="primary" plain @click="uploadMaterial()"> <el-icon><Files /></el-icon> </el-button> </el-col> </el-row> </div> </el-form-item> </el-form> </div> <div class="dialogButton"> <div> <el-button type="primary" size="small" @click="handleSubmite" >æ交</el-button > <el-button size="small" @click="handleClose">åæ¶</el-button> </div> </div> </el-dialog> </template> <script lang="ts" setup> import flyPlan from "./../components/map/flyPlan.vue"; import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue"; import store from "@/store"; import { useStore } from "vuex"; import mapView from "../assets/js/mapView.js"; import layerManager from "@/components/map/layerManager.vue"; import layerMenu from "@/components/map/layerMenu.vue"; import rightMenuLayer from "@/components/map/rightMenuLayer"; import militaryPlottingLayer from "@/components/map/militaryPlottingLayer"; const data = ref([]); import configTool from "../assets/js/tool/configTool"; import { Files } from "@element-plus/icons-vue"; import { ElMessage } from "element-plus"; import axios from "axios"; const dialogVisible = ref(true); const store = useStore(); const layerFrom = ref({ name: "", sourceType: "3DTiles", url: "" }); const entityFrom = ref({ name: "", lon: "", lat: "", alt: "", heading: "", pitch: "", roll: "", time: 0 }); const importFrom = ref({ type: "1", url: "", file: "", obj: null }); const layerManaget = ref(); const flyPlanet = ref(); const entityFlag = ref(false); const inputFile = ref(); const handleClose = () => { store.state.setAddEntityList = { flag: false, title: "", type: 0 }; importFrom.value = { type: "1", url: "", file: "", obj: null }; layerFrom.value = { name: "", sourceType: "3DTiles", url: "" }; entityFrom.value = { name: "", lon: "", lat: "", alt: "", heading: "", pitch: "", roll: "", time: 0 }; }; const uploadMaterial = () => { document.getElementById("inputFile").click(); }; const getFileData = (val) => { const flie = val.target; const file_type = flie.files[0].type; if (file_type != "application/json") { return ElMessage("æ°æ®æ件éæ©é误ï¼è¯·éæ©*.josnæ ¼å¼æ件"); } importFrom.value.file = flie.files[0].name; let reader = new FileReader(); //å new ä¸ä¸ªè¯»æ件ç对象 FileReader if (typeof FileReader === "undefined") { //ç¨æ¥å¤æä½ çæµè§å¨æ¯å¦æ¯æ FileReader ElMessage("æ¨çæµè§å¨ä¸æ¯ææ件读åã"); return; } // reader.readAsArrayBuffer(file.raw); //读任ææ件 reader.readAsText(flie.files[0], "UTF-8"); reader.onload = (obj) => { if (obj && obj.target && obj.target.result) { const file_string = obj.target.result; importFrom.value.obj = JSON.parse(file_string); console.log(importFrom.value); } else { ElMessage("æ°æ®è¯»å失败ã"); } }; }; const handleSubmite = () => { const list = store.state.setAddEntityList; if (list.type == 1) { layerManaget.value.addGeometry(layerFrom.value); } else if (list.type == 2) { if (entityFlag.value) { if(list.title=="èç¹ä¿®æ¹"){ const obj ={...entityFrom.value}; flyPlanet.value.addEntityData(obj) }else{ flyPlanet.value.addEntityData({ name: entityFrom.value.name, lon: entityFrom.value.lon, lat: entityFrom.value.lat, alt: entityFrom.value.alt, heading: entityFrom.value.heading, pitch: entityFrom.value.pitch, roll: entityFrom.value.roll, time: entityFrom.value.time, flag: 2 }); } } else { flyPlanet.value.addEntityData({ name: entityFrom.value.name, flag: 1 }); } } else if (list.type == 3) { const res = importFrom.value; if (res.type == "1") { axios.get(res.url).then((obj) => { if (obj.status == 200) { setInsertPost(obj.data, list.title); } }); } else { setInsertPost(res.obj, list.title); } } handleClose(); }; const setInsertPost = (res, label) => { const obj = { value: res, flag: 3 }; if (label == "æ°æ®å¯¼å ¥") { flyPlanet.value.addEntityData(obj); } else { layerManaget.value.addGeometry(obj); } }; onMounted(() => { mapView.init(); }); watch( () => store.state.setAddEntityList, (nVal, oVal) => { if (nVal && nVal.flag) { if (nVal.title === "èç¹æ·»å ") { const obj = configTool.getViewerCamera(); entityFrom.value = { name: "", lon: obj.lon, lat: obj.lat, alt: obj.alt, heading: obj.heading, pitch: obj.pitch, roll: obj.roll, time: 100 }; entityFlag.value = true; }else if(nVal.title === "èç¹ä¿®æ¹"){ entityFrom.value= store.state.setAddEntityList.editData entityFlag.value = true; } else { entityFlag.value = false; } } } ); onBeforeUnmount(() => {}); </script> <style scoped lang="less"> @@ -46,6 +320,7 @@ height: 100%; display: flex; justify-content: space-between; position: absolute; .banner { width: 100%; height: 100vh; @@ -115,4 +390,9 @@ height: 0px; } } .dialogButton { width: 100%; display: flex; justify-content: end; } </style> vue.config.js
@@ -1,66 +1,67 @@ /* * @Description: * @Author: TT * @Date: 2023-02-27 13:56:51 * @LastEditTime: 2023-03-02 11:28:29 * @LastEditors: TT */ module.exports = { lintOnSave: false, // devServer: { //proxy: "192.168.20.70:8001/" // // é 置跨å-请æ±å端ç代çæ¥å£ // proxy: { // "/LinCaoJu": { // target: "http://192.168.11.95/LinCaoJu", //对åºèªå·±çæ¥å£ // changeOrigin: true, // ws: true, // pathRewrite: { // "^/LinCaoJu": "", // }, // }, // }, // }, publicPath: "./", css: { loaderOptions: { postcss: { plugins: [ require("postcss-px-to-viewport")({ unitToConvert: "px", // éè¦è½¬æ¢çåä½ viewportWidth: 1920, // è§å£å®½åº¦ï¼çåäºè®¾è®¡ç¨¿å®½åº¦ unitPrecision: 5, // 精确å°å°æ°ç¹åå ä½ /** * å°ä¼è¢«è½¬æ¢çcsså±æ§åè¡¨ï¼ * 设置为 * è¡¨ç¤ºå ¨é¨ï¼å¦ï¼['*'] * å¨å±æ§çåé¢æåé¢è®¾ç½®*ï¼å¦ï¼['*position*']ï¼*position* 表示ææå å« position çå±æ§ï¼å¦ background-position-y * 设置为 !xx 表示ä¸å¹é xxçé£äºå±æ§ï¼å¦ï¼['!letter-spacing'] 表示é¤äºletter-spacing å±æ§ä¹å¤çå ¶ä»å±æ§ * è¿å¯ä»¥åæ¶ä½¿ç¨ ! å * ï¼å¦['!font*'] 表示é¤äºfont-sizeã font-weight ...è¿äºä¹å¤å±æ§ä¹å¤çå ¶ä»å±æ§å头é¨æ¯âfontâçå±æ§ * */ propList: ["*"], viewportUnit: "vw", // éè¦è½¬æ¢æ为çåä½ fontViewportUnit: "vw", // éè¦è½¬æ¢ç§°ä¸ºçåä½åä½ /** * éè¦å¿½ç¥çéæ©å¨ï¼å³è¿äºéæ©å¨å¯¹åºçå±æ§å¼ä¸ååä½è½¬æ¢ * 设置为å符串ï¼è½¬æ¢å¨å¨å转æ¢æ¶ä¼å¿½ç¥é£äºéæ©å¨ä¸å å«è¯¥å符串çéæ©å¨ï¼å¦ï¼['body']ä¼å¹é å° .body-classï¼ä¹å°±æå³ç.body-class对åºçæ ·å¼è®¾ç½®ä¸ä¼è¢«è½¬æ¢ * 设置为æ£å表达å¼ï¼å¨å转æ¢åä¼å æ ¡éªéæ©å¨æ¯å¦å¹é 该æ£åï¼å¦æå¹é ï¼åä¸è¿è¡è½¬æ¢ï¼å¦[/^body$/]ä¼å¹é å° body ä½æ¯ä¸ä¼å¹é å° .body */ selectorBlackList: [], minPixelValue: 1, // æå°çåç´ åä½å¼ mediaQuery: false, // æ¯å¦è½¬æ¢åªä½æ¥è¯¢ä¸è®¾ç½®çå±æ§å¼ replace: true, // æ¿æ¢å å«vwçè§åï¼èä¸æ¯æ·»å åé /** * 忽ç¥ä¸äºæ件ï¼å¦'node_modules' * 设置为æ£å表达å¼ï¼å°ä¼å¿½ç¥å¹é 该æ£åçæææ件 * å¦æ设置为æ°ç»ï¼é£ä¹è¯¥æ°ç»å çå ç´ é½å¿ é¡»æ¯æ£åè¡¨è¾¾å¼ */ exclude: [], landscape: false, // æ¯å¦èªå¨å å ¥ @media (orientation: landscape)ï¼å ¶ä¸çå±æ§å¼æ¯éè¿æ¨ªå±å®½åº¦æ¥è½¬æ¢ç landscapeUnit: "vw", // 横å±åä½ landscapeWidth: 1334, // 横å±å®½åº¦ }), ], }, }, }, }; /* * @Description: * @Author: TT * @Date: 2023-02-27 13:56:51 * @LastEditTime: 2023-03-02 11:28:29 * @LastEditors: TT */ module.exports = { lintOnSave: false, // devServer: { //proxy: "192.168.20.70:8001/" // // é 置跨å-请æ±å端ç代çæ¥å£ // proxy: { // "/LinCaoJu": { // target: "http://192.168.11.95/LinCaoJu", //对åºèªå·±çæ¥å£ // changeOrigin: true, // ws: true, // pathRewrite: { // "^/LinCaoJu": "", // }, // }, // }, // }, publicPath: "./", css: { loaderOptions: { postcss: { plugins: [ require("postcss-px-to-viewport")({ unitToConvert: "px", // éè¦è½¬æ¢çåä½ viewportWidth: 1920, // è§å£å®½åº¦ï¼çåäºè®¾è®¡ç¨¿å®½åº¦ unitPrecision: 5, // 精确å°å°æ°ç¹åå ä½ /** * å°ä¼è¢«è½¬æ¢çcsså±æ§åè¡¨ï¼ * 设置为 * è¡¨ç¤ºå ¨é¨ï¼å¦ï¼['*'] * å¨å±æ§çåé¢æåé¢è®¾ç½®*ï¼å¦ï¼['*position*']ï¼*position* 表示ææå å« position çå±æ§ï¼å¦ background-position-y * 设置为 !xx 表示ä¸å¹é xxçé£äºå±æ§ï¼å¦ï¼['!letter-spacing'] 表示é¤äºletter-spacing å±æ§ä¹å¤çå ¶ä»å±æ§ * è¿å¯ä»¥åæ¶ä½¿ç¨ ! å * ï¼å¦['!font*'] 表示é¤äºfont-sizeã font-weight ...è¿äºä¹å¤å±æ§ä¹å¤çå ¶ä»å±æ§å头é¨æ¯âfontâçå±æ§ * */ propList: ["*"], viewportUnit: "vw", // éè¦è½¬æ¢æ为çåä½ fontViewportUnit: "vw", // éè¦è½¬æ¢ç§°ä¸ºçåä½åä½ /** * éè¦å¿½ç¥çéæ©å¨ï¼å³è¿äºéæ©å¨å¯¹åºçå±æ§å¼ä¸ååä½è½¬æ¢ * 设置为å符串ï¼è½¬æ¢å¨å¨å转æ¢æ¶ä¼å¿½ç¥é£äºéæ©å¨ä¸å å«è¯¥å符串çéæ©å¨ï¼å¦ï¼['body']ä¼å¹é å° .body-classï¼ä¹å°±æå³ç.body-class对åºçæ ·å¼è®¾ç½®ä¸ä¼è¢«è½¬æ¢ * 设置为æ£å表达å¼ï¼å¨å转æ¢åä¼å æ ¡éªéæ©å¨æ¯å¦å¹é 该æ£åï¼å¦æå¹é ï¼åä¸è¿è¡è½¬æ¢ï¼å¦[/^body$/]ä¼å¹é å° body ä½æ¯ä¸ä¼å¹é å° .body */ selectorBlackList: [], minPixelValue: 1, // æå°çåç´ åä½å¼ mediaQuery: false, // æ¯å¦è½¬æ¢åªä½æ¥è¯¢ä¸è®¾ç½®çå±æ§å¼ replace: true, // æ¿æ¢å å«vwçè§åï¼èä¸æ¯æ·»å åé /** * 忽ç¥ä¸äºæ件ï¼å¦'node_modules' * 设置为æ£å表达å¼ï¼å°ä¼å¿½ç¥å¹é 该æ£åçæææ件 * å¦æ设置为æ°ç»ï¼é£ä¹è¯¥æ°ç»å çå ç´ é½å¿ é¡»æ¯æ£åè¡¨è¾¾å¼ */ exclude: [], landscape: false, // æ¯å¦èªå¨å å ¥ @media (orientation: landscape)ï¼å ¶ä¸çå±æ§å¼æ¯éè¿æ¨ªå±å®½åº¦æ¥è½¬æ¢ç landscapeUnit: "vw", // 横å±åä½ landscapeWidth: 1334, // 横å±å®½åº¦ }), ], }, }, }, };
