diff --git a/.vscode/settings.json b/.vscode/settings.json index fcbab54..102e165 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -76,7 +76,7 @@ "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[html]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" + "editor.defaultFormatter": "vscode.html-language-features" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" diff --git a/package.json b/package.json index 789bc84..e429ec1 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ }, "dependencies": { "@ant-design/icons-vue": "^7.0.1", + "@icon-park/svg": "^1.4.2", "@iconify/iconify": "^3.1.1", "@logicflow/core": "^1.2.18", "@logicflow/extension": "^1.2.19", @@ -85,7 +86,10 @@ "driver.js": "^1.3.1", "echarts": "^5.4.3", "exceljs": "^4.4.0", + "lodash": "^4.17.21", "lodash-es": "^4.17.21", + "mars3d": "^3.7.0", + "mars3d-cesium": "^1.113.0", "mockjs": "^1.1.0", "nprogress": "^0.2.0", "path-to-regexp": "^6.2.1", @@ -99,13 +103,16 @@ "sortablejs": "^1.15.1", "tinymce": "^5.10.9", "unocss": "0.58.3", + "uuid": "^9.0.1", "vditor": "^3.9.8", "vue": "3.3.4", + "vue-color-kit": "^1.0.6", "vue-i18n": "^9.8.0", "vue-json-pretty": "^2.3.0", "vue-router": "^4.2.5", "vue-types": "^5.1.1", "vuedraggable": "^4.1.0", + "vuex": "^4.1.0", "vxe-table": "^4.5.17", "vxe-table-plugin-export-xlsx": "^3.1.0", "xe-utils": "^3.5.14", @@ -144,6 +151,7 @@ "typescript": "^5.3.3", "unbuild": "^2.0.0", "vite": "^5.0.10", + "vite-plugin-mars3d": "^3.1.3", "vite-plugin-mock": "^2.9.6", "vue-tsc": "^1.8.27" }, diff --git a/public/config/config.json b/public/config/config.json new file mode 100644 index 0000000..b3936c0 --- /dev/null +++ b/public/config/config.json @@ -0,0 +1,1142 @@ +{ + "map3d": { + "scene": { + "center": { "lat": 31.686288, "lng": 117.229619, "alt": 11333.9, "heading": 359.2, "pitch": -39.5 }, + "scene3DOnly": false, + "shadows": false, + "removeDblClick": true, + "sceneMode": 3, + "showSun": true, + "showMoon": true, + "showSkyBox": true, + "showSkyAtmosphere": true, + "fog": true, + "fxaa": true, + "requestRenderMode": true, + "globe": { + "depthTestAgainstTerrain": false, + "baseColor": "#546a53", + "showGroundAtmosphere": true, + "enableLighting": false + }, + "cameraController": { + "zoomFactor": 3.0, + "minimumZoomDistance": 1, + "maximumZoomDistance": 50000000, + "enableRotate": true, + "enableTranslate": true, + "enableTilt": true, + "enableZoom": true, + "enableCollisionDetection": true, + "minimumCollisionTerrainHeight": 15000 + } + }, + "control": { + "homeButton": true, + "baseLayerPicker": false, + "sceneModePicker": true, + "vrButton": false, + "fullscreenButton": true, + "navigationHelpButton": true, + "animation": false, + "timeline": false, + "infoBox": false, + "geocoder": false, + "selectionIndicator": false, + + "contextmenu": { "hasDefault": true }, + "mouseDownView": true, + "zoom": { "insertIndex": 1 }, + "compass": { "bottom": "toolbar", "left": "5px" }, + "distanceLegend": { "left": "100px", "bottom": "2px" }, + "locationBar": { + "fps": false, + "crs": "CGCS2000_GK_Zone_3", + "crsDecimal": 0, + "template": "
经度:{lng}
纬度:{lat}
横{crsx} 纵{crsy}
海拔：{alt}米
层级：{level}
方向：{heading}°
俯仰角：{pitch}°
视高：{cameraHeight}米
" + } + }, + "templateValues": { + "dataServer": "//data.mars3d.cn", + "gltfServerUrl": "//data.mars3d.cn/gltf" + }, + "terrain": { + "url": "//data.mars3d.cn/terrain", + "show": true + }, + "basemaps": [ + { "id": 10, "name": "地图底图", "type": "group" }, + { + "id": 2021, + "pid": 10, + "name": "谷歌影像", + "icon": "/img/basemaps/google_img.png", + "type": "google", + "layer": "img_d", + "show": true + }, + { + "pid": 10, + "name": "天地图影像", + "icon": "img/basemaps/tdt_img.png", + "type": "group", + "layers": [ + { "name": "底图", "type": "tdt", "layer": "img_d" }, + { "name": "注记", "type": "tdt", "layer": "img_z" } + ], + "show": false + }, + { + "pid": 10, + "name": "天地图电子", + "icon": "img/basemaps/tdt_vec.png", + "type": "group", + "layers": [ + { "name": "底图", "type": "tdt", "layer": "vec_d" }, + { "name": "注记", "type": "tdt", "layer": "vec_z" } + ] + }, + { + "pid": 10, + "name": "高德影像", + "type": "group", + "icon": "img/basemaps/gaode_img.png", + "layers": [ + { "name": "底图", "type": "gaode", "layer": "img_d" }, + { "name": "注记", "type": "gaode", "layer": "img_z" } + ] + }, + { + "pid": 10, + "name": "高德电子", + "type": "gaode", + "icon": "img/basemaps/gaode_vec.png", + "layer": "vec" + }, + { + "pid": 10, + "name": "百度影像", + "type": "group", + "icon": "img/basemaps/bd-img.png", + "layers": [ + { "name": "底图", "type": "baidu", "layer": "img_d" }, + { "name": "注记", "type": "baidu", "layer": "img_z" } + ] + }, + { + "pid": 10, + "name": "百度电子", + "icon": "img/basemaps/bd-vec.png", + "type": "baidu", + "layer": "vec" + }, + { + "pid": 10, + "name": "腾讯影像", + "icon": "img/basemaps/tencent_img.png", + "type": "group", + "layers": [ + { "name": "底图", "type": "tencent", "layer": "img_d" }, + { "name": "注记", "type": "tencent", "layer": "img_z" } + ] + }, + { + "pid": 10, + "name": "腾讯电子", + "icon": "img/basemaps/tencent_vec.png", + "type": "tencent", + "layer": "vec" + }, + { + "pid": 10, + "name": "ArcGIS影像", + "icon": "img/basemaps/esriWorldImagery.png", + "type": "xyz", + "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", + "enablePickFeatures": false + }, + { + "pid": 10, + "name": "微软影像", + "icon": "img/basemaps/bingAerial.png", + "type": "bing", + "layer": "Aerial" + }, + { + "id": 2017, + "pid": 10, + "name": "暗色底图", + "type": "gaode", + "icon": "img/basemaps/blackMarble.png", + "layer": "vec", + "invertColor": true, + "filterColor": "#4e70a6", + "brightness": 0.6, + "contrast": 1.8, + "gamma": 0.3, + "hue": 1, + "saturation": 0 + }, + { + "pid": 10, + "name": "蓝色底图", + "icon": "img/basemaps/bd-c-midnight.png", + "type": "xyz", + "url": "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}", + "chinaCRS": "GCJ02", + "enablePickFeatures": false + }, + { + "pid": 10, + "name": "黑色底图", + "icon": "img/basemaps/bd-c-dark.png", + "type": "tencent", + "layer": "custom", + "style": "4" + }, + { + "pid": 10, + "name": "离线地图 (供参考)", + "type": "group", + "icon": "img/basemaps/google_img.png", + "layers": [ + { + "name": "全球", + "type": "xyz", + "url": "{dataServer}/tile/googleImg/{z}/{x}/{y}.jpg", + "minimumLevel": 0, + "maximumLevel": 9 + }, + { + "name": "中国", + "type": "xyz", + "url": "{dataServer}/tile/googleImg/{z}/{x}/{y}.jpg", + "minimumTerrainLevel": 10, + "minimumLevel": 10, + "maximumLevel": 12, + "rectangle": { "xmin": 69.706929, "xmax": 136.560941, "ymin": 15.831038, "ymax": 52.558005 } + }, + { + "name": "具体项目(如合肥)", + "type": "xyz", + "url": "{dataServer}/tile/googleImg/{z}/{x}/{y}.jpg", + "minimumTerrainLevel": 12, + "minimumLevel": 12, + "maximumLevel": 18, + "rectangle": { "xmin": 116.33236, "xmax": 118.183557, "ymin": 31.143784, "ymax": 32.565035 } + } + ] + }, + { + "pid": 10, + "name": "单张图片 (本地离线)", + "icon": "img/basemaps/offline.png", + "type": "image", + "url": "//data.mars3d.cn/file/img/world/world.jpg" + }, + { + "id": 2023, + "pid": 10, + "name": "无底图", + "icon": "/img/basemaps/null.png", + "type": "grid", + "color": "#ffffff", + "alpha": 0.03, + "cells": 2 + } + ], + "layers": [ + { "id": 50, "name": "辅助图层", "type": "group" }, + { "pid": 50, "type": "graticule", "name": "经纬网" }, + { + "pid": 50, + "name": "行政区划界线", + "type": "tdt", + "url": "https://t{s}.tianditu.gov.cn/mapservice/swdx?T=ibo_w&x={x}&y={y}&l={z}", + "maximumLevel": 10, + "mapSplit": false + }, + { + "pid": 50, + "name": "高德实时路况", + "type": "gaode", + "layer": "time", + "minimumTerrainLevel": 4, + "minimumLevel": 4, + "proxy": "//server.mars3d.cn/proxy/", + "mapSplit": false + }, + { + "pid": 50, + "name": "百度实时路况", + "type": "baidu", + "layer": "time", + "mapSplit": false + }, + + { "id": 60, "name": "地形", "type": "group" }, + { "pid": 60, "type": "terrain", "name": "Cesium地形", "terrain": { "type": "ion" }, "radio": true }, + { "pid": 60, "type": "terrain", "name": "Mars3D地形", "terrain": { "type": "xyz", "url": "{dataServer}/terrain" }, "radio": true }, + { + "pid": 60, + "type": "terrain", + "name": "ArcGIS地形", + "terrain": { "type": "arcgis", "url": "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer" }, + "radio": true + }, + { "pid": 60, "type": "terrain", "name": "无地形", "terrain": { "type": "none" }, "radio": true }, + + { "id": 40, "name": "栅格数据", "type": "group" }, + { "id": 4020, "pid": 40, "name": "OGC WMS服务", "type": "group" }, + { + "pid": 4020, + "name": "教育设施点", + "type": "wms", + "url": "//server.mars3d.cn/geoserver/mars/wms", + "layers": "mars:hfjy", + "crs": "EPSG:4326", + "parameters": { "transparent": "true", "format": "image/png" }, + "popup": "名称：{项目名称}
类型：{设施类型}
面积：{用地面积}亩
位置：{具体位置}", + "mapSplit": false, + "show": false, + "flyTo": true + }, + { + "pid": 4020, + "name": "道路线", + "type": "wms", + "url": "//server.mars3d.cn/geoserver/mars/wms", + "layers": "mars:hfdl", + "crs": "EPSG:4326", + "parameters": { "transparent": "true", "format": "image/png" }, + "center": { "lat": 31.743214, "lng": 117.277097, "alt": 47197.7, "heading": 0.3, "pitch": -78.8 }, + "popup": "all", + "mapSplit": false, + "show": false, + "flyTo": true + }, + { + "pid": 4020, + "name": "建筑物面", + "type": "wms", + "url": "//server.mars3d.cn/geoserver/mars/wms", + "layers": "mars:hfjzw", + "crs": "EPSG:4326", + "parameters": { "transparent": "true", "format": "image/png" }, + "highlight": { + "showTime": 5000, + "fill": true, + "color": "#2deaf7", + "opacity": 0.6, + "outline": true, + "outlineWidth": 3, + "outlineColor": "#e000d9", + "outlineOpacity": 1.0, + "clampToGround": true + }, + "center": { "lat": 31.79513, "lng": 117.236172, "alt": 3784.6, "heading": 0.7, "pitch": -42.2 }, + "popup": "all", + "show": false, + "flyTo": true + }, + { + "pid": 4020, + "name": "规划面", + "type": "wms", + "url": "//server.mars3d.cn/geoserver/mars/wms", + "layers": "mars:hfgh", + "crs": "EPSG:4326", + "parameters": { "transparent": "true", "format": "image/png" }, + "center": { "lat": 31.743214, "lng": 117.277097, "alt": 47197.7, "heading": 0.3, "pitch": -78.8 }, + "popup": "all", + "show": false, + "flyTo": true + }, + { "id": 4030, "pid": 40, "name": "ArcGIS 瓦片", "type": "group" }, + { + "pid": 4030, + "name": "合肥规划图", + "type": "arcgis_cache", + "url": "{dataServer}/arcgis_cache/hfgh/_alllayers/{z}/{y}/{x}.png", + "minimumLevel": 1, + "maximumLevel": 17, + "minimumTerrainLevel": 1, + "maximumTerrainLevel": 17, + "rectangle": { "xmin": 116.846, "xmax": 117.642, "ymin": 31.533, "ymax": 32.185 } + }, + { "id": 4010, "pid": 40, "name": "ArcGIS Dynamic", "type": "group" }, + { + "id": 401085, + "pid": 4010, + "type": "arcgis", + "name": "主要道路", + "url": "//server.mars3d.cn/arcgis/rest/services/mars/hefei/MapServer", + "layers": "24", + "highlight": { "type": "polyline", "color": "#2deaf7", "width": 4, "clampToGround": true }, + "center": { "lat": 31.814176, "lng": 117.225362, "alt": 5105.3, "heading": 359.2, "pitch": -83.1 }, + "popup": "all", + "onWidget": "layer-picture-heatmap", + "mapSplit": false + }, + { + "id": 401086, + "pid": 4010, + "type": "arcgis", + "name": "建筑物", + "url": "//server.mars3d.cn/arcgis/rest/services/mars/hefei/MapServer", + "layers": "35,36,37,39", + "highlight": { + "fill": true, + "color": "#2deaf7", + "opacity": 0.6, + "outline": true, + "outlineWidth": 3, + "outlineColor": "#e000d9", + "outlineOpacity": 1.0, + "clampToGround": true + }, + "center": { "lat": 31.816951, "lng": 117.22898, "alt": 2916.7, "heading": 0.3, "pitch": -78.8 }, + "popup": "名称：{NAME}
层数：{floor}", + "onWidget": "layer-picture-heatmap" + }, + { + "id": 401087, + "pid": 4010, + "type": "arcgis", + "name": "规划", + "url": "//server.mars3d.cn/arcgis/rest/services/mars/guihua/MapServer", + "highlight": { + "showTime": 5000, + "fill": true, + "color": "#2deaf7", + "opacity": 0.6, + "outline": true, + "outlineWidth": 3, + "outlineColor": "#e000d9", + "outlineOpacity": 1.0, + "clampToGround": true + }, + "center": { "lat": 31.816951, "lng": 117.22898, "alt": 2916.7, "heading": 0.3, "pitch": -78.8 }, + "popup": [ + { "field": "用地名称", "name": "名称" }, + { "field": "用地编号", "name": "编号" }, + { "field": "规划用地", "name": "规划" }, + { "type": "html", "html": "
数据仅供参考
" } + ], + "popupNoTitle": true, + "onWidget": "layer-picture-guihua" + }, + { "id": 30, "name": "矢量数据", "type": "group" }, + { "id": 3030, "pid": 30, "name": "GeoJSON数据", "type": "group" }, + { + "id": 303011, + "pid": 3030, + "type": "geojson", + "name": "平台标绘", + "url": "{dataServer}/file/geojson/mars3d-draw.json", + "popup": "{type}{name}", + "show": false, + "flyTo": true + }, + { + "pid": 3030, + "type": "geojson", + "name": "用地规划", + "url": "{dataServer}/file/geojson/guihua.json", + "symbol": { + "styleOptions": { "opacity": 0.6, "color": "#0000FF", "width": 3, "clampToGround": true }, + "styleField": "类型", + "styleFieldOptions": { + "一类居住用地": { "color": "#FFDF7F" }, + "二类居住用地": { "color": "#FFFF00" }, + "社区服务用地": { "color": "#FF6A38" }, + "幼托用地": { "color": "#FF6A38" }, + "商住混合用地": { "color": "#FF850A" }, + "行政办公用地": { "color": "#FF00FF" }, + "文化设施用地": { "color": "#FF00FF" }, + "小学用地": { "color": "#FF7FFF" }, + "初中用地": { "color": "#FF7FFF" }, + "体育场用地": { "color": "#00A57C" }, + "医院用地": { "color": "#A5527C" }, + "社会福利用地": { "color": "#FF7F9F" }, + "商业用地": { "color": "#FF0000" }, + "商务用地": { "color": "#7F0000" }, + "营业网点用地": { "color": "#FF7F7F" }, + "一类工业用地": { "color": "#A57C52" }, + "社会停车场用地": { "color": "#C0C0C0" }, + "通信用地": { "color": "#007CA5" }, + "排水用地": { "color": "#00BFFF" }, + "公园绿地": { "color": "#00FF00" }, + "防护绿地": { "color": "#007F00" }, + "河流水域": { "color": "#7FFFFF" }, + "配建停车场": { "color": "#ffffff" }, + "道路用地": { "color": "#ffffff" } + } + }, + "popup": "{类型}", + "show": false, + "flyTo": true + }, + { + "pid": 3030, + "type": "geojson", + "name": "建筑物面", + "url": "{dataServer}/file/geojson/buildings-demo.json", + "symbol": { "styleOptions": { "color": "#0d3685", "outlineColor": "#0d3685", "opacity": 0.8 } }, + "buildings": { "cloumn": "floors", "height": "flo_height" }, + "popup": "all", + "flyTo": true, + "flyToOptions": { "minHeight": 2000 } + }, + { + "pid": 3030, + "type": "geojson", + "name": "安徽各市", + "url": "{dataServer}/file/geojson/areas/340000_full.json", + "symbol": { + "type": "polygon", + "styleOptions": { + "materialType": "PolyGradient", + "materialOptions": { + "color": "rgb(15,176,255)", + "opacity": 0.7, + "alphaPower": 1.3 + }, + "label": { + "text": "{name}", + "opacity": 1, + "font_size": 25, + "color": "#ffffff", + "outline": true, + "outlineColor": "#000000", + "outlineWidth": 3, + "scaleByDistance": true, + "scaleByDistance_far": 2743804, + "scaleByDistance_farValue": 0.3, + "scaleByDistance_near": 10000, + "scaleByDistance_nearValue": 1, + "distanceDisplayCondition": true, + "distanceDisplayCondition_far": 2743804, + "distanceDisplayCondition_near": 0 + } + } + }, + "popup": "{name}", + "show": false, + "flyTo": true + }, + { + "pid": 3030, + "type": "geojson", + "name": "中国省界", + "url": "{dataServer}/file/geojson/areas/100000_full.json", + "symbol": { + "type": "polylineP", + "styleOptions": { + "color": "#ffffff", + "width": 2, + "opacity": 0.8, + "label": { + "text": "{name}", + "position": "center", + "font_size": 30, + "color": "#ffffff", + "outline": true, + "outlineColor": "#000000", + "scaleByDistance": true, + "scaleByDistance_far": 60000000, + "scaleByDistance_farValue": 0.2, + "scaleByDistance_near": 1000000, + "scaleByDistance_nearValue": 1, + "distanceDisplayCondition": true, + "distanceDisplayCondition_far": 12000000, + "distanceDisplayCondition_near": 0 + } + } + }, + "show": false, + "flyTo": true + }, + { + "pid": 3030, + "type": "geojson", + "name": "西藏垭口", + "url": "{dataServer}/file/geojson/xizangyakou.json", + "symbol": { + "styleOptions": { + "image": "img/marker/mark-red.png", + "scaleByDistance": true, + "scaleByDistance_far": 5000000, + "scaleByDistance_farValue": 0.5, + "scaleByDistance_near": 1000, + "scaleByDistance_nearValue": 1, + "verticalOrigin": 1, + "horizontalOrigin": 0, + "clampToGround": true, + "label": { + "text": "{NAME}", + "font_size": 25, + "color": "#ffff00", + "font_family": "微软雅黑", + "outline": true, + "outlineColor": "#000000", + "pixelOffsetY": -40, + "scaleByDistance": true, + "scaleByDistance_far": 1000000, + "scaleByDistance_farValue": 0.5, + "scaleByDistance_near": 1000, + "scaleByDistance_nearValue": 1, + "distanceDisplayCondition": true, + "distanceDisplayCondition_far": 1000000, + "distanceDisplayCondition_near": 0, + "visibleDepth": true + } + } + }, + "popup": [ + { "field": "NAME", "name": "名称" }, + { "type": "details", "callback": "showPopupDetails", "field": "图片", "className": "mars3d-popup-btn-custom" } + ], + "show": false, + "flyTo": true + }, + { + "pid": 3030, + "type": "geojson", + "name": "体育设施点", + "url": "{dataServer}/file/geojson/hfty-point.json", + "symbol": { + "styleOptions": { + "image": "img/marker/mark-red.png", + "scale": 1, + "scaleByDistance": true, + "scaleByDistance_far": 20000, + "scaleByDistance_farValue": 0.5, + "scaleByDistance_near": 1000, + "scaleByDistance_nearValue": 1, + "verticalOrigin": 1, + "horizontalOrigin": 0, + "clampToGround": true, + "label": { + "text": "{项目名称}", + "font_size": 25, + "color": "#ffffff", + "outline": true, + "outlineColor": "#000000", + "pixelOffsetY": -25, + "scaleByDistance": true, + "scaleByDistance_far": 80000, + "scaleByDistance_farValue": 0.5, + "scaleByDistance_near": 1000, + "scaleByDistance_nearValue": 1, + "distanceDisplayCondition": true, + "distanceDisplayCondition_far": 80000, + "distanceDisplayCondition_near": 0 + } + } + }, + "popup": [ + { "field": "项目名称", "name": "项目名称" }, + { "field": "建设性质", "name": "建设性质" }, + { "field": "设施级别", "name": "设施级别" }, + { "field": "所属区县", "name": "所属区县" }, + { "field": "建筑内容及", "name": "建筑内容" }, + { "field": "新增用地（", "name": "新增用地" }, + { "field": "开工", "name": "开工" }, + { "field": "总投资（万", "name": "总投资" }, + { "field": "资金来源", "name": "资金来源" }, + { "field": "初步选址", "name": "初步选址" }, + { "field": "设施类型", "name": "设施类型" }, + { "field": "设施等级", "name": "设施等级" }, + { "field": "所在区县", "name": "所在区县" }, + { "field": "具体位置", "name": "具体位置" }, + { "field": "建设内容（", "name": "建设内容" }, + { "field": "用地面积（", "name": "用地面积", "format": "mars3d.MeasureUtil.formatArea" }, + { "field": "设施规模（", "name": "设施规模" }, + { "field": "举办者类型", "name": "举办者类型" }, + { "field": "开工时间", "name": "开工时间" }, + { "field": "总投资额（", "name": "总投资额", "unit": "亿元" }, + { "field": "项目推进主", "name": "项目推进主体" }, + { "field": "项目进度", "name": "项目进度" }, + { "field": "项目来源", "name": "项目来源" }, + { "field": "备注", "name": "备注" } + ], + "show": false, + "flyTo": true + }, + { "id": 3070, "pid": 30, "name": "GeoServer WFS", "type": "group" }, + { + "pid": 3070, + "type": "wfs", + "name": "建筑物面", + "url": "//server.mars3d.cn/geoserver/mars/ows", + "layer": "mars:hfjzw", + "parameters": { "maxFeatures": 500 }, + "minimumLevel": 15, + "symbol": { + "type": "polygonP", + "styleOptions": { "color": "#00469c", "outline": false, "opacity": 1 } + }, + "buildings": { "cloumn": "floor" }, + "center": { "lat": 31.818396, "lng": 117.229083, "alt": 2554.4, "heading": 359.2, "pitch": -83.1 }, + "popup": "名称：{NAME}
层数：{floor}" + }, + { + "pid": 3070, + "name": "教育设施点", + "type": "wfs", + "url": "//server.mars3d.cn/geoserver/mars/ows", + "layer": "mars:hfjy", + "parameters": { "maxFeatures": 500 }, + "minimumLevel": 13, + "symbol": { + "type": "billboardP", + "styleOptions": { + "image": "img/marker/mark-red.png", + "scaleByDistance": true, + "scaleByDistance_far": 20000, + "scaleByDistance_farValue": 0.6, + "scaleByDistance_near": 1000, + "scaleByDistance_nearValue": 1, + "clampToGround": true, + "label": { + "text": "{项目名称}", + "font_size": 15, + "color": "#ffffff", + "outline": true, + "outlineColor": "#000000", + "pixelOffsetY": -30, + "distanceDisplayCondition": true, + "distanceDisplayCondition_far": 2000, + "distanceDisplayCondition_near": 0 + } + } + }, + "center": { "lat": 31.812256, "lng": 117.229873, "alt": 4683.91, "heading": 357.4, "pitch": -65.4 }, + "popup": "all" + }, + { "id": 3010, "pid": 30, "name": "ArcGIS WFS", "type": "group" }, + { + "pid": 3010, + "type": "arcgis_wfs", + "name": "兴趣点", + "url": "//server.mars3d.cn/arcgis/rest/services/mars/hefei/MapServer/1", + "where": " 1=1 ", + "minimumLevel": 15, + "center": { "lat": 31.818396, "lng": 117.229083, "alt": 2554.4, "heading": 359.2, "pitch": -83.1 }, + "symbol": { + "type": "billboardP", + "styleOptions": { + "image": "img/marker/mark-blue.png", + "scaleByDistance": true, + "scaleByDistance_far": 20000, + "scaleByDistance_farValue": 0.6, + "scaleByDistance_near": 1000, + "scaleByDistance_nearValue": 1, + "clampToGround": true, + "label": { + "text": "{NAME}", + "font_size": 15, + "color": "#ffffff", + "outline": true, + "outlineColor": "#000000", + "pixelOffsetY": -30, + "distanceDisplayCondition": true, + "distanceDisplayCondition_far": 3000, + "distanceDisplayCondition_near": 0 + } + }, + "styleField": "address", + "styleFieldOptions": { + "AB03": { "image": "img/marker/mark-red.png" }, + "A980": { "image": "img/marker/mark-blue.png" }, + "A900": { "image": "img/marker/mark-green.png" } + } + }, + "popup": "名称：{NAME}
地址：{address}", + "show": false + }, + { + "pid": 3010, + "type": "arcgis_wfs", + "name": "道路", + "url": "//server.mars3d.cn/arcgis/rest/services/mars/hefei/MapServer/28", + "minimumLevel": 14, + "symbol": { + "type": "polylineP", + "styleOptions": { "color": "#3388ff", "width": 3, "clampToGround": true }, + "styleField": "NAME", + "styleFieldOptions": { + "祁门路": { "color": "#8744c0", "width": 3 }, + "东流路": { "color": "#f7ba2a", "width": 3 }, + "翡翠路": { "color": "#20a0ff", "width": 3 }, + "岳西路": { "color": "#50bfff", "width": 3 } + } + }, + "popup": "名称：{NAME}", + "center": { "lat": 31.814176, "lng": 117.225362, "alt": 5105.3, "heading": 359.2, "pitch": -83.1 } + }, + { + "pid": 3010, + "type": "arcgis_wfs", + "name": "建筑物面", + "url": "//server.mars3d.cn/arcgis/rest/services/mars/hefei/MapServer/37", + "minimumLevel": 15, + "symbol": { "styleOptions": { "color": "#0d3685", "outlineColor": "#0d3685", "opacity": 0.8 } }, + "buildings": { "cloumn": "floor" }, + "debuggerTileInfo": false, + "center": { "lat": 31.816951, "lng": 117.22898, "alt": 1916.7, "heading": 0.3, "pitch": -78.8 }, + "popup": "名称：{NAME}
层数：{floor}" + }, + { "id": 3060, "pid": 30, "name": "CZML数据", "type": "group" }, + { + "id": 306010, + "pid": 3060, + "type": "czml", + "name": "汽车", + "url": "{dataServer}/file/czml/car.czml", + "center": { "lat": 40.894745, "lng": 121.920252, "alt": 904, "heading": 64, "pitch": -67 }, + "onWidget": "control-clock", + "radio": true, + "flyTo": true + }, + { + "id": 306011, + "pid": 3060, + "type": "czml", + "name": "卫星轨道", + "url": "{dataServer}/file/czml/satellite-simple.czml", + "popup": "all", + "onWidget": "control-clock", + "radio": true, + "flyTo": true + }, + { "id": 3050, "pid": 30, "name": "KML数据", "type": "group" }, + { "pid": 3050, "type": "kml", "name": "海上安全警告", "url": "{dataServer}/file/kml/NAVWARN.kmz", "popup": "all" }, + { + "pid": 3050, + "type": "kml", + "name": "国境线", + "url": "{dataServer}/file/kml/countryboundary.kml", + "symbol": { "styleOptions": { "color": "#FED976", "width": 2 } } + }, + { + "pid": 3050, + "type": "kml", + "name": "省界线", + "url": "{dataServer}/file/kml/province.kml", + "symbol": { "styleOptions": { "color": "#00FF00", "width": 2 } } + }, + { "id": 20, "name": "三维模型", "type": "group" }, + { "id": 2010, "pid": 20, "name": "gltf模型", "type": "group" }, + { + "pid": 2010, + "type": "graphic", + "name": "风力发电机", + "data": [ + { + "type": "modelP", + "position": [117.219071, 31.828783, 39.87], + "style": { + "url": "//data.mars3d.cn/gltf/mars/fengche.gltf", + "scale": 50, + "heading": -93 + } + } + ], + "popup": "示例信息，这是一个风力发电机", + "center": { "lat": 31.821083, "lng": 117.21832, "alt": 832.64, "heading": 2.3, "pitch": -39.2 } + }, + { + "pid": 2010, + "type": "graphic", + "name": "警车", + "data": [ + { + "type": "modelP", + "position": [117.217458, 31.815349, 35.03], + "style": { + "url": "//data.mars3d.cn/gltf/mars/jingche/jingche.gltf", + "scale": 2, + "heading": -95, + "clampToGround": true + } + } + ], + "center": { "lat": 31.815363, "lng": 117.215958, "alt": 107.35, "heading": 90.7, "pitch": -26.1 } + }, + { "id": 2040, "pid": 20, "name": "城市白模", "type": "group" }, + { + "id": 204011, + "pid": 2040, + "type": "3dtiles", + "name": "合肥市区", + "url": "{dataServer}/3dtiles/jzw-hefei/tileset.json", + "maximumScreenSpaceError": 1, + "maximumMemoryUsage": 1024, + "marsJzwStyle": true, + "highlight": { "type": "click", "color": "#FFFF00" }, + "popup": [ + { "field": "objectid", "name": "编号" }, + { "field": "name", "name": "名称" }, + { "field": "height", "name": "楼高", "unit": "米" } + ], + "center": { "lat": 31.786281, "lng": 117.223716, "alt": 3718, "heading": 2, "pitch": -45 } + }, + { + "id": 204012, + "pid": 2040, + "type": "3dtiles", + "name": "上海市区", + "url": "{dataServer}/3dtiles/jzw-shanghai/tileset.json", + "maximumScreenSpaceError": 4, + "maximumMemoryUsage": 1024, + "style": { + "color": { + "conditions": [ + ["${floor} >= 200", "rgba(45, 0, 75, 0.5)"], + ["${floor} >= 100", "rgb(170, 162, 204)"], + ["${floor} >= 50", "rgb(224, 226, 238)"], + ["${floor} >= 25", "rgb(252, 230, 200)"], + ["${floor} >= 10", "rgb(248, 176, 87)"], + ["${floor} >= 5", "rgb(198, 106, 11)"], + ["true", "rgb(127, 59, 8)"] + ] + } + }, + "highlight": { "type": "click", "color": "#FFFF00" }, + "popup": [ + { "field": "name", "name": "名称" }, + { "field": "floor", "name": "楼层" } + ], + "center": { "lat": 31.257341, "lng": 121.466139, "alt": 2170.8, "heading": 122.2, "pitch": -31.8 } + }, + + { "id": 2050, "pid": 20, "name": "点云", "type": "group" }, + { + "id": 202016, + "pid": 2050, + "type": "3dtiles", + "name": "高压线塔杆", + "url": "//data.mars3d.cn/3dtiles/pnts-ganta/tileset.json", + "maximumScreenSpaceError": 1, + "position": { "alt": 31 }, + "style": { + "color": { + "conditions": [ + ["(${Classification} >= 4) && (${Classification} < 5) ", "color('#DC143C')"], + ["(${Classification} >= 7) && (${Classification} < 8) ", "color('#7B68EE')"], + ["(${Classification} >= 16) && (${Classification} < 17) ", "color('#00CED1')"], + ["(${Classification} >= 17) && (${Classification} < 18) ", "color('#3CB371')"], + ["(${Classification} >= 18) && (${Classification} < 19) ", "color('#FFFF00')"], + ["(${Classification} >= 19) && (${Classification} < 20) ", "color('#FFA500')"], + ["(${Classification} >= 20) && (${Classification} < 21) ", "color('#FF6347')"] + ] + } + }, + "hasOpacity": false, + "center": { "lat": 31.504746, "lng": 118.264278, "alt": 580, "heading": 29, "pitch": -49 } + }, + { "id": 2060, "pid": 20, "name": "BIM模型", "type": "group" }, + { + "id": 20601121, + "pid": 2060, + "type": "3dtiles", + "name": "大学教学楼", + "url": "{dataServer}/3dtiles/bim-daxue/tileset.json", + "position": { "lng": 117.251229, "lat": 31.844015, "alt": 31.2 }, + "highlight": { "type": "click", "color": "#FFFF00" }, + "popup": "all", + "scenetree": "scenetree.json", + "center": { "lat": 31.842516, "lng": 117.25107, "alt": 145, "heading": 8, "pitch": -39 } + }, + { + "pid": 2060, + "type": "3dtiles", + "name": "轻轨地铁站", + "url": "{dataServer}/3dtiles/bim-ditiezhan/tileset.json", + "position": { "lng": 117.203994, "lat": 31.857999, "alt": 28.9 }, + "rotation": { "z": 168.1 }, + "highlight": { "type": "click", "color": "#00FF00" }, + "popup": "all", + "scenetree": "scenetree.json", + "center": { "lat": 31.856125, "lng": 117.204513, "alt": 155, "heading": 350, "pitch": -31 } + }, + { + "id": 206012, + "pid": 2060, + "type": "3dtiles", + "name": "桥梁", + "url": "{dataServer}/3dtiles/bim-qiaoliang/tileset.json", + "position": { "lng": 117.096906, "lat": 31.851564, "alt": 45 }, + "rotation": { "z": 17.5 }, + "maximumScreenSpaceError": 16, + "maximumMemoryUsage": 1024, + "skipLevelOfDetail": true, + "loadSiblings": true, + "cullRequestsWhileMoving": true, + "cullRequestsWhileMovingMultiplier": 10, + "preferLeaves": true, + "progressiveResolutionHeightFraction": 0.5, + "dynamicScreenSpaceError": true, + "preloadWhenHidden": true, + "center": { "lat": 31.849357, "lng": 117.099194, "alt": 306.2, "heading": 327.1, "pitch": -30.9 }, + "scenetree": "scenetree.json", + "highlight": { "type": "click", "color": "#00FF00" }, + "popup": "all" + }, + { "id": 2020, "pid": 20, "name": "人工建模", "type": "group" }, + { + "id": 202013, + "pid": 2020, + "type": "3dtiles", + "name": "地下管网", + "url": "{dataServer}/3dtiles/max-piping/tileset.json", + "position": { "lng": 117.215457, "lat": 31.843363, "alt": -3.6 }, + "rotation": { "z": 336.7 }, + "maximumScreenSpaceError": 2, + "maximumMemoryUsage": 1024, + "highlight": { "type": "click", "color": "#00FF00" }, + "popup": "all", + "center": { "lat": 31.838821, "lng": 117.216402, "alt": 461, "heading": 0, "pitch": -46 }, + "msg": "演示数据，地下数据拖动时会在地面漂移" + }, + { + "id": 202012, + "pid": 2020, + "type": "3dtiles", + "name": "石化工厂", + "url": "{dataServer}/3dtiles/max-shihua/tileset.json", + "position": { "lng": 117.077158, "lat": 31.659116, "alt": 24.6 }, + "maximumScreenSpaceError": 1, + "maximumMemoryUsage": 1024, + "highlight": { "type": "click", "color": "#00FF00" }, + "popup": "all", + "scenetree": "scenetree.json", + "center": { "lat": 31.654916, "lng": 117.08278, "alt": 279, "heading": 316, "pitch": -29 } + }, + { + "id": 202030, + "pid": 2020, + "name": "水利闸门", + "type": "group", + "center": { "lat": 29.794301, "lng": 121.47998, "alt": 262, "heading": 191, "pitch": -35 } + }, + { + "pid": 202030, + "name": "闸门", + "type": "graphic", + "data": [ + { + "type": "modelP", + "position": [121.479813, 29.791278, 16], + "style": { + "url": "//data.mars3d.cn/gltf/mars/zhamen.glb", + "heading": 105 + } + } + ], + "center": { "lat": 29.791607, "lng": 121.479925, "alt": 27, "heading": 198, "pitch": -18 } + }, + { + "id": 202011, + "pid": 202030, + "type": "3dtiles", + "name": "整体", + "url": "{dataServer}/3dtiles/max-fsdzm/tileset.json", + "position": { "alt": 15.2 }, + "maximumScreenSpaceError": 1, + "maximumMemoryUsage": 1024, + "center": { "lat": 29.792675, "lng": 121.480207, "alt": 190.8, "heading": 196.1, "pitch": -49 } + }, + { "id": 2030, "pid": 20, "name": "倾斜摄影", "type": "group" }, + { + "id": 203014, + "pid": 2030, + "type": "3dtiles", + "name": "县城社区", + "url": "{dataServer}/3dtiles/qx-shequ/tileset.json", + "position": { "alt": 11.5 }, + "maximumScreenSpaceError": 2, + "maximumMemoryUsage": 2048, + "dynamicScreenSpaceError": true, + "cullWithChildrenBounds": false, + "center": { "lat": 28.440864, "lng": 119.486477, "alt": 588.23, "heading": 268.6, "pitch": -37.8 }, + "show": false, + "flyTo": false + }, + { + "id": 203015, + "pid": 2030, + "name": "合肥天鹅湖", + "type": "3dtiles", + "url": "{dataServer}/3dtiles/qx-teh/tileset.json", + "position": { "lng": 117.218434, "lat": 31.81807, "alt": 163 }, + "maximumScreenSpaceError": 16, + "maximumMemoryUsage": 1024, + "dynamicScreenSpaceError": true, + "cullWithChildrenBounds": false, + "skipLevelOfDetail": true, + "preferLeaves": true, + "center": { "lat": 31.795308, "lng": 117.21948, "alt": 1820, "heading": 0, "pitch": -39 } + }, + { + "pid": 2030, + "type": "3dtiles", + "name": "大雁塔", + "url": "{dataServer}/3dtiles/qx-dyt/tileset.json", + "position": { "alt": -27 }, + "maximumScreenSpaceError": 1, + "maximumMemoryUsage": 1024, + "center": { "lat": 34.215516, "lng": 108.960251, "alt": 834, "heading": 4, "pitch": -48 }, + "flat": { + "enabled": true, + "editHeight": 420 + }, + "flyTo": false, + "show": false + }, + { + "id": 203013, + "pid": 2030, + "type": "geojson", + "name": "文庙-单体化", + "url": " {dataServer}/file/geojson/dth-wm.json", + "symbol": { + "type": "polygonP", + "styleOptions": { + "color": "rgba(255, 255, 255, 0.01)", + "clampToGround": true, + "classification": true, + "buffer": 1, + "highlight": { + "color": "rgba(255,255,0,0.5)" + } + } + }, + "popup": [ + { "field": "name", "name": "房屋名称" }, + { "field": "jznf", "name": "建造年份" }, + { "field": "ssdw", "name": "所属单位" }, + { "field": "remark", "name": "备注信息" } + ] + }, + { + "id": 203012, + "pid": 2030, + "type": "3dtiles", + "name": "文庙", + "url": "{dataServer}/3dtiles/qx-simiao/tileset.json", + "position": { "alt": 80.6 }, + "maximumScreenSpaceError": 2, + "maximumMemoryUsage": 2048, + "dynamicScreenSpaceError": true, + "cullWithChildrenBounds": false, + "skipLevelOfDetail": true, + "preferLeaves": true, + "center": { "lat": 33.589536, "lng": 119.032216, "alt": 145.08, "heading": 3.1, "pitch": -22.9 } + }, + { "id": 99, "name": "数据图层", "type": "group" } + ] + } +} diff --git a/src/locales/lang/zh-CN/routes/demo.json b/src/locales/lang/zh-CN/routes/demo.json index aec4378..ea80500 100644 --- a/src/locales/lang/zh-CN/routes/demo.json +++ b/src/locales/lang/zh-CN/routes/demo.json @@ -6,7 +6,8 @@ "charts": "图表", "map": "地图", "line": "折线图", - "pie": "饼图" + "pie": "饼图", + "mars3d":"mars3d" }, "comp": { "comp": "组件", diff --git a/src/main.ts b/src/main.ts index 1c4c808..ed3e1ae 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,3 +1,11 @@ +/* + * @Author: 刘妍 + * @Date: 2024-01-13 13:04:15 + * @LastEditors: Do not edit + * @LastEditTime: 2024-01-16 14:25:41 + * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\main.ts + * @Description: + */ import 'uno.css'; import '@/design/index.less'; import '@/components/VxeTable/src/css/index.scss'; @@ -18,6 +26,9 @@ import { setupStore } from '@/store'; import App from './App.vue'; +import "mars3d-cesium/Build/Cesium/Widgets/widgets.css" +import "mars3d/dist/mars3d.css" + async function bootstrap() { const app = createApp(App); diff --git a/src/mars/.editorconfig b/src/mars/.editorconfig new file mode 100644 index 0000000..f6d9322 --- /dev/null +++ b/src/mars/.editorconfig @@ -0,0 +1,21 @@ +root = true #表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件 + +# 匹配全部文件 +[*] +# 缩进风格，可选"space"、"tab" +indent_style = space +# 缩进的空格数 +indent_size = 2 +# 结尾换行符 +end_of_line = lf +# 设置字符集 +charset = utf-8 +# 删除一行中的前后空格 +trim_trailing_whitespace = true +# 在文件结尾插入新行 +insert_final_newline = true +max_line_length = 150 + +[*.md] +# 删除一行中的前后空格 +trim_trailing_whitespace = false diff --git a/src/mars/.eslintrc.js b/src/mars/.eslintrc.js new file mode 100644 index 0000000..6c50f27 --- /dev/null +++ b/src/mars/.eslintrc.js @@ -0,0 +1,78 @@ +module.exports = { + root: true, + env: { + node: true + }, + extends: ["plugin:vue/vue3-essential", "standard", "@vue/typescript/recommended"], + globals: { + defineProps: "readonly", + defineEmits: "readonly", + defineExpose: "readonly", + withDefaults: "readonly" + }, + rules: { + "@typescript-eslint/no-explicit-any": "off", // ts：允许用any + "@typescript-eslint/no-useless-constructor": "error", // ts：不允许使用未定位类型自动转为any + "@typescript-eslint/no-var-requires": "off", // ts：是否允许使用var + "@typescript-eslint/no-non-null-assertion": "off", // ts：非空赋值 + "@typescript-eslint/explicit-module-boundary-types": "off", // ts：是否需要显式定义函数将返回什么类型 + "@typescript-eslint/ban-ts-comment": "off", // ts： 禁止ts注释 + "@typescript-eslint/no-unused-vars": "off", // ts：允许定义未引用使用的变量 + "vue/multi-word-component-names": ["error", { ignores: ["index", "App"] }], // vue：多词组件名称 + "vue/comment-directive": ["off", { reportUnusedDisableDirectives: false }], // vue：允许在标签中写 HTML 注释。 + "vue/no-deprecated-slot-attribute": "off", // 允许使用slot + "vue/valid-v-slot": "off", + + camelcase: "off", // 强制驼峰命名规则 + indent: "off", // 强制一致的缩进风格 + eqeqeq: "error", // 是否使用 === 替代 == + quotes: ["error", "double", { avoidEscape: true, allowTemplateLiterals: true }], // 使用双引号 + curly: ["error", "all"], // 强制所有控制语句使用一致的括号风格 @fixable if 后面必须要有 {，除非是单行 if + + "padded-blocks": "off", // 块内行首行尾是否空行 + "global-require": "off", // require 必须在全局作用域下 + "comma-dangle": "error", // 强制在对象和数组文字中一致地使用尾随逗号 + "valid-jsdoc": "off", // 强制使用有效的 JSDoc 注释 + "consistent-return": "off", // 要求 return 语句要么总是指定返回的值，要么不指定 + "default-case": "off", // switch 语句强制 default 分支，也可添加 // no default 注释取消此次警告 + "block-scoped-var": "error", // 将 var 定义的变量视为块作用域，禁止在块外使用 + "guard-for-in": "off", // for in 内部必须有 hasOwnProperty + "constructor-super": "error", // constructor 中必须有 super + "dot-location": ["off", "property"], // @fixable 链式调用的时候，点号必须放在第二行开头处，禁止放在第一行结尾处 + "comma-style": ["error", "last"], // 控制逗号在行尾出现还是在行首出现 (默认行尾) + "space-before-function-paren": ["off", "always"], // 函数定义时括号前的空格 + "object-curly-newline": ["error", { multiline: true, consistent: true }], // @fixable 大括号内的首尾必须有换行 + "computed-property-spacing": ["error", "never"], // "SwitchCase" (默认：0) 强制 switch 语句中的 case 子句的缩进水平 + + "no-debugger": "warn", // 是否允许debugger + "no-console": "off", // 不允许出现console语句 + "no-var": "error", // @fixable 禁止使用 var + "no-trailing-spaces": "off", // 一行最后不允许有空格 + "no-prototype-builtins": "off", // 是否允许使用Object.prototype + "no-template-curly-in-string": "off", // 关闭${xxx}检测 + "no-mixed-spaces-and-tabs": "error", // 不允许混用tab和空格 + "no-new": "error", // 禁止在非赋值或条件语句中使用 new 操作符 + "no-new-wrappers": "error", // 禁止对 String，Number 和 Boolean 使用 new 操作符 + "no-self-assign": "error", // 禁止自我赋值 + "no-self-compare": "error", // 禁止自身比较 + "no-case-declarations": "error", // switch 的 case 内有变量定义的时候，必须使用大括号将 case 内变成一个代码块 + "no-extend-native": "error", // 禁止修改原生对象 + "no-extra-bind": "error", // @fixable 禁止出现没必要的 bind + "no-extra-label": "error", // @fixable 禁止出现没必要的 label + "no-fallthrough": "error", // switch 的 case 内必须有 break, return 或 throw + "no-floating-decimal": "error", // @fixable 表示小数时，禁止省略 0，比如 .5 + "no-global-assign": "error", // 禁止对全局变量赋值 + "no-multi-str": "error", // 禁止使用 \ 来换行字符串 + "no-const-assign": "error", // 禁止对使用 const 定义的常量重新赋值 + "no-dupe-class-members": "error", // 禁止重复定义类 + "no-duplicate-imports": "off", // 禁止重复 import 模块 + "no-useless-constructor": "off", // 禁止出现没必要的 constructor，比如 constructor(value) { super(value) } + "no-useless-escape": "off", // 可以使用\转义 + "no-callback-literal": "off", // 关闭eslint标准模式callback回调报错 + "no-dupe-keys": "error", // 禁止对象字面量中出现重复的 key + "no-func-assign": "error", // 禁止对 function 声明重新赋值 + "no-nested-ternary": "error", // 禁用嵌套的三元表达式 + "no-multiple-empty-lines": ["error", { max: 3 }], // 空行最多不能超过两行 + "new-cap": "off" // 关闭eslint fromDegrees方法报错 + } +} diff --git a/src/mars/.prettierrc b/src/mars/.prettierrc new file mode 100644 index 0000000..2204472 --- /dev/null +++ b/src/mars/.prettierrc @@ -0,0 +1,10 @@ +{ + "useTabs": false, + "eslintIntegration": true, + "singleQuote": false, + "semi": false, + "trailingComma": "none", + "bracketSpacing": true, + "printWidth": 150, + "arrowParens": "always" +} diff --git a/src/mars/common/store/test.ts b/src/mars/common/store/test.ts new file mode 100644 index 0000000..9984874 --- /dev/null +++ b/src/mars/common/store/test.ts @@ -0,0 +1,19 @@ +/** + * store 状态管理 + * @copyright 火星科技 mars3d.cn + * @author 火星渣渣灰 2022-02-19 + */ +import { Store, createStore } from "vuex" +import { InjectionKey } from "vue" + +export interface Test { + count?: number +} + +export const key: InjectionKey> = Symbol("test") + +export const store = createStore({ + state: { + count: 0 + } +}) diff --git a/src/mars/common/store/widget.ts b/src/mars/common/store/widget.ts new file mode 100644 index 0000000..79b4daf --- /dev/null +++ b/src/mars/common/store/widget.ts @@ -0,0 +1,299 @@ +/** + * store 状态管理 + * @copyright 火星科技 mars3d.cn + * @author 火星渣渣灰 2022-02-19 + */ +import { Store, StoreOptions, createStore, useStore } from "vuex" +import { InjectionKey, computed, nextTick, onUnmounted, inject } from "vue" +import { v4 as uuidV4 } from "uuid" + +// 为 store state 声明类型 +export interface DefaultOption { + autoDisable?: boolean + disableOther?: boolean | string[] + group?: string // group相同的widget一定是互斥的 + meta?: any // 额外参数 不会在每次关闭后清除 +} + +export interface Widget { + name: string // 唯一标识 + key?: string // 作为vue diff 环节的key，用于控制组件重载 + component?: any // widget关联的异步组件 + autoDisable?: boolean // 是否能够被自动关闭 + disableOther?: boolean | string[] // 是否自动关闭其他widget,或通过数组指定需要被关闭的widget + group?: string // group相同的widget一定是互斥的 + visible?: boolean // 显示隐藏 + data?: any // 额外传参 会在每次关闭后清除 + meta?: any // 额外参数 不会在每次关闭后清除 +} + +export interface WidgetState { + widgets: Widget[] // widget具体配置 + openAtStart: string[] // 默认加载的widget + defaultOption?: DefaultOption // 支持配置默认参数 +} + +export let key: InjectionKey> = Symbol("widget") + +/** + * 初始化状态 + * @param {StoreOptions} options + * @return {Store} 公共状态 + */ +export const injectState = (options: StoreOptions): Store => { + key = Symbol("widget") + if (typeof options.state === "function") { + options.state = (options.state() || {}) as WidgetState + } + const defaultOption = { + autoDisable: true, + disableOther: false, + ...options.state.defaultOption + } + const openAtStart = options.state?.openAtStart + if (!options) { + throw new Error("injectState 参数不能为空") + } else { + const widgets = options.state?.widgets.map((item) => { + return { + visible: openAtStart?.includes(item.name), + ...defaultOption, + ...item, + meta: { + ...defaultOption.meta, + ...item.meta + }, + key: uuidV4() + } + }) + options.state!.widgets = widgets! + } + return createStore({ + state: { + widgets: [], + openAtStart: [], + ...options.state, + defaultOption + }, + getters: { + ...options.getters + }, + mutations: { + addAlive(state, value: string) { + if (!state.openAtStart.includes(value)) { + state.openAtStart.push(value) + } + }, + ...options.mutations + }, + actions: { + activate({ commit, state, dispatch }, widget: any) { + const value = typeof widget === "string" ? widget : widget.name + + const pannel = state.widgets.find((item) => item.name === value) + if (!pannel) { + console.log("widget不存在", widget) + return + } + + if (pannel.visible && widget.reload) { + // 重载组件 + pannel.visible = false + pannel.key = uuidV4() + } + + nextTick(() => { + if (typeof widget === "object" && widget !== null && widget.data) { + pannel.data = widget.data + } + pannel.visible = true + }) + + // 处理其他面板的显示隐藏 + state.widgets.forEach((item) => { + if (pannel.name !== item.name) { + // 默认关闭同组 + if (pannel.group && item.group === pannel.group) { + item.visible = false + } + // 关闭非同组需要关闭的面板 + if (Array.isArray(pannel.disableOther)) { + pannel.disableOther.forEach((item: string) => { + dispatch("disable", item) + }) + } else if (pannel.disableOther && item.autoDisable) { + item.visible = false + } + } + }) + + if (!state.openAtStart.includes(value)) { + commit("addAlive", value) + } + }, + disable({ state }, widget: string) { + const value = widget + const pannel = state.widgets.find((item, i) => { + if (item.name === value) { + delete state.widgets[i].data + return true + } else { + return false + } + }) + // 显示面板 + if (pannel) { + pannel.visible = false + } + }, + disableAll({ state }, hasAll: boolean) { + state.widgets.forEach((item: Widget) => { + if (item.visible && (hasAll || item.autoDisable)) { + item.visible = false + } + }) + }, + ...options.actions + } + }) +} + +type EventCb = (...args: any[]) => void +class Event { + private _cache: Record = {} + // 绑定 + on(type: string, callback: EventCb) { + const fns = (this._cache[type] = this._cache[type] || []) + if (fns.indexOf(callback) === -1) { + fns.push(callback) + } + return this + } + + emit(type: string, ...args: any[]) { + const fns = this._cache[type] + if (Array.isArray(fns)) { + fns.forEach((fn) => { + fn(...args) + }) + } + return this + } + + off(type: string, callback: EventCb) { + const fns = this._cache[type] + if (Array.isArray(fns)) { + if (callback) { + const index = fns.indexOf(callback) + if (index !== -1) { + fns.splice(index, 1) + } + } else { + // 全部清空 + fns.length = 0 + } + } + return this + } +} +const widgetEvent = new Event() + +export function useWidgetStore() { + const store = useStore(key) + return store +} + +export function useWidget() { + const store = useStore(key) + + const getCurrentWidget = inject<() => string>("getCurrentWidget") + let currentWidget: any + if (getCurrentWidget) { + const widegtName = getCurrentWidget() + + currentWidget = { + ...store.state.widgets.find((item: any) => item.name === widegtName), + onUpdate(callback: EventCb) { + if (currentWidget) { + widgetEvent.on(currentWidget.name, callback) + } + onUnmounted(() => { + if (currentWidget) { + widgetEvent.off(currentWidget.name, callback) + } + }) + } + } + } + return { + currentWidget: currentWidget, + // 获取指定的widget + getWidget: (name: string) => { + const widget = store.state.widgets.find((item: any) => item.name === name) + if (!widget) { + return null + } + + return { + ...widget, + onUpdate(callback: EventCb) { + if (widget) { + widgetEvent.on(widget.name, callback) + } + onUnmounted(() => { + widgetEvent.off(widget.name, callback) + }) + } + } + }, + setVisible(name: string, visible: boolean) { + const widget = store.state.widgets.find((item: any) => item.name === name) + widget.visible = visible + }, + // 出发对应widget的onUpdate + updateWidget(name: string, ...args: any[]) { + widgetEvent.emit(name, ...args) + }, + // 获取widget的当前激活状态 + isActivate: (name: string) => { + const widget = store.state.widgets.find((item: any) => item.name === name) + return widget ? widget.visible : false + }, + // 激活指定 widget模块 + activate: (option: string | Widget | (string | Widget)[], reload = true) => { + let widgets: (string | Widget)[] = [] + if (!Array.isArray(option)) { + widgets.push(option) + } else { + widgets = option + } + console.log("widgets", widgets) + widgets.forEach((widget) => { + let params: any + if (typeof widget === "string") { + params = { reload, name: widget } + } else { + params = { reload, ...widget } + } + store.dispatch("activate", params) + }) + }, + // 释放指定的widget + disable: (option: string | string[]) => { + let widgets: (string | Widget)[] = [] + if (!Array.isArray(option)) { + widgets.push(option) + } else { + widgets = option + } + + widgets.forEach((widget) => { + store.dispatch("disable", widget) + }) + }, + // 关闭释放所有widget ，hasAll传true值强制释放所有widget(默认autoDisable为false的widet不会释放) + disableAll: (hasAll = false) => { + store.dispatch("disableAll", hasAll) + } + } +} diff --git a/src/mars/common/uses/use-lifecycle.ts b/src/mars/common/uses/use-lifecycle.ts new file mode 100644 index 0000000..f1c8841 --- /dev/null +++ b/src/mars/common/uses/use-lifecycle.ts @@ -0,0 +1,21 @@ +/** + * 组件中开启 map.ts 生命周期 + * @copyright 火星科技 mars3d.cn + * @author 火星渣渣灰 2022-02-19 + */ +import { inject, onBeforeMount, onBeforeUnmount } from "vue" + +export default function useLifecycle(mapWork: any): void { + const getMapInstance = inject("getMapInstance") + onBeforeMount(() => { + if (mapWork.onMounted) { + const map = getMapInstance() + mapWork.onMounted(map) + } + }) + onBeforeUnmount(() => { + if (mapWork.onUnmounted) { + mapWork.onUnmounted() + } + }) +} diff --git a/src/mars/components/mars-sample/fixedRoute-info.vue b/src/mars/components/mars-sample/fixedRoute-info.vue new file mode 100644 index 0000000..ae463eb --- /dev/null +++ b/src/mars/components/mars-sample/fixedRoute-info.vue @@ -0,0 +1,107 @@ + + + + diff --git a/src/mars/components/mars-sample/graphic-layer-state.vue b/src/mars/components/mars-sample/graphic-layer-state.vue new file mode 100644 index 0000000..1fac07d --- /dev/null +++ b/src/mars/components/mars-sample/graphic-layer-state.vue @@ -0,0 +1,877 @@ + + + + + diff --git a/src/mars/components/mars-sample/layer-state.vue b/src/mars/components/mars-sample/layer-state.vue new file mode 100644 index 0000000..3936079 --- /dev/null +++ b/src/mars/components/mars-sample/layer-state.vue @@ -0,0 +1,371 @@ + + + + diff --git a/src/mars/components/mars-sample/location-to.vue b/src/mars/components/mars-sample/location-to.vue new file mode 100644 index 0000000..15d7c98 --- /dev/null +++ b/src/mars/components/mars-sample/location-to.vue @@ -0,0 +1,60 @@ + + + + diff --git a/src/mars/components/mars-sample/tile-layer-state.vue b/src/mars/components/mars-sample/tile-layer-state.vue new file mode 100644 index 0000000..5a9b368 --- /dev/null +++ b/src/mars/components/mars-sample/tile-layer-state.vue @@ -0,0 +1,438 @@ + + + + + diff --git a/src/mars/components/mars-ui/assets/images/border-image-base.png b/src/mars/components/mars-ui/assets/images/border-image-base.png new file mode 100644 index 0000000..22787a2 Binary files /dev/null and b/src/mars/components/mars-ui/assets/images/border-image-base.png differ diff --git a/src/mars/components/mars-ui/assets/images/login/login-bg-color.png b/src/mars/components/mars-ui/assets/images/login/login-bg-color.png new file mode 100644 index 0000000..de5cd95 Binary files /dev/null and b/src/mars/components/mars-ui/assets/images/login/login-bg-color.png differ diff --git a/src/mars/components/mars-ui/assets/images/login/login-bg-earth.png b/src/mars/components/mars-ui/assets/images/login/login-bg-earth.png new file mode 100644 index 0000000..3a8fe28 Binary files /dev/null and b/src/mars/components/mars-ui/assets/images/login/login-bg-earth.png differ diff --git a/src/mars/components/mars-ui/assets/images/login/login-content-bg.png b/src/mars/components/mars-ui/assets/images/login/login-content-bg.png new file mode 100644 index 0000000..b7e7c77 Binary files /dev/null and b/src/mars/components/mars-ui/assets/images/login/login-content-bg.png differ diff --git a/src/mars/components/mars-ui/assets/images/login/login-content-footer.png b/src/mars/components/mars-ui/assets/images/login/login-content-footer.png new file mode 100644 index 0000000..4b74ea8 Binary files /dev/null and b/src/mars/components/mars-ui/assets/images/login/login-content-footer.png differ diff --git a/src/mars/components/mars-ui/assets/images/login/login-title-bg.png b/src/mars/components/mars-ui/assets/images/login/login-title-bg.png new file mode 100644 index 0000000..c37ae15 Binary files /dev/null and b/src/mars/components/mars-ui/assets/images/login/login-title-bg.png differ diff --git a/src/mars/components/mars-ui/assets/images/login/login-title-logo.png b/src/mars/components/mars-ui/assets/images/login/login-title-logo.png new file mode 100644 index 0000000..710e089 Binary files /dev/null and b/src/mars/components/mars-ui/assets/images/login/login-title-logo.png differ diff --git a/src/mars/components/mars-ui/assets/images/logo.png b/src/mars/components/mars-ui/assets/images/logo.png new file mode 100644 index 0000000..af952ab Binary files /dev/null and b/src/mars/components/mars-ui/assets/images/logo.png differ diff --git a/src/mars/components/mars-ui/assets/images/query-site-text_num.png b/src/mars/components/mars-ui/assets/images/query-site-text_num.png new file mode 100644 index 0000000..ef24abd Binary files /dev/null and b/src/mars/components/mars-ui/assets/images/query-site-text_num.png differ diff --git a/src/mars/components/mars-ui/assets/images/tab-title.png b/src/mars/components/mars-ui/assets/images/tab-title.png new file mode 100644 index 0000000..92ce649 Binary files /dev/null and b/src/mars/components/mars-ui/assets/images/tab-title.png differ diff --git a/src/mars/components/mars-ui/assets/images/zhyq/datails-title-bg.png b/src/mars/components/mars-ui/assets/images/zhyq/datails-title-bg.png new file mode 100644 index 0000000..0535d49 Binary files /dev/null and b/src/mars/components/mars-ui/assets/images/zhyq/datails-title-bg.png differ diff --git a/src/mars/components/mars-ui/assets/images/zhyq/echarts-title-bottom.png b/src/mars/components/mars-ui/assets/images/zhyq/echarts-title-bottom.png new file mode 100644 index 0000000..5d8955a Binary files /dev/null and b/src/mars/components/mars-ui/assets/images/zhyq/echarts-title-bottom.png differ diff --git a/src/mars/components/mars-ui/assets/images/zhyq/search-order.png b/src/mars/components/mars-ui/assets/images/zhyq/search-order.png new file mode 100644 index 0000000..a8e4d34 Binary files /dev/null and b/src/mars/components/mars-ui/assets/images/zhyq/search-order.png differ diff --git a/src/mars/components/mars-ui/base.less b/src/mars/components/mars-ui/base.less new file mode 100644 index 0000000..b3359d0 --- /dev/null +++ b/src/mars/components/mars-ui/base.less @@ -0,0 +1,489 @@ +// 提示组件背景 +.mars-msg-bg { + color: var(--mars-msg-title-color); + background: var(--mars-msg-content-bg); + background-size: 100% 100%; +} + +// 提示组件标题样式 +.mars-msg-title { + height: 41px; + line-height: 41px; + font-size: 18px; + padding-left: 13px; + color: var(--mars-alert-title-color); + background: var(--mars-msg-title-bg); + background-size: 10px 44px; + &::before { + content: ""; + display: block; + width: 50px; + height: 35px; + position: absolute; + left: 0px; + top: 0; + border-top: 1px solid var(--mars-primary-color); + border-left: 1px solid var(--mars-primary-color); + } + &::after { + content: ""; + display: block; + width: 70px; + position: absolute; + right: 0; + top: 0; + border-top: 1px solid var(--mars-primary-color); + } +} + +// 下拉样式 +.mars-drop-bg { + border-bottom: 1px solid #008aff70; + border-left: 1px solid #008aff70; + border-right: 1px solid #008aff70; + box-shadow: 0px 4px 15px 1px rgba(2, 33, 59, 0.7); + border-radius: 0px; + background: linear-gradient(to left, var(--mars-base-color), var(--mars-base-color)) left bottom no-repeat, + linear-gradient(to bottom, var(--mars-base-color), var(--mars-base-color)) left bottom no-repeat, + linear-gradient(to left, var(--mars-base-color), var(--mars-base-color)) right bottom no-repeat, + linear-gradient(to left, var(--mars-base-color), var(--mars-base-color)) right bottom no-repeat; + background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px; + background-color: var(--mars-bg-base); +} + +.mars-hover-bg { + // background: var(--mars-title-active); + background-color: var(--mars-select-bg); + background-repeat: no-repeat; + background-size: 100% 100%; +} + +.mars-main-view { + color: var(--mars-text-color); + + // collapse 折叠面板相关样式 + .ant-collapse, + .ant-collapse-item, + .ant-collapse-content { + background: none !important; + border: none; + } + + .ant-collapse-content-box { + padding: 5px 5px 10px 5px; + } + + .ant-collapse-header { + background: var(--mars-collapse-title-bg); + margin-bottom: 10px; + background-size: 100% 100%; + background-repeat: no-repeat; + font-size: 18px; + padding: 5px 15px !important; + color: #fff !important; + } + + .ant-collapse-content { + color: var(--mars-base-color) !important; + } + + .ant-collapse-extra { + .mars-icon { + font-size: 16px; + line-height: 16px; + vertical-align: middle; + } + } + + // 切换按钮 + .ant-radio-button-wrapper { + background: rgba(32, 160, 255, 0.2); + color: #ffffff; + box-shadow: none !important; + } + + // 选中按钮 + .ant-radio-button-checked { + background-color: #1890ff; + } + + // 表单元素 + .ant-form { + color: rgba(255, 255, 255, 0.925); + + .ant-form-item-extra { + color: var(--mars-text-color); + } + } + + .ant-form-item { + margin-bottom: 10px !important; + color: var(--mars-text-color); + + .ant-form-item-label > label { + font-size: 16px; + color: var(--mars-sub-title-color); + } + } + + .ant-form-item:nth-last-child(1) { + margin-bottom: 0 !important; + } + + /* 卡片 */ + .mars-ant-card { + background: none; + border: 1px solid var(--mars-base-border-color); + color: var(--mars-text-color); + + .ant-card-head { + border-color: var(--mars-base-border-color); + min-height: auto; + padding: 0 10px; + color: var(--mars-text-color); + + .ant-card-head-title { + padding: 8px 0; + } + } + + .ant-card-body { + padding: 10px; + } + } + + // 文件选择 + .ant-upload { + color: var(--mars-text-color); + } + + // 多选 + .ant-checkbox-wrapper { + color: var(--mars-text-color); + + .ant-checkbox-inner { + background-color: var(--mars-bg-base); + border-color: var(--mars-base-border-color); + } + + .ant-checkbox-checked { + background: var(--mars-primary-color); + + .ant-checkbox-inner { + background-color: var(--mars-primary-color); + border-color: var(--mars-primary-color); + } + } + } + + // 单选 + .ant-radio-wrapper { + color: var(--mars-text-color); + + .ant-radio-inner { + background-color: var(--mars-bg-base); + border-color: var(--mars-base-border-color); + box-shadow: none !important; + outline: none !important; + } + + .ant-radio-checked { + .ant-radio-inner { + border-color: var(--mars-primary-color); + } + } + + .ant-radio-input { + box-shadow: none !important; + outline: none !important; + } + } + + // 表格 + .ant-table, + .ant-table-thead > tr > th { + color: var(--mars-sub-title-color); + background: none !important; + } + + .ant-table-sticky-holder { + background: none; + } + + .ant-table-row:nth-of-type(even) { + background-color: var(--mars-bg-base); + } + .ant-table-row:nth-of-type(odd) { + background-color: var(--mars-odd-table-bg); + } + + .ant-table .ant-table-thead { + background-color: var(--mars-select-bg); + } + + .ant-table-tbody > tr.ant-table-placeholder > td { + background: #141414; + } + + .ant-table-row:hover > td, + .ant-table-row-selected > td { + background-color: transparent !important; + } + + .ant-table-cell { + font-size: 16px; + color: var(--mars-text-color); + border: none !important; + background: transparent !important; + } + + .ant-table-container { + border: 1px solid var(--mars-primary-color) !important; + background: transparent !important; + } + + .ant-table-placeholder > td { + background: var(--mars-bg-base) !important; + } + + .ant-table-row:nth-last-child(1) .ant-table-cell { + border-bottom: none; + } + + .ant-cascader-dropdown { + padding: 0 !important; + .mars-drop-bg(); + + .ant-cascader-menu-item { + color: var(--mars-text-color); + &:hover { + background: var(--mars-list-active); + } + } + + .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) { + background: var(--mars-list-active); + } + + .ant-cascader-menu-item-expand-icon { + color: var(--mars-text-color); + } + } + + // 标签页的标签文字颜色 + .ant-tabs-tab { + color: var(--mars-text-color); + } + + // 分页 + .ant-pagination { + * { + color: var(--mars-text-color) !important; + } + + .ant-pagination-item, + .ant-pagination-prev, + .ant-pagination-next { + background: none; + background-color: transparent !important; + } + + .ant-pagination-simple-pager { + input { + background: none; + background-color: transparent !important; + } + } + + .ant-select { + color: var(--mars-text-color); + background-color: transparent !important; + background: none; + + .ant-select-selector { + border-color: var(--mars-base-border-color) !important; + background: none; + background-color: transparent !important; + + &:hover, + &:focus { + border-color: #4db3ff !important; + } + } + + .ant-select-arrow { + color: var(--mars-base-color) !important; + } + } + + .ant-select-dropdown { + padding: 0 !important; + .mars-drop-bg(); + + .ant-select-item-option-active:not(.ant-select-item-option-disabled) { + background: var(--mars-list-active); + } + + .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { + font-weight: 700; + background: var(--mars-list-active); + } + + .ant-select-item { + transition: none; + color: var(--mars-base-color) !important; + text-align: center; + } + } + } + + // 列表 + .ant-list-items { + * { + color: var(--mars-text-color); + } + + .ant-list-item { + border-bottom: 1px solid #303030; + } + + .ant-list-item-meta-description { + color: hsla(0, 0%, 100%, 0.45); + } + } + + // 分割线 + .ant-divider-vertical { + border-color: var(--mars-text-color); + } + + //table表格滚动条 + .ant-table-body { + &::-webkit-scrollbar { + //整体样式 + height: 0; + width: 0; + } + } + + .ant-tabs { + width: 100%; + .ant-tabs-nav { + margin-top: 0; + &::before { + border-color: var(--mars-base-border-color); + } + } + .ant-tabs-tab { + color: var(--mars-base-color) !important; + } + + .ant-tabs-nav-wrap { + line-height: 1; + } + &.ant-tabs-card { + .ant-tabs-nav .ant-tabs-tab-active { + background: #20a0ff33 !important; + } + .ant-tabs-tab { + background: #20a0ff33 !important; + border-color: var(--mars-base-border-color); + } + } + .ant-tabs-tab-active { + border-top: none !important; + } + } +} + +.mars-cascader-dropdown { + padding: 0 !important; + background-color: var(--mars-select-bg) !important; + .mars-drop-bg(); + + .ant-cascader-menu-item { + color: var(--mars-text-color); + &:hover { + background: var(--mars-list-active); + } + } + + .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) { + background: var(--mars-list-active); + } + + .ant-cascader-menu-item-expand-icon { + color: var(--mars-text-color); + } +} + +// 下拉选择 +.mars-select-dropdown { + padding: 0 !important; + color: var(--mars-text-color) !important; + .mars-drop-bg(); + + .ant-select-item-option-active:not(.ant-select-item-option-disabled) { + background: var(--mars-list-active); + } + .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { + font-weight: 700; + background: var(--mars-list-active); + } + .ant-select-item { + transition: none; + color: var(--mars-text-color) !important; + text-align: center; + } + + .ant-cascader-menu-item { + color: var(--mars-text-color); + &:hover { + background: var(--mars-list-active); + } + } + + .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) { + background: var(--mars-list-active); + } + + .ant-cascader-menu-item-expand-icon { + color: var(--mars-text-color); + } +} + +// 滚动条 +::-webkit-scrollbar-button { + height: 0; + width: 0; + display: none; +} + +::-webkit-scrollbar-track { + background: var(--mars-scrollbar-track); +} + +::-webkit-scrollbar-track, +::-webkit-scrollbar-thumb { + border: 0; +} + +::-webkit-scrollbar { + height: 10px; + width: 4px; + background: var(--mars-scrollbar-thumb); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb { + padding-top: 100px; + background-color: var(--mars-scrollbar-thumb); + min-height: 28px; + border-radius: 4px; + background-clip: padding-box; +} + +::-webkit-scrollbar-track, +::-webkit-scrollbar-thumb { + border: 0; +} diff --git a/src/mars/components/mars-ui/common.ts b/src/mars/components/mars-ui/common.ts new file mode 100644 index 0000000..36d8704 --- /dev/null +++ b/src/mars/components/mars-ui/common.ts @@ -0,0 +1,2 @@ +const doc = document.documentElement +doc.dataset.theme = "dark" diff --git a/src/mars/components/mars-ui/function.less b/src/mars/components/mars-ui/function.less new file mode 100644 index 0000000..fa347be --- /dev/null +++ b/src/mars/components/mars-ui/function.less @@ -0,0 +1,440 @@ +/** + * 通用 class + * + * @copyright 火星科技 mars3d.cn + * @author 火星渣渣灰 2022-01-01 + */ + +.w-full { + width: 100%; +} + +.f-pt { + padding-top: 10px; +} + +.f-mt { + margin-top: 10px; +} + +.f-mb { + margin-bottom: 10px; +} + +.f-ml { + margin-left: 5px; +} + +.f-mr { + margin-right: 5px; +} + +.f-ib { + display: inline-block; +} + +.f-cb:after, +.f-cbli li:after { + display: block; + clear: both; + visibility: hidden; + height: 0; + overflow: hidden; + content: "."; +} + +.f-cb, +.f-cbli li { + zoom: 1; +} + +.f-dn { + display: none; +} + +.f-db { + display: block; +} + +.f-fl { + float: left; +} + +.f-fr { + float: right; +} + +.f-pr { + position: relative; +} + +.f-prz { + position: relative; + zoom: 1; +} + +.f-oh { + overflow: hidden; +} + +.f-ff0 { + font-family: arial, \5b8b\4f53; +} + +.f-ff1 { + font-family: "Microsoft YaHei", \5fae\8f6f\96c5\9ed1, arial, \5b8b\4f53; +} + +.f-fs12 { + font-size: 12px; +} + +.f-fs14 { + font-size: 14px; +} + +.f-fs16 { + font-size: 16px; +} + +.f-fs18 { + font-size: 18px; +} + +.f-fwn { + font-weight: normal; +} + +.f-fwb { + font-weight: bold; +} + +.f-tal { + text-align: left; +} + +.f-tac { + text-align: center; +} + +.f-tar { + text-align: right; +} + +.f-taj { + text-align: justify; + text-justify: inter-ideograph; +} + +.f-vam, +.f-vama * { + vertical-align: middle; +} + +.f-wsn { + word-wrap: normal; + white-space: nowrap; +} + +.f-pre { + overflow: hidden; + text-align: left; + white-space: pre-wrap; + word-wrap: break-word; + word-break: break-all; +} + +.f-wwb { + white-space: normal; + word-wrap: break-word; + word-break: break-all; +} + +.f-ti { + overflow: hidden; + text-indent: -30000px; +} + +.f-ti2 { + text-indent: 2em; +} + +.f-lhn { + line-height: normal; +} + +.f-tdu, +.f-tdu:hover { + text-decoration: underline; +} + +.f-tdn, +.f-tdn:hover { + text-decoration: none; +} + +.f-toe { + overflow: hidden; + word-wrap: normal; + white-space: nowrap; + text-overflow: ellipsis; +} + +.f-csp { + cursor: pointer; +} + +.f-csd { + cursor: default; +} + +.f-csh { + cursor: help; +} + +.f-csm { + cursor: move; +} + +.f-usn { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +.f-push-5-b { + margin-bottom: 5px !important; +} + +.f-push-5-t { + margin-top: 5px !important; +} + +.f-push-5-r { + margin-right: 5px !important; +} + +.f-push-5-l { + margin-left: 5px !important; +} + +.f-push-10-b { + margin-bottom: 10px !important; +} + +.f-push-10-t { + color: var(--mars-text-color); + margin-top: 10px !important; +} + +.f-push-10-r { + margin-right: 10px !important; +} + +.f-push-10-l { + margin-left: 10px !important; +} + +.f-push-15-b { + margin-bottom: 15px !important; +} + +.f-push-15-t { + margin-top: 15px !important; +} + +.f-push-15-r { + margin-right: 15px !important; +} + +.f-push-15-l { + margin-left: 15px !important; +} + +.f-push-20-b { + margin-bottom: 20px !important; +} + +.f-push-20-t { + margin-top: 20px !important; +} + +.f-push-20-r { + margin-right: 20px !important; +} + +.f-push-20-l { + margin-left: 20px !important; +} + +.f-push-30-b { + margin-bottom: 30px !important; +} + +.f-push-30-t { + margin-top: 30px !important; +} + +.f-push-30-r { + margin-right: 30px !important; +} + +.f-push-30-l { + margin-left: 30px !important; +} + +.f-push-40-b { + margin-bottom: 40px !important; +} + +.f-push-40-t { + margin-top: 40px !important; +} + +.f-push-40-r { + margin-right: 40px !important; +} + +.f-push-40-l { + margin-left: 40px !important; +} + +.f-push-50-b { + margin-bottom: 50px !important; +} + +.f-push-50-t { + margin-top: 50px !important; +} + +.f-push-50-r { + margin-right: 50px !important; +} + +.f-push-50-l { + margin-left: 50px !important; +} + +.f-pdg-5-b { + padding-bottom: 5px !important; +} + +.f-pdg-5-t { + padding-top: 5px !important; +} + +.f-pdg-5-r { + padding-right: 5px !important; +} + +.f-pdg-5-l { + padding-left: 5px !important; +} + +.f-pdg-10-b { + padding-bottom: 10px !important; +} + +.f-pdg-10-t { + padding-top: 10px !important; +} + +.f-pdg-10-r { + padding-right: 10px !important; +} + +.f-pdg-10-l { + padding-left: 10px !important; +} + +.f-pdg-15-b { + padding-bottom: 15px !important; +} + +.f-pdg-15-t { + padding-top: 15px !important; +} + +.f-pdg-15-r { + padding-right: 15px !important; +} + +.f-pdg-15-l { + padding-left: 15px !important; +} + +.f-pdg-20-b { + padding-bottom: 20px !important; +} + +.f-pdg-20-t { + padding-top: 20px !important; +} + +.f-pdg-20-r { + padding-right: 20px !important; +} + +.f-pdg-20-l { + padding-left: 20px !important; +} + +.f-pdg-30-b { + padding-bottom: 30px !important; +} + +.f-pdg-30-t { + padding-top: 30px !important; +} + +.f-pdg-30-r { + padding-right: 30px !important; +} + +.f-pdg-30-l { + padding-left: 30px !important; +} + +.f-pdg-40-b { + padding-bottom: 40px !important; +} + +.f-pdg-40-t { + padding-top: 40px !important; +} + +.f-pdg-40-r { + padding-right: 40px !important; +} + +.f-pdg-40-l { + padding-left: 40px !important; +} + +.f-pdg-50-b { + padding-bottom: 50px !important; +} + +.f-pdg-50-t { + padding-top: 50px !important; +} + +.f-pdg-50-r { + padding-right: 50px !important; +} + +.f-pdg-50-l { + padding-left: 50px !important; +} + +.pad-none { + padding: 0 !important; +} + +.mars-pannel-item-label { + display: block; + text-align: right; + min-width: 60px; +} diff --git a/src/mars/components/mars-ui/index.less b/src/mars/components/mars-ui/index.less new file mode 100644 index 0000000..3e7def3 --- /dev/null +++ b/src/mars/components/mars-ui/index.less @@ -0,0 +1,87 @@ +/** + * 所有页面全局公共CSS + * + * @copyright 火星科技 mars3d.cn + * @author 火星渣渣灰 2022-01-01 + */ + +/* 清除内外边距 */ +body, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +p, +blockquote, +/* structural elements 结构元素 */ +dl, +dt, +dd, +ul, +ol, +li, +/* list elements 列表元素 */ +pre, +/* text formatting elements 文本格式元素 */ +fieldset, +lengend, +button, +input, +textarea, +/* form elements 表单元素 */ +th, +td { + /* table elements 表格元素 */ + margin: 0; + padding: 0; + -moz-user-select: none; /*火狐*/ + -webkit-user-select: none; /*webkit浏览器*/ + -ms-user-select: none; /*IE10*/ + -khtml-user-select: none; /*早期浏览器*/ + user-select: none; + list-style: none; +} + +#root, +#app { + height: 100%; +} + +body, +html { + background-color: var(--mars-bg-base) !important; + color: var(--mars-base-color) !important; + font-size: 14px; + // min-width: 900px; + overflow: hidden; + + * { + scrollbar-base-color: #f4f7fc; + scrollbar-track-color: #f4f7fc; + scrollbar-face-color: #797979; + scrollbar-arrow-color: #f4f7fc; + scrollbar-shadow-color: #f4f7fc; + scrollbar-3dlight-color: #f4f7fc; + scrollbar-highlight-color: #f4f7fc; + scrollbar-darkshadow-color: #f4f7fc; + font-size: 14px; + scrollbar-width: thin; + } +} + +.mars-primary-table { + width: 100%; + border-color: var(--mars-base-border-color); + + tr td:nth-of-type(1) { + width: 100px; + } + + td { + padding: 5px; + color: var(--mars-text-color); + } +} diff --git a/src/mars/components/mars-ui/index.ts b/src/mars/components/mars-ui/index.ts new file mode 100644 index 0000000..979d85c --- /dev/null +++ b/src/mars/components/mars-ui/index.ts @@ -0,0 +1,153 @@ +/** + * 统一导出公共组件, 按需初始化ant-design-vue + * @copyright 火星科技 mars3d.cn + * @author 木遥 2022-01-01 + */ +import { App } from "vue" +import MarsSelect from "./mars-select/index.vue" +import MarsButton from "./mars-button/index.vue" +import MarsInput from "./mars-input/index.vue" +import MarsTextarea from "./mars-textarea/index.vue" +import MarsInputNumber from "./mars-input-number/index.vue" +import MarsInputGroup from "./mars-input-group/index.vue" +import MarsDatePicker from "./mars-date-picker/index.vue" +import MarsRangePicker from "./mars-range-picker/index.vue" +import MarsColorPicker from "./mars-color-picker" +import MarsColor from "./mars-color/index.vue" +import MarsIcon from "./mars-icon/index.vue" +import MarsSwitch from "./mars-switch/index.vue" +import MarsDialog from "./mars-dialog/index.vue" +import MarsSlider from "./mars-slider/index.vue" +import MarsDropDown from "./mars-dropdown" +import MarsGui from "./mars-gui/index.vue" +import MarsTable from "./mars-table/index.vue" + +import MarsMessage, { $message as marsMessage } from "./mars-message" +import MarsAlert, { $alert as marsAlert } from "./mars-alert/" +import MarsNotify, { $notify as marsNotify } from "./mars-notify" +import MarsLoading, { $hideLoading as marsHideLoading, $showLoading as marsShowLoading } from "./mars-loading" +import MarsTree from "./mars-tree" +import { + AutoComplete, + Button, + Cascader, + Checkbox, + Col, + Collapse, + Divider, + Dropdown, + Form, + Input, + InputNumber, + DatePicker, + Select, + List, + Menu, + Modal, + PageHeader, + Popover, + Progress, + Pagination, + Radio, + Row, + Slider, + Space, + Spin, + Switch, + Table, + Tabs, + Tooltip, + Tree, + Typography, + Upload, + Card, + Image, + Empty +} from "ant-design-vue" + +import "./mars-echarts" +import "./themes" +import "./index.less" +import "./function.less" + +export const $alert = marsAlert +export const $notify = marsNotify +export const $message = marsMessage +export const $hideLoading = marsHideLoading +export const $showLoading = marsShowLoading + +const components = [ + MarsSelect, + MarsButton, + MarsInput, + MarsInputGroup, + MarsInputNumber, + MarsDatePicker, + MarsRangePicker, + MarsColorPicker, + MarsTree, + MarsDropDown, + MarsIcon, + MarsDialog, + MarsTextarea, + MarsSwitch, + MarsSlider, + MarsGui, + MarsTable, + MarsColor +] + +let marsUIConfig: Record + +export const getConfig = () => { + return marsUIConfig +} + +export default function (app: App, config: Record = {}): App { + marsUIConfig = config + app.use(AutoComplete) + app.use(Row) + app.use(Cascader) + app.use(Col) + app.use(Collapse) + app.use(Button) + app.use(Select) + app.use(List) + app.use(Form) + app.use(Input) + app.use(InputNumber) + app.use(DatePicker) + app.use(Dropdown) + app.use(Checkbox) + app.use(Radio) + app.use(Switch) + app.use(Space) + app.use(Slider) + app.use(Table) + app.use(Tree) + app.use(Upload) + app.use(Progress) + app.use(PageHeader) + app.use(Menu) + app.use(Popover) + app.use(Spin) + app.use(Modal) + app.use(Typography) + app.use(Tabs) + app.use(Tooltip) + app.use(Divider) + app.use(Card) + app.use(Image) + app.use(Pagination) + app.use(Table) + app.use(Empty) + + components.forEach((comp) => { + app.component(comp.name, comp) + }) + MarsMessage(app) + MarsAlert(app) + MarsNotify(app) + MarsLoading(app) + return app +} diff --git a/src/mars/components/mars-ui/mars-alert/alert.less b/src/mars/components/mars-ui/mars-alert/alert.less new file mode 100644 index 0000000..9319e79 --- /dev/null +++ b/src/mars/components/mars-ui/mars-alert/alert.less @@ -0,0 +1,38 @@ +// alert +.mars-global-alert { + .ant-modal-confirm-title { + .mars-msg-title(); + } + .ant-modal-confirm-content { + font-size: 16px; + padding: 10px 14px; + margin: 0; + color: var(--mars-msg-title-color); + user-select: text; + } + .ant-modal-confirm-btns { + margin: 0; + width: 100%; + text-align: center; + .ant-btn { + background: var(--mars-primary-color); + background-color: var(--mars-primary-color); + color: #ffffff; + border: none; + } + } + .ant-modal-content { + background-color: transparent; + padding-bottom: 10px; + .mars-msg-bg(); + } + .ant-modal-body { + padding: 0; + } + .anticon { + * { + color: #4db3ff !important; + font-size: 20px; + } + } +} diff --git a/src/mars/components/mars-ui/mars-alert/index.ts b/src/mars/components/mars-ui/mars-alert/index.ts new file mode 100644 index 0000000..d4f48ef --- /dev/null +++ b/src/mars/components/mars-ui/mars-alert/index.ts @@ -0,0 +1,38 @@ +import { Modal } from "ant-design-vue" +import { App } from "vue" +import "./alert.less" + +/** + * alert弹窗 + * @export + * @param {App} app vue实例 + * @copyright 火星科技 mars3d.cn + * @author 木遥 2022-01-01 + * @returns { void } + */ +export const $alert = (content: any, title = "提示", type: keyof typeof Modal = "info") => { + if (Modal[type] && typeof Modal[type] === "function") { + return new Promise((resolve, reject) => { + const func = Modal[type] as (a: any) => any + func({ + title, + content, + icon: null, + okType: "default", + okText: "确定", + class: "mars-global-alert", + onOk() { + resolve(true) + }, + onCancel() { + reject(new Error("用户取消")) + } + }) + }) + } else { + return Promise!.reject() + } +} +export default function (app: App): void { + app.config.globalProperties.$alert = $alert +} diff --git a/src/mars/components/mars-ui/mars-button/index.vue b/src/mars/components/mars-ui/mars-button/index.vue new file mode 100644 index 0000000..8a9bd21 --- /dev/null +++ b/src/mars/components/mars-ui/mars-button/index.vue @@ -0,0 +1,72 @@ + + + + diff --git a/src/mars/components/mars-ui/mars-color-picker/index.ts b/src/mars/components/mars-ui/mars-color-picker/index.ts new file mode 100644 index 0000000..9dd3eef --- /dev/null +++ b/src/mars/components/mars-ui/mars-color-picker/index.ts @@ -0,0 +1,97 @@ +import { Popover } from "ant-design-vue" +import { ColorPicker } from "vue-color-kit" +import MarsButton from "../mars-button/index.vue" +import { App, defineComponent, h, ref } from "vue" +import "./mars-color-picker.less" + +/** + * 颜色选择器 + * + * @copyright 火星科技 mars3d.cn + * @author 木遥 2022-01-01 + */ +const MarsColorPicker = defineComponent({ + name: "mars-color-picker", + inheritAttrs: false, + props: { + value: { + type: String, + default: "rgba(255,255,255,1)" + }, + hiddenAlpha: { + type: Boolean, + default: false + } + }, + emits: ["update:value", "change"], + setup(props, context) { + let pointColor = props.value || "" + const visible = ref(false) + let colorObject: any = null + + console.log("传递过来的", props.hiddenAlpha) + + + const changeColor = (color: any) => { + pointColor = `rgba(${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a})`// color.hex + colorObject = color + } + const cancel = () => { + visible.value = false + pointColor = props.value + } + const choose = () => { + visible.value = false + context.emit("update:value", pointColor) + context.emit("change", colorObject) + } + + const Buttons = [ + h( + MarsButton, + { size: "small", onClick: choose }, + { + default: () => "确定" + } + ), + h( + MarsButton, + { size: "small", class: "ml5", onClick: cancel }, + { + default: () => "取消" + } + ) + ] + + const content = [ + h(ColorPicker, { suckerHide: true, color: pointColor, onChangeColor: changeColor } as any /* TODO 强制给any类型 */), + h("div", { class: "f-tac" }, Buttons) + ] + + return () => + h( + Popover, + { + trigger: "click", + placement: "right", + overlayClassName: props.hiddenAlpha ? "overlayClassName" : "", // 打开的面板样式,隐藏透明度面板 + // overlayClassName: "overlayClassName", // 打开的面板样式,隐藏透明度面板 + visible: visible.value, + "onUpdate:visible": (v: boolean) => { + visible.value = v + }, + color: "rgba(32, 42, 68, 0.9)" + }, + { + default: () => h("div", { class: "marsColorView", style: { backgroundColor: props.value } }), + content: () => h("div", null, content) + } + ) + } +}) + +export function install(app: App): App { + app.component(MarsColorPicker.name, MarsColorPicker) + return app +} +export default MarsColorPicker diff --git a/src/mars/components/mars-ui/mars-color-picker/mars-color-picker.less b/src/mars/components/mars-ui/mars-color-picker/mars-color-picker.less new file mode 100644 index 0000000..07cad91 --- /dev/null +++ b/src/mars/components/mars-ui/mars-color-picker/mars-color-picker.less @@ -0,0 +1,224 @@ +/** + * 颜色选择器 + * + * @copyright 火星科技 mars3d.cn + * @author 木遥 2022-01-01 + */ + +.hu-color-picker { + padding: 10px; + background: var(--mars-bg-base); + border-radius: 4px; + box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16); + z-index: 1; +} + +.hu-color-picker { + width: 220px !important; + background-color: var(--mars-bg-base) !important; + box-shadow: none; +} + +.hu-color-picker.light { + background: #f7f8f9; +} + +.hu-color-picker.light .color-show .sucker { + background: #eceef0; +} + +.hu-color-picker.light .color-type .name { + background: #e7e8e9; +} + +.hu-color-picker.light .color-type .value { + color: #666; + background: #eceef0; +} + +.hu-color-picker.light .colors.history { + border-top: 1px solid #eee; +} + +.hu-color-picker canvas { + vertical-align: top; +} + +.hu-color-picker .color-set { + display: flex; +} + +.hu-color-picker .color-show { + margin-top: 8px; + display: flex; +} + +.saturation { + position: relative; + cursor: pointer; +} + +.saturation .slide { + position: absolute; + left: 100px; + top: 0; + width: 10px; + height: 10px; + border-radius: 50%; + border: 1px solid #fff; + box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3); + pointer-events: none; +} + +.color-alpha { + position: relative; + margin-left: 8px; + cursor: pointer; +} + +.color-alpha .slide { + position: absolute; + left: 0; + top: 100px; + width: 100%; + height: 4px; + background: #fff; + box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3); + pointer-events: none; +} + +.sucker { + width: 30px; + fill: #9099a4; + background: #2e333a; + cursor: pointer; + transition: all 0.3s; +} + +.sucker.active, +.sucker:hover { + fill: #1593ff; +} + +.hue { + position: relative; + margin-left: 8px; + cursor: pointer; +} + +.hue .slide { + position: absolute; + left: 0; + top: 100px; + width: 100%; + height: 4px; + background: #fff; + box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3); + pointer-events: none; +} + +.colors { + padding: 0; + margin: 0; +} + +.colors.history { + margin-top: 10px; + border-top: 1px solid #2e333a; +} + +.colors .item { + position: relative; + width: 16px; + height: 16px; + margin: 10px 0 0 10px; + border-radius: 3px; + box-sizing: border-box; + vertical-align: top; + display: inline-block; + transition: all 0.1s; + cursor: pointer; +} + +.colors .item:nth-child(8n + 1) { + margin-left: 0; +} + +.colors .item:hover { + transform: scale(1.4); +} + +.colors .item .alpha { + height: 100%; + border-radius: 4px; +} + +.colors .item .color { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border-radius: 3px; +} + +.color-type { + display: flex; + margin-top: 8px; + font-size: 12px; +} + +.color-type .name { + width: 60px; + height: 30px; + float: left; + display: flex; + justify-content: center; + align-items: center; + color: #999; + background: #252930; +} + +.color-type .value { + flex: 1; + height: 30px; + min-width: 100px; + padding: 0 12px; + border: 0; + color: #fff; + background: #2e333a; + box-sizing: border-box; +} + +.marsColorView { + display: inline-block; + height: 20px; + width: 80px; + cursor: pointer; +} + +.ml5 { + margin-left: 5px; +} + +.overlayClassName { + .color-alpha { + display: none; + } + + .hue { + margin-left: 18px; + } + + .hu-color-picker { + .color-type { + &:nth-last-child(2) { + display: none; + } + } + + // .color-show { + // display: none; + // } + } +} \ No newline at end of file diff --git a/src/mars/components/mars-ui/mars-color/index.vue b/src/mars/components/mars-ui/mars-color/index.vue new file mode 100644 index 0000000..0852ec1 --- /dev/null +++ b/src/mars/components/mars-ui/mars-color/index.vue @@ -0,0 +1,46 @@ + + + diff --git a/src/mars/components/mars-ui/mars-date-picker/index.vue b/src/mars/components/mars-ui/mars-date-picker/index.vue new file mode 100644 index 0000000..3e47978 --- /dev/null +++ b/src/mars/components/mars-ui/mars-date-picker/index.vue @@ -0,0 +1,85 @@ + + + + diff --git a/src/mars/components/mars-ui/mars-dialog/index.vue b/src/mars/components/mars-ui/mars-dialog/index.vue new file mode 100644 index 0000000..7a83359 --- /dev/null +++ b/src/mars/components/mars-ui/mars-dialog/index.vue @@ -0,0 +1,804 @@ + + + + + diff --git a/src/mars/components/mars-ui/mars-dropdown/dropdown.less b/src/mars/components/mars-ui/mars-dropdown/dropdown.less new file mode 100644 index 0000000..c413c77 --- /dev/null +++ b/src/mars/components/mars-ui/mars-dropdown/dropdown.less @@ -0,0 +1,30 @@ +// 下拉菜单 +.mars-dropdown-menu { + .ant-dropdown-menu { + border-bottom: 1px solid #008aff70; + border-left: 1px solid #008aff70; + border-right: 1px solid #008aff70; + .mars-drop-bg(); + .mars-icon { + vertical-align: middle; + margin-right: 4px; + } + } + + .ant-dropdown-menu-title-content { + color: var(--mars-text-color); + } + + .ant-dropdown-menu-item, + .ant-dropdown-menu-submenu-title { + &:hover { + background-color: var(--mars-select-bg); + } + .ant-upload { + color: var(--mars-text-color); + } + } + .ant-dropdown-menu-submenu-title { + padding: 6px 20px !important; + } +} diff --git a/src/mars/components/mars-ui/mars-dropdown/index.ts b/src/mars/components/mars-ui/mars-dropdown/index.ts new file mode 100644 index 0000000..9124d7c --- /dev/null +++ b/src/mars/components/mars-ui/mars-dropdown/index.ts @@ -0,0 +1,24 @@ +import { Dropdown } from "ant-design-vue" +import { App, defineComponent, h } from "vue" +import "./dropdown.less" + +/** + * 下拉菜单 + * + * @copyright 火星科技 mars3d.cn + * @author 木遥 2022-01-01 + */ + +const MarsDropdown = defineComponent({ + name: "mars-dropdown-menu", + inheritAttrs: false, + setup(props, context) { + return () => h(Dropdown, { ...context.attrs, ...props, overlayClassName: "mars-dropdown-menu" }, context.slots) + } +}) + +export function install(app: App): App { + app.component(MarsDropdown.name, MarsDropdown) + return app +} +export default MarsDropdown diff --git a/src/mars/components/mars-ui/mars-echarts/index.ts b/src/mars/components/mars-ui/mars-echarts/index.ts new file mode 100644 index 0000000..b80c7a7 --- /dev/null +++ b/src/mars/components/mars-ui/mars-echarts/index.ts @@ -0,0 +1,476 @@ +import * as echarts from "echarts" +/** + * echarts公共样式配置 + * @copyright 火星科技 mars3d.cn + * @author 火星渣渣灰 2022-02-19 + */ + +echarts.registerTheme("dark", { + color: ["rgba(14,227,247,1)", "#ff715e", "#ffee51", "#54e66b", "#715c87"], + backgroundColor: "rgba(64,64,64,0)", + textStyle: {}, + title: { + textStyle: { + color: "#ffaf51" + }, + subtextStyle: { + color: "#eeeeee" + } + }, + line: { + itemStyle: { + normal: { + borderWidth: "2" + } + }, + lineStyle: { + normal: { + width: "3" + } + }, + symbolSize: "8", + symbol: + "path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z", + smooth: false + }, + radar: { + itemStyle: { + normal: { + borderWidth: "2" + } + }, + lineStyle: { + normal: { + width: "3" + } + }, + symbolSize: "8", + symbol: + "path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z", + smooth: false + }, + bar: { + itemStyle: { + normal: { + barBorderWidth: "0", + barBorderColor: "#ccc" + }, + emphasis: { + barBorderWidth: "0", + barBorderColor: "#ccc" + } + } + }, + pie: { + itemStyle: { + normal: { + borderWidth: "0", + borderColor: "#ccc" + }, + emphasis: { + borderWidth: "0", + borderColor: "#ccc" + } + }, + symbol: + "path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z" + }, + scatter: { + itemStyle: { + normal: { + borderWidth: "0", + borderColor: "#ccc" + }, + emphasis: { + borderWidth: "0", + borderColor: "#ccc" + } + }, + symbol: + "path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z" + }, + boxplot: { + itemStyle: { + normal: { + borderWidth: "0", + borderColor: "#ccc" + }, + emphasis: { + borderWidth: "0", + borderColor: "#ccc" + } + }, + symbol: + "path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z" + }, + parallel: { + itemStyle: { + normal: { + borderWidth: "0", + borderColor: "#ccc" + }, + emphasis: { + borderWidth: "0", + borderColor: "#ccc" + } + }, + symbol: + "path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z" + }, + sankey: { + itemStyle: { + normal: { + borderWidth: "0", + borderColor: "#ccc" + }, + emphasis: { + borderWidth: "0", + borderColor: "#ccc" + } + }, + symbol: + "path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z" + }, + funnel: { + itemStyle: { + normal: { + borderWidth: "0", + borderColor: "#ccc" + }, + emphasis: { + borderWidth: "0", + borderColor: "#ccc" + } + }, + symbol: + "path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z" + }, + gauge: { + itemStyle: { + normal: { + borderWidth: "0", + borderColor: "#ccc" + }, + emphasis: { + borderWidth: "0", + borderColor: "#ccc" + } + }, + symbol: + "path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z" + }, + candlestick: { + itemStyle: { + normal: { + color: "#ffee51", + color0: "#ffffff", + borderColor: "#ff715e", + borderColor0: "#797fba", + borderWidth: "1" + } + } + }, + graph: { + itemStyle: { + normal: { + borderWidth: "0", + borderColor: "#ccc" + } + }, + lineStyle: { + normal: { + width: "1", + color: "#888888" + } + }, + symbolSize: "8", + symbol: + "path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z", + smooth: false, + color: ["rgba(14,227,247,1)", "#ff715e", "#ffee51", "#54e66b", "#715c87"], + label: { + normal: { + textStyle: { + color: "#333333" + } + } + } + }, + map: { + itemStyle: { + normal: { + areaColor: "#555555", + borderColor: "#999999", + borderWidth: 0.5 + }, + emphasis: { + areaColor: "rgba(255,175,81,0.5)", + borderColor: "#ffaf51", + borderWidth: 1 + } + }, + label: { + normal: { + textStyle: { + color: "#ffffff" + } + }, + emphasis: { + textStyle: { + color: "rgb(255,238,81)" + } + } + } + }, + geo: { + itemStyle: { + normal: { + areaColor: "#555555", + borderColor: "#999999", + borderWidth: 0.5 + }, + emphasis: { + areaColor: "rgba(255,175,81,0.5)", + borderColor: "#ffaf51", + borderWidth: 1 + } + }, + label: { + normal: { + textStyle: { + color: "#ffffff" + } + }, + emphasis: { + textStyle: { + color: "rgb(255,238,81)" + } + } + } + }, + categoryAxis: { + axisLine: { + show: true, + lineStyle: { + color: "#91cc75" + } + }, + axisTick: { + show: false, + lineStyle: { + color: "#333" + } + }, + axisLabel: { + show: true, + textStyle: { + color: "#91cc75" + } + }, + splitLine: { + show: true, + lineStyle: { + color: ["#555555"] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] + } + } + }, + valueAxis: { + axisLine: { + show: true, + lineStyle: { + color: "#91cc75" + } + }, + axisTick: { + show: false, + lineStyle: { + color: "#333" + } + }, + axisLabel: { + show: true, + textStyle: { + color: "#eeeeee" + } + }, + splitLine: { + show: true, + lineStyle: { + color: ["#555555"] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] + } + } + }, + logAxis: { + axisLine: { + show: true, + lineStyle: { + color: "#91cc75" + } + }, + axisTick: { + show: false, + lineStyle: { + color: "#333" + } + }, + axisLabel: { + show: true, + textStyle: { + color: "#eeeeee" + } + }, + splitLine: { + show: true, + lineStyle: { + color: ["#555555"] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] + } + } + }, + timeAxis: { + axisLine: { + show: true, + lineStyle: { + color: "#91cc75" + } + }, + axisTick: { + show: false, + lineStyle: { + color: "#333" + } + }, + axisLabel: { + show: true, + textStyle: { + color: "#eeeeee" + } + }, + splitLine: { + show: true, + lineStyle: { + color: ["#555555"] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] + } + } + }, + toolbox: { + iconStyle: { + normal: { + borderColor: "#999999" + }, + emphasis: { + borderColor: "#666666" + } + } + }, + legend: { + textStyle: { + color: "#cccccc" + } + }, + tooltip: { + axisPointer: { + lineStyle: { + color: "#cccccc", + width: 1 + }, + crossStyle: { + color: "#cccccc", + width: 1 + } + } + }, + timeline: { + lineStyle: { + color: "#ffaf51", + width: 1 + }, + itemStyle: { + normal: { + color: "#ffaf51", + borderWidth: 1 + }, + emphasis: { + color: "#ffaf51" + } + }, + controlStyle: { + normal: { + color: "#ffaf51", + borderColor: "#ffaf51", + borderWidth: 0.5 + }, + emphasis: { + color: "#ffaf51", + borderColor: "#ffaf51", + borderWidth: 0.5 + } + }, + checkpointStyle: { + color: "#ff715e", + borderColor: "rgba(255,113,94,0.4)" + }, + label: { + normal: { + textStyle: { + color: "#ff715e" + } + }, + emphasis: { + textStyle: { + color: "#ff715e" + } + } + } + }, + visualMap: { + color: ["#ff715e", "#ffee51", "#797fba"] + }, + dataZoom: { + backgroundColor: "rgba(255,255,255,0)", + dataBackgroundColor: "rgba(222,222,222,1)", + fillerColor: "rgba(255,113,94,0.2)", + handleColor: "#cccccc", + handleSize: "100%", + textStyle: { + color: "#999999" + } + }, + markPoint: { + label: { + normal: { + textStyle: { + color: "#333333" + } + }, + emphasis: { + textStyle: { + color: "#333333" + } + } + } + } +}) diff --git a/src/mars/components/mars-ui/mars-gui/index.ts b/src/mars/components/mars-ui/mars-gui/index.ts new file mode 100644 index 0000000..b768560 --- /dev/null +++ b/src/mars/components/mars-ui/mars-gui/index.ts @@ -0,0 +1,30 @@ +export const components = { + number: "mars-input-number", + switch: "mars-switch", + radio: "a-radio-group", + checkbox: "a-checkbox-group", + slider: "mars-slider", + color: "mars-color-picker", + select: "mars-select", + textarea: "mars-textarea", + input: "mars-input", + inputGroup: "mars-input-group" +} + +export interface GuiItem { + type: keyof typeof components + field: string + label: string + extra?: any + extraWidth?: number + extraType?: "string" | "custom" + min?: number + max?: number + step?: number + range?: boolean + data?: any[] + value?: string | boolean | number | any + units?: string[] + show?: boolean | ((data: any) => boolean) + change?: (value: any, dataObj: any) => any +} diff --git a/src/mars/components/mars-ui/mars-gui/index.vue b/src/mars/components/mars-ui/mars-gui/index.vue new file mode 100644 index 0000000..803d735 --- /dev/null +++ b/src/mars/components/mars-ui/mars-gui/index.vue @@ -0,0 +1,185 @@ + + + + + diff --git a/src/mars/components/mars-ui/mars-icon/index.vue b/src/mars/components/mars-ui/mars-icon/index.vue new file mode 100644 index 0000000..fc48b13 --- /dev/null +++ b/src/mars/components/mars-ui/mars-icon/index.vue @@ -0,0 +1,46 @@ + + + diff --git a/src/mars/components/mars-ui/mars-input-group/index.vue b/src/mars/components/mars-ui/mars-input-group/index.vue new file mode 100644 index 0000000..c322bd5 --- /dev/null +++ b/src/mars/components/mars-ui/mars-input-group/index.vue @@ -0,0 +1,33 @@ + + + + diff --git a/src/mars/components/mars-ui/mars-input-number/index.vue b/src/mars/components/mars-ui/mars-input-number/index.vue new file mode 100644 index 0000000..d985858 --- /dev/null +++ b/src/mars/components/mars-ui/mars-input-number/index.vue @@ -0,0 +1,39 @@ + + + diff --git a/src/mars/components/mars-ui/mars-input/index.vue b/src/mars/components/mars-ui/mars-input/index.vue new file mode 100644 index 0000000..3c45fba --- /dev/null +++ b/src/mars/components/mars-ui/mars-input/index.vue @@ -0,0 +1,43 @@ + + + diff --git a/src/mars/components/mars-ui/mars-loading/index.ts b/src/mars/components/mars-ui/mars-loading/index.ts new file mode 100644 index 0000000..1a75ede --- /dev/null +++ b/src/mars/components/mars-ui/mars-loading/index.ts @@ -0,0 +1,34 @@ +import nprogress from "nprogress" +import "nprogress/nprogress.css" +import { App } from "vue" + +/** + * loading组件 + * @export + * @param {App} app vue实例 + * @copyright 火星科技 mars3d.cn + * @author 火星渣渣灰 2022-02-19 + * @returns { void } + */ +let loadingNum = 0 +export const $showLoading = () => { + loadingNum++ + nprogress.start() + const interval = setInterval(() => { + if (nprogress.isStarted() && nprogress.status < 0.8) { + nprogress.set(nprogress.status + 0.1) + } else { + clearInterval(interval) + } + }, 500) +} +export const $hideLoading = () => { + loadingNum = Math.max(0, --loadingNum) + if (loadingNum === 0) { + nprogress.done() + } +} +export default function (app: App): void { + app.config.globalProperties.$showLoading = $showLoading + app.config.globalProperties.$hideLoading = $hideLoading +} diff --git a/src/mars/components/mars-ui/mars-message/index.ts b/src/mars/components/mars-ui/mars-message/index.ts new file mode 100644 index 0000000..4e81daa --- /dev/null +++ b/src/mars/components/mars-ui/mars-message/index.ts @@ -0,0 +1,32 @@ +import { message } from "ant-design-vue" +import MarsIcon from "../mars-icon/index.vue" +import { App, h } from "vue" +import "./message.less" + +/** + * message 信息弹窗 + * @export + * @param {App} app vue实例 + * @copyright 火星科技 mars3d.cn + * @author 木遥 2022-01-01 + * @returns {void} + */ + +message.config({ + top: `100px` +}) +export const $message = (msg: string, type: keyof typeof message = "info") => { + if (message[type] && typeof message[type] === "function") { + const func = message[type] as (a: any) => Promise + return func({ + class: "mars-message", + icon: h(MarsIcon, { icon: "remind", theme: "filled", size: "20", fill: "#008aff" }), + content: msg + }) + } else { + return Promise!.reject() + } +} +export default function (app: App): void { + app.config.globalProperties.$message = $message +} diff --git a/src/mars/components/mars-ui/mars-message/message.less b/src/mars/components/mars-ui/mars-message/message.less new file mode 100644 index 0000000..7b6674b --- /dev/null +++ b/src/mars/components/mars-ui/mars-message/message.less @@ -0,0 +1,15 @@ +/*提示*/ +.mars-message { + .ant-message-notice-content { + background: none; + color: var(--mars-text-color); + padding: 15px 20px; + .mars-msg-bg(); + .ant-message-info span{ + font-size: 16px; + } + .mars-icon { + margin-right: 10px; + } + } +} diff --git a/src/mars/components/mars-ui/mars-notify/index.ts b/src/mars/components/mars-ui/mars-notify/index.ts new file mode 100644 index 0000000..289f35d --- /dev/null +++ b/src/mars/components/mars-ui/mars-notify/index.ts @@ -0,0 +1,40 @@ +import { notification } from "ant-design-vue" +import { App } from "vue" +import "./notify.less" + +/** + * 消息提醒 + * @export + * @param {App} app vue实例 + * @copyright 火星科技 mars3d.cn + * @author 木遥 2022-01-01 + * @returns { void } + */ +export const $notify = (message: any, description: any, options: any = {}, type: keyof typeof notification = "info") => { + if (notification[type] && typeof notification[type] === "function") { + return new Promise((resolve) => { + notification.config({ + placement: "bottomRight", + right: 10, + bottom: 40, + duration: 10, + ...options + }) + const func = notification[type] as (a: any) => any + func({ + message, + icon: () => null, + description, + class: "mars-notify-message", + onClose() { + resolve(true) + } + }) + }) + } else { + return Promise!.reject() + } +} +export default function (app: App): void { + app.config.globalProperties.$notify = $notify +} diff --git a/src/mars/components/mars-ui/mars-notify/notify.less b/src/mars/components/mars-ui/mars-notify/notify.less new file mode 100644 index 0000000..9c58e4c --- /dev/null +++ b/src/mars/components/mars-ui/mars-notify/notify.less @@ -0,0 +1,22 @@ +// 功能提示和已知问题提示框 +.mars-notify-message { + padding: 0; + background: none; + .mars-msg-bg(); + .ant-notification-notice-message { + font-size: 16px; + margin: 0; + .mars-msg-title(); + } + .ant-notification-notice-description { + color: var(--mars-text-color); + margin: 0; + padding: 20px; + user-select: text; + } + .ant-notification-notice-close { + color: var(--mars-alert-title-color); + top: 10px; + right: 10px; + } +} diff --git a/src/mars/components/mars-ui/mars-range-picker/index.vue b/src/mars/components/mars-ui/mars-range-picker/index.vue new file mode 100644 index 0000000..d256887 --- /dev/null +++ b/src/mars/components/mars-ui/mars-range-picker/index.vue @@ -0,0 +1,52 @@ + + + diff --git a/src/mars/components/mars-ui/mars-select/index.vue b/src/mars/components/mars-ui/mars-select/index.vue new file mode 100644 index 0000000..16df295 --- /dev/null +++ b/src/mars/components/mars-ui/mars-select/index.vue @@ -0,0 +1,43 @@ + + + + diff --git a/src/mars/components/mars-ui/mars-slider/index.vue b/src/mars/components/mars-ui/mars-slider/index.vue new file mode 100644 index 0000000..cb89e00 --- /dev/null +++ b/src/mars/components/mars-ui/mars-slider/index.vue @@ -0,0 +1,68 @@ + + + diff --git a/src/mars/components/mars-ui/mars-switch/index.vue b/src/mars/components/mars-ui/mars-switch/index.vue new file mode 100644 index 0000000..deb9727 --- /dev/null +++ b/src/mars/components/mars-ui/mars-switch/index.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/src/mars/components/mars-ui/mars-table/index.vue b/src/mars/components/mars-ui/mars-table/index.vue new file mode 100644 index 0000000..e24a2b3 --- /dev/null +++ b/src/mars/components/mars-ui/mars-table/index.vue @@ -0,0 +1,24 @@ + + + diff --git a/src/mars/components/mars-ui/mars-textarea/index.vue b/src/mars/components/mars-ui/mars-textarea/index.vue new file mode 100644 index 0000000..d122286 --- /dev/null +++ b/src/mars/components/mars-ui/mars-textarea/index.vue @@ -0,0 +1,38 @@ + + + diff --git a/src/mars/components/mars-ui/mars-tree/index.ts b/src/mars/components/mars-ui/mars-tree/index.ts new file mode 100644 index 0000000..56026e9 --- /dev/null +++ b/src/mars/components/mars-ui/mars-tree/index.ts @@ -0,0 +1,53 @@ +import { Tree } from "ant-design-vue" +import { App, defineComponent, h } from "vue" +import Icon from "../mars-icon/index.vue" +import "./tree.less" + +/** + * 树控件 + * @copyright 火星科技 mars3d.cn + * @author 火星渣渣灰 2022-01-01 + */ +const MarsTree = defineComponent({ + name: "mars-tree", + inheritAttrs: false, + setup(props, context) { + const icon = (isLeaf: boolean, expanded: boolean, group: boolean) => { + if (isLeaf && !group) { + return [ + h(Icon, { + icon: "notes", + width: "14", + color: "#79C1F8", + theme: "outline", + key: new Date().getTime() + }) + ] + } else if (!expanded) { + return [h(Icon, { icon: "folder-close", width: "14", color: "#db9829", theme: "filled", key: new Date().getTime() })] + } else if (expanded) { + return [h(Icon, { icon: "folder-open", width: "14", color: "#db9829", theme: "filled", key: new Date().getTime() })] + } + } + return () => + h( + Tree, + { + showIcon: true, + showLine: true, + ...context.attrs, + ...props + }, + { + icon: ({ isLeaf, expanded, data }: any) => h("span", null, icon(isLeaf, expanded, data.group)), + ...context.slots + } + ) + } +}) + +export function install(app: App): App { + app.component(MarsTree.name, MarsTree) + return app +} +export default MarsTree diff --git a/src/mars/components/mars-ui/mars-tree/tree.less b/src/mars/components/mars-ui/mars-tree/tree.less new file mode 100644 index 0000000..f123a4b --- /dev/null +++ b/src/mars/components/mars-ui/mars-tree/tree.less @@ -0,0 +1,81 @@ +.mars-main-view { + + // 树控件 + .ant-tree { + background: none; + color: var(--mars-text-color); + padding-bottom: 2px; + } + + .ant-tree-checkbox { + margin-right: 0; + } + + .ant-tree-show-line .ant-tree-switcher, + .ant-tree-checkbox-inner { + background: none !important; + } + + .ant-tree-checkbox-checked { + background: var(--mars-primary-color); + + .ant-tree-checkbox-inner { + border-color: var(--mars-primary-color); + } + } + + .anticon-file.ant-tree-switcher-line-icon { + display: none; + } + + .ant-tree-show-line .ant-tree-indent-unit::before { + border-right: 1px dotted var(--mars-text-color); + } + + .ant-tree-switcher-noop { + width: 20px; + } + + .ant-tree-node-selected { + background: none !important; + } + + .ant-tree-switcher-noop::before { + content: ""; + display: inline-block; + position: absolute; + height: 26px; + border-right: 1px dotted var(--mars-text-color); + } + + .ant-tree-treenode-leaf-last { + .ant-tree-switcher-noop::before { + content: ""; + display: inline-block; + position: absolute; + height: 10px; + border-right: 1px dotted var(--mars-text-color); + } + } + + .ant-tree-switcher-noop::after { + content: ""; + display: inline-block; + width: 8px; + position: absolute; + top: 10px; + border-bottom: 1px dotted var(--mars-text-color); + } + + .ant-tree-node-content-wrapper { + color: var(--mars-text-color) !important; + + .ant-tree-iconEle { + line-height: 2.2; + } + + &:hover { + background: hsla(0, 0%, 100%, 0.08) !important; + } + } +} diff --git a/src/mars/components/mars-ui/themes/assets/images/border-image-base.png b/src/mars/components/mars-ui/themes/assets/images/border-image-base.png new file mode 100644 index 0000000..1086eab Binary files /dev/null and b/src/mars/components/mars-ui/themes/assets/images/border-image-base.png differ diff --git a/src/mars/components/mars-ui/themes/assets/images/dialog-title-slice.png b/src/mars/components/mars-ui/themes/assets/images/dialog-title-slice.png new file mode 100644 index 0000000..612292d Binary files /dev/null and b/src/mars/components/mars-ui/themes/assets/images/dialog-title-slice.png differ diff --git a/src/mars/components/mars-ui/themes/assets/images/dialog-title.png b/src/mars/components/mars-ui/themes/assets/images/dialog-title.png new file mode 100644 index 0000000..42ae9a4 Binary files /dev/null and b/src/mars/components/mars-ui/themes/assets/images/dialog-title.png differ diff --git a/src/mars/components/mars-ui/themes/assets/images/heade-title-bg.png b/src/mars/components/mars-ui/themes/assets/images/heade-title-bg.png new file mode 100644 index 0000000..f143cb2 Binary files /dev/null and b/src/mars/components/mars-ui/themes/assets/images/heade-title-bg.png differ diff --git a/src/mars/components/mars-ui/themes/assets/images/header-bg.png b/src/mars/components/mars-ui/themes/assets/images/header-bg.png new file mode 100644 index 0000000..7f770b4 Binary files /dev/null and b/src/mars/components/mars-ui/themes/assets/images/header-bg.png differ diff --git a/src/mars/components/mars-ui/themes/assets/images/menu-hover.png b/src/mars/components/mars-ui/themes/assets/images/menu-hover.png new file mode 100644 index 0000000..846f7d2 Binary files /dev/null and b/src/mars/components/mars-ui/themes/assets/images/menu-hover.png differ diff --git a/src/mars/components/mars-ui/themes/assets/images/msg-title-bg.png b/src/mars/components/mars-ui/themes/assets/images/msg-title-bg.png new file mode 100644 index 0000000..62fbc46 Binary files /dev/null and b/src/mars/components/mars-ui/themes/assets/images/msg-title-bg.png differ diff --git a/src/mars/components/mars-ui/themes/assets/images/pannel-bg.png b/src/mars/components/mars-ui/themes/assets/images/pannel-bg.png new file mode 100644 index 0000000..1392776 Binary files /dev/null and b/src/mars/components/mars-ui/themes/assets/images/pannel-bg.png differ diff --git a/src/mars/components/mars-ui/themes/assets/images/selet-dropdown-border.png b/src/mars/components/mars-ui/themes/assets/images/selet-dropdown-border.png new file mode 100644 index 0000000..92ada8b Binary files /dev/null and b/src/mars/components/mars-ui/themes/assets/images/selet-dropdown-border.png differ diff --git a/src/mars/components/mars-ui/themes/assets/images/sub-menu-emb-light.png b/src/mars/components/mars-ui/themes/assets/images/sub-menu-emb-light.png new file mode 100644 index 0000000..6d78f58 Binary files /dev/null and b/src/mars/components/mars-ui/themes/assets/images/sub-menu-emb-light.png differ diff --git a/src/mars/components/mars-ui/themes/assets/images/sub-menu-emb.png b/src/mars/components/mars-ui/themes/assets/images/sub-menu-emb.png new file mode 100644 index 0000000..171893c Binary files /dev/null and b/src/mars/components/mars-ui/themes/assets/images/sub-menu-emb.png differ diff --git a/src/mars/components/mars-ui/themes/assets/images/tab-title.png b/src/mars/components/mars-ui/themes/assets/images/tab-title.png new file mode 100644 index 0000000..c4147d7 Binary files /dev/null and b/src/mars/components/mars-ui/themes/assets/images/tab-title.png differ diff --git a/src/mars/components/mars-ui/themes/dark/index.less b/src/mars/components/mars-ui/themes/dark/index.less new file mode 100644 index 0000000..97ac7fd --- /dev/null +++ b/src/mars/components/mars-ui/themes/dark/index.less @@ -0,0 +1,41 @@ +@import url("./zhts.less"); + +:root[data-theme="dark"] { + --mars-primary-color: rgba(0, 138, 255, 0.9); + --mars-primary-half-color: rgba(0, 138, 255, 0.5); + --mars-sub-color: #26ddff; + --mars-danger-color: #f75165; + --mars-warning-color: #ff8041; + --mars-success-color: #18af92; + --mars-base-color: #ffffff; + --mars-content-color: #cdcdcd; + --mars-text-color: #ffffff; + --mars-hover-btn-bg: #3ea6ff; + --mars-click-btn-bg: #015dab; + --mars-disable-btn-bg: #cdcdcd; + --mars-base-border: #ffffff; + --mars-select-bg: rgba(0, 138, 255, 0.2); + --mars-bg-base: rgba(23, 49, 71, 0.8); + --mars-odd-table-bg: rgba(0, 138, 255, 0.06); // 奇数表格背景 + --mars-bg-title: #0f3453; // 普通的头部背景色 + --mars-base-border-color: #b9b9b9; + --mars-list-active: linear-gradient(90deg, rgba(0, 138, 255, 0) 0%, rgba(0, 138, 255, 0.58) 53%, rgba(0, 138, 255, 0.02) 100%); + + --mars-title-active: linear-gradient(0deg, rgba(0, 138, 255, 0.6) 0%, rgba(0, 138, 255, 0) 100%); + --mars-title-text-active: #ffffff; + + --mars-menu-emb: url(../assets/images/sub-menu-emb.png); + + --mars-msg-title-bg: url(../assets/images/msg-title-bg.png); + --mars-msg-title-color: #c7d3dd; + --mars-msg-content-bg: url("../assets/images/border-image-base.png"); + + --mars-alert-title-color: #0089fe; + + --mars-scrollbar-thumb: #134875; + --mars-scrollbar-track: #173147; + + --mars-sub-title-color: #cdcdcd; // 小标题的颜色 + + --mars-collapse-title-bg: url("@/mars/components/mars-ui/assets/images/tab-title.png"); +} diff --git a/src/mars/components/mars-ui/themes/dark/index.wxss b/src/mars/components/mars-ui/themes/dark/index.wxss new file mode 100644 index 0000000..37ac766 --- /dev/null +++ b/src/mars/components/mars-ui/themes/dark/index.wxss @@ -0,0 +1,36 @@ +:root[data-theme="dark"] { + --zhts-title-bg: url("../assets/images/header-bg.png"); + --zhts-title-img: url("../assets/images/heade-title-bg.png"); +} +:root[data-theme="dark"] { + --mars-primary-color: rgba(0, 138, 255, 0.9); + --mars-primary-half-color: rgba(0, 138, 255, 0.5); + --mars-sub-color: #26ddff; + --mars-danger-color: #f75165; + --mars-warning-color: #ff8041; + --mars-success-color: #18af92; + --mars-base-color: #ffffff; + --mars-content-color: #cdcdcd; + --mars-text-color: #ffffff; + --mars-hover-btn-bg: #3ea6ff; + --mars-click-btn-bg: #015dab; + --mars-disable-btn-bg: #cdcdcd; + --mars-base-border: #ffffff; + --mars-select-bg: rgba(0, 138, 255, 0.2); + --mars-bg-base: rgba(23, 49, 71, 0.8); + --mars-odd-table-bg: rgba(0, 138, 255, 0.06); + --mars-bg-title: #0f3453; + --mars-base-border-color: #b9b9b9; + --mars-list-active: linear-gradient(90deg, rgba(0, 138, 255, 0) 0%, rgba(0, 138, 255, 0.58) 53%, rgba(0, 138, 255, 0.02) 100%); + --mars-title-active: linear-gradient(0deg, rgba(0, 138, 255, 0.6) 0%, rgba(0, 138, 255, 0) 100%); + --mars-title-text-active: #ffffff; + --mars-menu-emb: url(../assets/images/sub-menu-emb.png); + --mars-msg-title-bg: url(../assets/images/msg-title-bg.png); + --mars-msg-title-color: #c7d3dd; + --mars-msg-content-bg: url("../assets/images/border-image-base.png"); + --mars-alert-title-color: #0089fe; + --mars-scrollbar-thumb: #134875; + --mars-scrollbar-track: #173147; + --mars-sub-title-color: #cdcdcd; + --mars-collapse-title-bg: url("@/mars/components/mars-ui/assets/images/tab-title.png"); +} diff --git a/src/mars/components/mars-ui/themes/dark/zhts.less b/src/mars/components/mars-ui/themes/dark/zhts.less new file mode 100644 index 0000000..603ae04 --- /dev/null +++ b/src/mars/components/mars-ui/themes/dark/zhts.less @@ -0,0 +1,5 @@ +// 综合态势css变量 +:root[data-theme="dark"] { + --zhts-title-bg: url("../assets/images/header-bg.png"); + --zhts-title-img: url("../assets/images/heade-title-bg.png"); +} diff --git a/src/mars/components/mars-ui/themes/index.ts b/src/mars/components/mars-ui/themes/index.ts new file mode 100644 index 0000000..231e30b --- /dev/null +++ b/src/mars/components/mars-ui/themes/index.ts @@ -0,0 +1,2 @@ +import "./dark/index.less" +import "./light/index.less" diff --git a/src/mars/components/mars-ui/themes/light/index.less b/src/mars/components/mars-ui/themes/light/index.less new file mode 100644 index 0000000..9948761 --- /dev/null +++ b/src/mars/components/mars-ui/themes/light/index.less @@ -0,0 +1,40 @@ +@import url("./zhts.less"); + +:root[data-theme="light"] { + --mars-primary-color: rgb(0, 138, 255); + --mars-primary-half-color: rgb(0, 138, 255); + --mars-sub-color: #26ddff; + --mars-danger-color: #f75165; + --mars-warning-color: #ff8041; + --mars-success-color: #18af92; + --mars-base-color: #ffffff; + --mars-content-color: #cdcdcd; + --mars-text-color: #19212f; + --mars-hover-btn-bg: #3ea6ff; + --mars-click-btn-bg: #015dab; + --mars-disable-btn-bg: #cdcdcd; + --mars-base-border: #e9ecf3; + --mars-select-bg: rgba(0, 138, 255, 0.2); + --mars-bg-base: #ffffff; + --mars-odd-table-bg: #f4faff; // 奇数表格背景 + --mars-bg-title: rgb(0, 138, 255); // 普通的头部背景色 + --mars-base-border-color: #b9b9b9; + --mars-list-active: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 98%, rgb(0, 138, 255) 100%); + + --mars-title-active: rgba(255, 255, 255, 0.8); + --mars-title-text-active: #ffffff; + + --mars-menu-emb: url(../assets/images/sub-menu-emb-light.png); + + --mars-msg-title-bg: #008aff; + --mars-msg-title-color: #1995ff; + --mars-msg-content-bg: #ffffff; + + --mars-alert-title-color: #ffffff; + --mars-sub-title-color: #707782; // 小标题的颜色 + + --mars-scrollbar-thumb: rgba(0, 138, 255, 0.4); + --mars-scrollbar-track: rgb(236, 236, 236); + + --mars-collapse-title-bg: #008aff; +} diff --git a/src/mars/components/mars-ui/themes/light/zhts.less b/src/mars/components/mars-ui/themes/light/zhts.less new file mode 100644 index 0000000..cfa72f1 --- /dev/null +++ b/src/mars/components/mars-ui/themes/light/zhts.less @@ -0,0 +1,4 @@ +// 综合态势css变量 +:root[data-theme="light"] { + --zhts-title-bg: #008AFF; +} diff --git a/src/mars/components/mars-work/main-view.vue b/src/mars/components/mars-work/main-view.vue new file mode 100644 index 0000000..52e77c1 --- /dev/null +++ b/src/mars/components/mars-work/main-view.vue @@ -0,0 +1,82 @@ + + + + + + diff --git a/src/mars/components/mars-work/mars-map.vue b/src/mars/components/mars-work/mars-map.vue new file mode 100644 index 0000000..dc15e62 --- /dev/null +++ b/src/mars/components/mars-work/mars-map.vue @@ -0,0 +1,355 @@ + + + + diff --git a/src/mars/components/mars-work/widget.vue b/src/mars/components/mars-work/widget.vue new file mode 100644 index 0000000..209d587 --- /dev/null +++ b/src/mars/components/mars-work/widget.vue @@ -0,0 +1,41 @@ + + diff --git a/src/mars/install/index.ts b/src/mars/install/index.ts new file mode 100644 index 0000000..2d29839 --- /dev/null +++ b/src/mars/install/index.ts @@ -0,0 +1,26 @@ +import "mars3d-cesium/Build/Cesium/Widgets/widgets.css" +import * as Cesium from "mars3d-cesium" + +import "mars3d/dist/mars3d.css" +import * as mars3d from "mars3d" + + +import { App } from "vue" +import { injectState, key } from "@/mars/common/store/widget" +import store from "./widget-store" +import MarsUIInstall from "@/mars/components/mars-ui" +import "@/mars/components/mars-ui/common" + +export default { + install: (app: App) => { + // mars3d sdk的挂载 + app.config.globalProperties.Cesium = Cesium + app.config.globalProperties.mars3d = mars3d + + // mars3d基础项目 + MarsUIInstall(app) + app.use(injectState(store), key) + + return app + } +} diff --git a/src/mars/install/widget-store.ts b/src/mars/install/widget-store.ts new file mode 100644 index 0000000..c301cd4 --- /dev/null +++ b/src/mars/install/widget-store.ts @@ -0,0 +1,56 @@ +/** + * index页面的widget配置 + * @copyright 火星科技 mars3d.cn + * @author 木遥 2022-02-19 + */ +import { defineAsyncComponent, markRaw } from "vue" +import { WidgetState } from "@/mars/common/store/widget" +import { StoreOptions } from "vuex" + +const store: StoreOptions = { + state: { + widgets: [ + { + component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/query-poi/index.vue"))), + name: "query-poi", + autoDisable: true + }, + { + component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/toolbar/index.vue"))), + name: "toolbar", + autoDisable: true + }, + { + component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-basemap/index.vue"))), + name: "manage-basemap", + group: "manage" + }, + { + component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-layers/index.vue"))), + name: "manage-layers", + group: "manage", + disableOther: ["roamLine"] + }, + { + component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-layers/layer-tree.vue"))), + name: "layer-tree" + }, + { + component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-layers/layer-picture-heatmap.vue"))), + name: "layer-picture-heatmap" + }, + { + component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/manage-layers/layer-picture-guihua.vue"))), + name: "layer-picture-guihua" + }, + { + component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/location-point/index.vue"))), + name: "location-point", + group: "tools" + } + ], + openAtStart: ["query-poi", "toolbar"] + } +} + +export default store diff --git a/src/mars/misc/env.d.ts b/src/mars/misc/env.d.ts new file mode 100644 index 0000000..8725e5a --- /dev/null +++ b/src/mars/misc/env.d.ts @@ -0,0 +1,44 @@ +/// +/** + * 统一定义ts模块类型 + * @copyright 火星科技 mars3d.cn + * @author 木遥 2022-01-01 + */ + +declare module "*.vue" { + import { DefineComponent } from "vue" + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types + const component: DefineComponent<{}, {}, any> + export default component +} + +declare module "nprogress" { + const nprogress: any + export default nprogress +} + +declare module "uuid" { + export const v4: any +} + +declare module "mapv" { + export const geojson: any + export const DataSet: any + export const utilCityCenter: any + export const utilCurve: any +} + +declare module "kml-geojson" { + export const toKml: (geojson:any, options:any) => any + export const toGeoJSON: (doc:any) => any +} + +// declare module "*.svg" { +// const svg: any +// export default svg +// } + +// declare module "*.png" { +// const png: string +// export default png +// } diff --git a/src/mars/utils/file-util.ts b/src/mars/utils/file-util.ts new file mode 100644 index 0000000..9350d6f --- /dev/null +++ b/src/mars/utils/file-util.ts @@ -0,0 +1,81 @@ +/** + * 文件处理相关 静态Util方法 + * + * @copyright 火星科技 mars3d.cn + * @author 木遥 2022-01-01 + */ +import { toKml } from "kml-geojson" +import _ from "lodash" +import { createApp } from "vue" + +export function saveJSON(data: any[]) { + if (data == null || !data) { + alert("当前未标记任何数据！") + } else { + const strData = JSON.stringify(data) + + const aLink = document.createElement("a") + aLink.download = "我的标记点.json" + const blob = new Blob([strData]) + aLink.href = URL.createObjectURL(blob) + document.body.appendChild(aLink) + aLink.click() + document.body.removeChild(aLink) + } +} + +/** + * 读取json文件内容 + * + * @template T 返回的数据类型 + * @param {*} file 文件选择框选择的文件对象 + * @return {*} {Promise} + */ +export function readJSON(file: any): Promise { + return new Promise((resolve) => { + const fileName = file.name + const fileType = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase() + if (fileType !== "json") { + alert("文件类型不合法,请选择json格式标注文件！") + return + } + + if (window.FileReader) { + const reader = new FileReader() + reader.readAsText(file, "UTF-8") + reader.onloadend = function () { + resolve(JSON.parse(this.result as string)) + } + } + }) +} + +export function saveGeoJSON2Kml(geojson: string, options: any): any { + const geojsonObject = _.cloneDeep(geojson) + + const kml = toKml(geojsonObject, { + name: "Mars3D标绘数据", + documentName: "Mars3D标绘数据文件", + documentDescription: "标绘数据 by mars3d.cn", + simplestyle: true, + ...options + }) + return kml +} + +/** + * Vue3组件示例化为Popup的DOM + * + * @param {*} comp 传入的vue组件 + * @param {*} para 传入的vue组件的参数 + * @return {*} HTMLElement + */ +export function initVue3Popup(comp, para) { + const vNodeDom = document.createElement("div") + document.body.appendChild(vNodeDom) + + const vNode = createApp(comp, { ...para }) // vue2中可使用extend + vNode.mount(vNodeDom) + return vNode._container +} + diff --git a/src/mars/utils/getDefaultContextMenu.ts b/src/mars/utils/getDefaultContextMenu.ts new file mode 100644 index 0000000..dbaad17 --- /dev/null +++ b/src/mars/utils/getDefaultContextMenu.ts @@ -0,0 +1,840 @@ +import * as mars3d from "mars3d" +import { $alert as globalAlert } from "@/mars/components/mars-ui/index" +import { + Home, + Local, + PreviewOpen, + AppSwitch, + Forbid, + Cube, + MultiTriangular, + Shovel, + Close, + MapDistance, + Ruler, + Texture, + AutoHeightOne, + Compass, + DeleteKey, + Mark, + Label, + Change, + BringToFrontOne, + Asterisk, + Rectangle, + Editor, + Export, + ClearFormat, + Effects, + LightRain, + Snow, + Fog, + Halo, + Brightness, + DarkMode, + Blackboard, + HighLight, + Config, + LandSurveying, + TwoTriangles, + Sun, + FlightAirflow, + AddPicture, + SwitchThemes, + Agreement, + TakeOff, + KeyboardOne, + RecentViewsSort, + MoveInOne, + ExclusiveGateway, + CloseOne, + LockOne, + Box, + MonitorOff, + MapTwo, + International, + DatabaseForbid +} from "@icon-park/svg" + +const Cesium = mars3d.Cesium + +// 获取平台内置的右键菜单 +export function getDefaultContextMenu(map) { + const that = map.contextmenu + return [ + { + text: "查看此处坐标", + icon: Local({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return Cesium.defined(e.cartesian) + }, + callback: function (e) { + // 经纬度 + const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian) + const ptNew = mars3d.PointTrans.proj4Trans([mpt.lng, mpt.lat], "EPSG:4326", mars3d.CRS.CGCS2000_GK_Zone_3) + + const inhtml = ` + 经度:${mpt.lng}, 纬度:${mpt.lat}, 海拔:${mpt.alt}, + + 横坐标:${ptNew[0].toFixed(1)}, 纵坐标:${ptNew[1].toFixed(1)} (CGCS2000) + ` + globalAlert(inhtml, "位置信息") + } + }, + { + text: "查看当前视角", + icon: PreviewOpen({ theme: "outline", fill: "#fff", size: "18" }), + callback: function (e) { + const mpt = JSON.stringify(map.getCameraView()) + globalAlert(mpt, "当前视角信息") + } + }, + { + text: "视角切换", + icon: SwitchThemes({ theme: "outline", fill: "#fff", size: "18" }), + children: [ + { + text: "允许进入地下", + icon: Agreement({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return map.scene.screenSpaceCameraController.enableCollisionDetection + }, + callback: function (e) { + map.scene.screenSpaceCameraController.enableCollisionDetection = false + } + }, + { + text: "禁止进入地下", + icon: Forbid({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !map.scene.screenSpaceCameraController.enableCollisionDetection + }, + callback: function (e) { + map.scene.screenSpaceCameraController.enableCollisionDetection = true + } + }, + { + text: "绕此处环绕飞行", + icon: TakeOff({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return e.cartesian && (!that.rotatePoint || !that.rotatePoint?.isStart) + }, + callback: function (e) { + if (!that.rotatePoint) { + that.rotatePoint = new mars3d.thing.RotatePoint() + map.addThing(that.rotatePoint) + } + that.rotatePoint.start(e.cartesian) + } + }, + { + text: "关闭环绕飞行", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return that.rotatePoint?.isStart + }, + callback: function (e) { + if (that.rotatePoint) { + that.rotatePoint.stop() + } + } + }, + + { + text: "移动到此处", + icon: MoveInOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return Cesium.defined(e.cartesian) + }, + callback: function (e) { + const cameraDistance = Cesium.Cartesian3.distance(e.cartesian, map.camera.positionWC) * 0.1 + + map.flyToPoint(e.cartesian, { + radius: cameraDistance, // 距离目标点的距离 + maximumHeight: map.camera.positionCartographic.height + }) + } + }, + { + text: "第一视角站到此处", + icon: RecentViewsSort({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return Cesium.defined(e.cartesian) + }, + callback: function (e) { + map.camera.flyTo({ + destination: mars3d.PointUtil.addPositionsHeight(e.cartesian, 10), // 升高10米 + orientation: { + heading: map.camera.heading, + pitch: 0.0, + roll: 0.0 + }, + maximumHeight: map.camera.positionCartographic.height + }) + } + }, + { + text: "开启键盘漫游", + icon: KeyboardOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !map.keyboardRoam.enabled + }, + callback: function (e) { + map.keyboardRoam.enabled = true + } + }, + { + text: "关闭键盘漫游", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return map.keyboardRoam.enabled + }, + callback: function (e) { + map.keyboardRoam.enabled = false + } + }, + { + text: "取消锁定", + icon: LockOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return map.trackedEntity !== undefined + }, + callback: function (e) { + map.trackedEntity = undefined + } + } + ] + }, + { + text: "三维模型", + icon: Cube({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型 + return Cesium.defined(model) + }, + children: [ + { + text: "显示三角网", + icon: MultiTriangular({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型 + return !model.debugWireframe + }, + callback: function (e) { + const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型 + model.debugWireframe = true + } + }, + { + text: "关闭三角网", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型 + return model.debugWireframe + }, + callback: function (e) { + const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型 + model.debugWireframe = false + } + }, + { + text: "显示包围盒", + icon: Box({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型 + return !model.debugShowBoundingVolume + }, + callback: function (e) { + const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型 + model.debugShowBoundingVolume = true + } + }, + { + text: "关闭包围盒", + icon: MonitorOff({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型 + return model.debugShowBoundingVolume + }, + callback: function (e) { + const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型 + model.debugShowBoundingVolume = false + } + } + ] + }, + { + text: "地形服务", + icon: International({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return Cesium.defined(e.cartesian) + }, + children: [ + { + text: "开启地形", + icon: MapTwo({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !map.hasTerrain + }, + callback: function (e) { + map.hasTerrain = true + } + }, + { + text: "关闭地形", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return map.hasTerrain + }, + callback: function (e) { + map.hasTerrain = false + } + }, + { + text: "显示三角网", + icon: MultiTriangular({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !map.scene.globe._surface.tileProvider._debug.wireframe + }, + callback: function (e) { + map.scene.globe._surface.tileProvider._debug.wireframe = true + } + }, + { + text: "关闭三角网", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return map.scene.globe._surface.tileProvider._debug.wireframe + }, + callback: function (e) { + map.scene.globe._surface.tileProvider._debug.wireframe = false + } + } + ] + }, + { + text: "图上量算", + icon: Ruler({ theme: "outline", fill: "#fff", size: "18" }), + children: [ + { + text: "距离", + icon: MapDistance({ theme: "outline", fill: "#fff", size: "18" }), + callback: function (e) { + if (!that.measure) { + that.measure = new mars3d.thing.Measure() + map.addThing(that.measure) + } + that.measure.distance() + } + }, + { + text: "面积", + icon: Texture({ theme: "outline", fill: "#fff", size: "18" }), + callback: function (e) { + if (!that.measure) { + that.measure = new mars3d.thing.Measure() + map.addThing(that.measure) + } + that.measure.area() + } + }, + { + text: "高度差", + icon: AutoHeightOne({ theme: "outline", fill: "#fff", size: "18" }), + callback: function (e) { + if (!that.measure) { + that.measure = new mars3d.thing.Measure() + map.addThing(that.measure) + } + that.measure.heightTriangle() + } + }, + { + text: "角度", + icon: Compass({ theme: "outline", fill: "#fff", size: "18" }), + callback: function (e) { + if (!that.measure) { + that.measure = new mars3d.thing.Measure() + map.addThing(that.measure) + } + that.measure.angle() + } + }, + { + text: "删除测量", + icon: DeleteKey({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return that.measure && that.measure.hasMeasure + }, + callback: function (e) { + if (that.measure) { + that.measure.clear() + } + } + } + ] + }, + + { + text: "图上标记", + icon: Mark({ theme: "outline", fill: "#fff", size: "18" }), + children: [ + { + text: "标记点", + icon: Label({ theme: "outline", fill: "#fff", size: "18" }), + callback: function (e) { + map.graphicLayer.startDraw({ + type: "point", + style: { + pixelSize: 12, + color: "#3388ff" + }, + success: function (graphic) { + // eslint-disable-next-line no-console + console.log(JSON.stringify(graphic.coordinates)) + } + }) + } + }, + { + text: "标记线", + icon: Change({ theme: "outline", fill: "#fff", size: "18" }), + callback: function (e) { + map.graphicLayer.startDraw({ + type: "polyline", + style: { + color: "#55ff33", + width: 3 + }, + success: function (graphic) { + // eslint-disable-next-line no-console + console.log(JSON.stringify(graphic.coordinates)) + } + }) + } + }, + { + text: "标记面", + icon: BringToFrontOne({ theme: "outline", fill: "#fff", size: "18" }), + callback: function (e) { + map.graphicLayer.startDraw({ + type: "polygon", + style: { + color: "#29cf34", + opacity: 0.5, + outline: true, + outlineWidth: 2.0 + }, + success: function (graphic) { + // eslint-disable-next-line no-console + console.log(JSON.stringify(graphic.coordinates)) + } + }) + } + }, + { + text: "标记圆", + icon: Asterisk({ theme: "outline", fill: "#fff", size: "18" }), + callback: function (e) { + map.graphicLayer.startDraw({ + type: "circle", + style: { + color: "#ffff00", + opacity: 0.6 + }, + success: function (graphic) { + // eslint-disable-next-line no-console + console.log(JSON.stringify(graphic.coordinates)) + } + }) + } + }, + { + text: "标记矩形", + icon: Rectangle({ theme: "outline", fill: "#fff", size: "18" }), + callback: function (e) { + map.graphicLayer.startDraw({ + type: "rectangle", + style: { + color: "#ffff00", + opacity: 0.6 + }, + success: function (graphic) { + // eslint-disable-next-line no-console + console.log(JSON.stringify(graphic.coordinates)) + } + }) + } + }, + { + text: "允许编辑", + icon: Editor({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !map.graphicLayer.hasEdit + }, + callback: function (e) { + map.graphicLayer.hasEdit = true + } + }, + { + text: "禁止编辑", + icon: DatabaseForbid({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return map.graphicLayer.hasEdit + }, + callback: function (e) { + map.graphicLayer.hasEdit = false + } + }, + { + text: "导出GeoJSON", + icon: Export({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return map.graphicLayer.length > 0 + }, + callback: function (e) { + mars3d.Util.downloadFile("图上标记.json", JSON.stringify(map.graphicLayer.toGeoJSON())) + } + }, + { + text: "清除所有标记", + icon: ClearFormat({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return map.graphicLayer.length > 0 + }, + callback: function (e) { + map.graphicLayer.clear() + } + } + ] + }, + { + text: "特效效果", + icon: Effects({ theme: "outline", fill: "#fff", size: "18" }), + children: [ + { + text: "开启下雨", + icon: LightRain({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !that.rainEffect + }, + callback: function (e) { + if (!that.rainEffect) { + that.rainEffect = new mars3d.effect.RainEffect() + map.addEffect(that.rainEffect) + } + } + }, + { + text: "关闭下雨", + icon: Close({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return that.rainEffect + }, + callback: function (e) { + if (that.rainEffect) { + map.removeEffect(that.rainEffect, true) + delete that.rainEffect + } + } + }, + { + text: "开启下雪", + icon: Snow({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !that.snowEffect + }, + callback: function (e) { + if (!that.snowEffect) { + that.snowEffect = new mars3d.effect.SnowEffect() + map.addEffect(that.snowEffect) + } + } + }, + { + text: "关闭下雪", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return that.snowEffect + }, + callback: function (e) { + if (that.snowEffect) { + map.removeEffect(that.snowEffect, true) + delete that.snowEffect + } + } + }, + + { + text: "开启雾天气", + icon: Fog({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !that.fogEffect + }, + callback: function (e) { + if (!that.fogEffect) { + const height = map.camera.positionCartographic.height * 2 + that.fogEffect = new mars3d.effect.FogEffect({ + fogByDistance: new Cesium.Cartesian4(0.1 * height, 0.1, height, 0.8) + }) + map.addEffect(that.fogEffect) + } + } + }, + { + text: "关闭雾天气", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return that.fogEffect + }, + callback: function (e) { + if (that.fogEffect) { + map.removeEffect(that.fogEffect, true) + delete that.fogEffect + } + } + }, + + { + text: "开启泛光", + icon: Halo({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !that.bloomEffect + }, + callback: function (e) { + if (!that.bloomEffect) { + that.bloomEffect = new mars3d.effect.BloomEffect() + map.addEffect(that.bloomEffect) + } + } + }, + { + text: "关闭泛光", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return that.bloomEffect + }, + callback: function (e) { + if (that.bloomEffect) { + map.removeEffect(that.bloomEffect, true) + delete that.bloomEffect + } + } + }, + + { + text: "开启亮度", + icon: Brightness({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !that.brightnessEffect + }, + callback: function (e) { + if (!that.brightnessEffect) { + that.brightnessEffect = new mars3d.effect.BrightnessEffect() + map.addEffect(that.brightnessEffect) + } + } + }, + { + text: "关闭亮度", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return that.brightnessEffect + }, + callback: function (e) { + if (that.brightnessEffect) { + map.removeEffect(that.brightnessEffect, true) + delete that.brightnessEffect + } + } + }, + + { + text: "开启夜视", + icon: DarkMode({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !that.nightVisionEffect + }, + callback: function (e) { + if (!that.nightVisionEffect) { + that.nightVisionEffect = new mars3d.effect.NightVisionEffect() + map.addEffect(that.nightVisionEffect) + } + } + }, + { + text: "关闭夜视", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return that.nightVisionEffect + }, + callback: function (e) { + if (that.nightVisionEffect) { + map.removeEffect(that.nightVisionEffect, true) + delete that.nightVisionEffect + } + } + }, + + { + text: "开启黑白", + icon: Blackboard({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !that.blackAndWhiteEffect + }, + callback: function (e) { + if (!that.blackAndWhiteEffect) { + that.blackAndWhiteEffect = new mars3d.effect.BlackAndWhiteEffect() + map.addEffect(that.blackAndWhiteEffect) + } + } + }, + { + text: "关闭黑白", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return that.blackAndWhiteEffect + }, + callback: function (e) { + if (that.blackAndWhiteEffect) { + map.removeEffect(that.blackAndWhiteEffect, true) + delete that.blackAndWhiteEffect + } + } + }, + + { + text: "开启拾取高亮", + icon: HighLight({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !that.outlineEffect + }, + callback: function (e) { + if (!that.outlineEffect) { + that.outlineEffect = new mars3d.effect.OutlineEffect() + map.addEffect(that.outlineEffect) + } + } + }, + { + text: "关闭拾取高亮", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return that.outlineEffect + }, + callback: function (e) { + if (that.outlineEffect) { + map.removeEffect(that.outlineEffect, true) + delete that.outlineEffect + } + } + } + ] + }, + { + text: "场景设置", + icon: Config({ theme: "outline", fill: "#fff", size: "18" }), + children: [ + { + text: "开启深度监测", + icon: LandSurveying({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !map.scene.globe.depthTestAgainstTerrain + }, + callback: function (e) { + map.scene.globe.depthTestAgainstTerrain = true + } + }, + { + text: "关闭深度监测", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return map.scene.globe.depthTestAgainstTerrain + }, + callback: function (e) { + map.scene.globe.depthTestAgainstTerrain = false + } + }, + + { + text: "显示星空背景", + icon: TwoTriangles({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !map.scene.skyBox.show + }, + callback: function (e) { + map.scene.skyBox.show = true // 天空盒 + map.scene.moon.show = true // 太阳 + map.scene.sun.show = true // 月亮 + } + }, + { + text: "关闭星空背景", + icon: ExclusiveGateway({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return map.scene.skyBox.show + }, + callback: function (e) { + map.scene.skyBox.show = false // 天空盒 + map.scene.moon.show = false // 太阳 + map.scene.sun.show = false // 月亮 + } + }, + { + text: "开启日照阴影", + icon: Sun({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !map.viewer.shadows + }, + callback: function (e) { + map.viewer.shadows = true + map.viewer.terrainShadows = Cesium.ShadowMode.ENABLED + map.scene.globe.enableLighting = true + } + }, + { + text: "关闭日照阴影", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return map.viewer.shadows + }, + callback: function (e) { + map.viewer.shadows = false + map.viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLY + map.scene.globe.enableLighting = false + } + }, + { + text: "开启大气渲染", + icon: FlightAirflow({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return !map.scene.skyAtmosphere.show + }, + callback: function (e) { + map.scene.skyAtmosphere.show = true + map.scene.globe.showGroundAtmosphere = true + } + }, + { + text: "关闭大气渲染", + icon: CloseOne({ theme: "outline", fill: "#fff", size: "18" }), + show: function (e) { + return map.scene.skyAtmosphere.show + }, + callback: function (e) { + map.scene.skyAtmosphere.show = false + map.scene.globe.showGroundAtmosphere = false + } + }, + + { + text: "场景出图", + icon: AddPicture({ theme: "outline", fill: "#fff", size: "18" }), + callback: function (e) { + map.expImage() + } + } + ] + } + ] +} diff --git a/src/mars/utils/mars-util.ts b/src/mars/utils/mars-util.ts new file mode 100644 index 0000000..80176d3 --- /dev/null +++ b/src/mars/utils/mars-util.ts @@ -0,0 +1,121 @@ +/** + * 项目内通用 静态Util方法 + * + * @copyright 火星科技 mars3d.cn + * @author 木遥 2022-01-01 + */ +import * as mars3d from "mars3d" + +/** + * 判断是否 "经度,纬度" 字符串值 + * + * @export + * @param {string} text 传入的字符串 + * @return {boolean} 是否 经度,纬度 + */ +export function isLonLat(text: string): boolean { + const reg = /^-?((0|1?[0-7]?[0-9]?)(([.][0-9]*)?)|180(([.][0]*)?)),-?((0|[1-8]?[0-9]?)(([.][0-9]*)?)|90(([.][0]*)?))$/ + return reg.test(text) +} + +/** + * 设置自动高度值 + * @param {function} callback 窗口大小变化时的回调,返回当前计算完成的高度 + * @param {number} [lose=0] 窗口高度基础上减少的值 + * @param {string} [container="sanbox-warpper"] 窗口id + * @return {void} + */ +export function setAutoHeight(callback: (v: number) => void, lose = 0, container = "sanbox-warpper"): void { + const wapper = document.getElementById(container) || document.body + + let wapperHeight = wapper?.clientHeight || 0 + const result = wapperHeight - lose + callback(result) + + const resize = () => { + wapperHeight = wapper?.clientHeight || 0 + const resizeHeight = wapperHeight - lose + callback(resizeHeight) + } + + window.addEventListener("resize", resize) + + resize() + // return () => { + // window.removeEventListener("resize", resize) + // } +} + +/** + * 获取URL参数 + * + * @export + * @param {string} parameter url值 + * @return {string | null} 参数值 + */ +export function getQueryString(parameter: string): string | null { + return new URL(window.location.href).searchParams.get(parameter) +} + + +/** + * 将指定的异步方法转为Promise + * + * @param {*} context + * @param {string} apiName + * @param {string} [success="success"] + * @param {string} [error="error"] + * @return {*} Promise + */ +export function apiToSync(context: any, apiName: string, success = "success", error = "error") { + return apiArrayToSync(context, [apiName], success, error)[0] +} + +/** + * 将指定的多个异步方法转为Promise + * + * @param {*} context + * @param {string[]} apiNames + * @param {string} [success="success"] + * @param {string} [error="error"] + * @return {*} Promise[] + */ +export function apiArrayToSync(context: any, apiNames: string[], success = "success", error = "error") { + return apiNames.map((name) => { + const apiFunc = context[name] + + return (options: any) => + new Promise((resolve, reject) => { + options[success] = function (result: any) { + resolve(result) + } + options[error] = function (error) { + reject(error) + } + // console.log("zhix", options) + apiFunc.call(context, options) + }) + }) +} + +/** + * 地图打印，连接打印机，设置参数 + * + * @param {*} base64 map.expImage方法的回调函数参数 + */ +export function printImage(base64: any) { + const iframe: HTMLIFrameElement = mars3d.DomUtil.create("iframe", "", document.body) + let doc = null + iframe.setAttribute("style", "position:absolute;width:0px;height:0px;left:-500px;top:-500px;") + document.body.appendChild(iframe) + doc = iframe.contentWindow.document + doc.write(`
`) + doc.close() + + iframe.focus() + iframe.contentWindow.focus() + setTimeout(() => { + iframe.contentWindow.print() + document.body.removeChild(iframe) + }, 500) +} diff --git a/src/mars/views/index.vue b/src/mars/views/index.vue new file mode 100644 index 0000000..f57572a --- /dev/null +++ b/src/mars/views/index.vue @@ -0,0 +1,30 @@ + + + + diff --git a/src/mars/widgets/basic/location-point/index.vue b/src/mars/widgets/basic/location-point/index.vue new file mode 100644 index 0000000..218cc0e --- /dev/null +++ b/src/mars/widgets/basic/location-point/index.vue @@ -0,0 +1,304 @@ + + + + diff --git a/src/mars/widgets/basic/location-point/map.ts b/src/mars/widgets/basic/location-point/map.ts new file mode 100644 index 0000000..38bf010 --- /dev/null +++ b/src/mars/widgets/basic/location-point/map.ts @@ -0,0 +1,102 @@ +/** + * 图上选点 + * @copyright 火星科技 mars3d.cn + * @author 火星胡椒 2022-01-10 + */ +import * as mars3d from "mars3d" +let map: mars3d.Map // 地图对象 + +// 事件对象，用于抛出事件给vue +export const eventTarget = new mars3d.BaseClass() + +// 初始化当前业务 +export function onMounted(mapInstance: mars3d.Map): void { + map = mapInstance // 记录map +} + +// 释放当前业务 +export function onUnmounted(): void { + if (pointEntity) { + pointEntity.remove() + pointEntity = null + } + eventTarget.off() + map = null +} + +// 获取默认point点 +export function defultPoint() { + const point = map.getCenter() + point.format() + return { + lng: point.lng, + lat: point.lat, + alt: point.alt + } +} + +// 坐标转化的三种方法 +export function marsUtilFormtNum(item: number, num: number) { + return mars3d.Util.formatNum(item, num) +} + +export function marsPointTrans(item: number) { + return mars3d.PointTrans.degree2dms(item) +} + +export function marsProj4Trans(JD: number, WD: number, radio: string) { + if (radio === "2") { + return mars3d.PointTrans.proj4Trans([JD, WD], mars3d.CRS.EPSG4326, mars3d.CRS.CGCS2000_GK_Zone_6) + } else { + return mars3d.PointTrans.proj4Trans([JD, WD], mars3d.CRS.EPSG4326, mars3d.CRS.CGCS2000_GK_Zone_3) + } +} + +// 转换成十进制的方法 +export function marsDms2degree(du: number, fen: number, miao: number) { + return mars3d.PointTrans.dms2degree(du, fen, miao) +} +export function marsZONEtoCRS(jd: number, wd: number, radio: string) { + if (radio === "2") { + return mars3d.PointTrans.proj4Trans([jd, wd], mars3d.CRS.CGCS2000_GK_Zone_6, mars3d.CRS.EPSG4326) + } else { + return mars3d.PointTrans.proj4Trans([jd, wd], mars3d.CRS.CGCS2000_GK_Zone_3, mars3d.CRS.EPSG4326) + } +} + +// 地图选点 +export function bindMourseClick() { + map.setCursor("crosshair") + map.once(mars3d.EventType.click, function (event: any) { + map.setCursor("") + const cartesian = event.cartesian + const point = mars3d.LngLatPoint.fromCartesian(cartesian) + point.format() // 经度、纬度、高度 + eventTarget.fire("clickMap", { point }) + updateMarker(false, point.lng, point.lat, point.alt) + }) +} + +let pointEntity: any +export function updateMarker(hasCenter: boolean, jd: number, wd: number, alt: number) { + const position = [jd, wd, alt] + + if (pointEntity == null) { + pointEntity = new mars3d.graphic.PointEntity({ + position: position, + style: { + color: "#3388ff", + pixelSize: 10, + outlineColor: "#ffffff", + outlineWidth: 2 + } + }) + map.graphicLayer.addGraphic(pointEntity) + } else { + pointEntity.position = position + } + + if (hasCenter) { + pointEntity.flyTo({ radius: 1000 }) + } +} diff --git a/src/mars/widgets/basic/manage-basemap/index.vue b/src/mars/widgets/basic/manage-basemap/index.vue new file mode 100644 index 0000000..208f85a --- /dev/null +++ b/src/mars/widgets/basic/manage-basemap/index.vue @@ -0,0 +1,88 @@ + + + + diff --git a/src/mars/widgets/basic/manage-basemap/map.ts b/src/mars/widgets/basic/manage-basemap/map.ts new file mode 100644 index 0000000..2351e0f --- /dev/null +++ b/src/mars/widgets/basic/manage-basemap/map.ts @@ -0,0 +1,33 @@ +/** + * 底图控制 + * @copyright 火星科技 mars3d.cn + * @author 火星渣渣灰 2022-01-10 + */ +import * as mars3d from "mars3d" + +let map: mars3d.Map // 地图对象 + +// 初始化当前业务 +export function onMounted(mapInstance: mars3d.Map): void { + map = mapInstance // 记录map +} + +// 释放当前业务 +export function onUnmounted(): void { + map = null +} + +export function changeBaseMaps(id: string) { + map.basemap = id +} + +export function changeTerrain(value: boolean) { + map.hasTerrain = value +} + +export function getLayers() { + return { + baseMaps: map.getBasemaps(true), + hasTerrain: map.hasTerrain + } +} diff --git a/src/mars/widgets/basic/manage-layers/img/guihua.jpg b/src/mars/widgets/basic/manage-layers/img/guihua.jpg new file mode 100644 index 0000000..f05d2ee Binary files /dev/null and b/src/mars/widgets/basic/manage-layers/img/guihua.jpg differ diff --git a/src/mars/widgets/basic/manage-layers/img/heatmap.png b/src/mars/widgets/basic/manage-layers/img/heatmap.png new file mode 100644 index 0000000..35926a7 Binary files /dev/null and b/src/mars/widgets/basic/manage-layers/img/heatmap.png differ diff --git a/src/mars/widgets/basic/manage-layers/index.vue b/src/mars/widgets/basic/manage-layers/index.vue new file mode 100644 index 0000000..8a4d3c2 --- /dev/null +++ b/src/mars/widgets/basic/manage-layers/index.vue @@ -0,0 +1,332 @@ + + + + diff --git a/src/mars/widgets/basic/manage-layers/layer-picture-guihua.vue b/src/mars/widgets/basic/manage-layers/layer-picture-guihua.vue new file mode 100644 index 0000000..9bd26c1 --- /dev/null +++ b/src/mars/widgets/basic/manage-layers/layer-picture-guihua.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/mars/widgets/basic/manage-layers/layer-picture-heatmap.vue b/src/mars/widgets/basic/manage-layers/layer-picture-heatmap.vue new file mode 100644 index 0000000..b9ae9a6 --- /dev/null +++ b/src/mars/widgets/basic/manage-layers/layer-picture-heatmap.vue @@ -0,0 +1,17 @@ + + + + diff --git a/src/mars/widgets/basic/manage-layers/layer-tree.vue b/src/mars/widgets/basic/manage-layers/layer-tree.vue new file mode 100644 index 0000000..77cf8de --- /dev/null +++ b/src/mars/widgets/basic/manage-layers/layer-tree.vue @@ -0,0 +1,85 @@ + + + + diff --git a/src/mars/widgets/basic/manage-layers/map.ts b/src/mars/widgets/basic/manage-layers/map.ts new file mode 100644 index 0000000..7918e4a --- /dev/null +++ b/src/mars/widgets/basic/manage-layers/map.ts @@ -0,0 +1,87 @@ +/** + * 图层管理 + * @copyright 火星科技 mars3d.cn + * @author 火星渣渣灰 2022-01-10 + */ +import * as mars3d from "mars3d" +const Cesium = mars3d.Cesium + +let map: mars3d.Map // 地图对象 + +/** + * 初始化地图业务，生命周期钩子函数（必须） + * 框架在地图初始化完成后自动调用该函数 + * @param {mars3d.Map} mapInstance 地图对象 + * @returns {void} 无 + */ +export function onMounted(mapInstance: mars3d.Map) { + map = mapInstance // 记录首次创建的map +} + +/** + * 释放当前地图业务的生命周期函数 + * @returns {void} 无 + */ +export function onUnmounted() { + map = null +} + +export function addLayer(layer: mars3d.layer.BaseLayer) { + map.addLayer(layer) +} + +export function getLayers() { + return map.getLayers({ + basemaps: true, // 是否取config.json中的basempas + layers: true // 是否取config.json中的layers + }) +} + +// ********************************** 图层的结构树控件 ****************************** // +export function flytoModelNode(nodeid: number, nodesphere: any) { + if (!nodesphere || nodesphere[3] <= 0) { + return + } + // 构件节点位置 + let center = new Cesium.Cartesian3(nodesphere[0], nodesphere[1], nodesphere[2]) + const tiles3dLayer: mars3d.layer.TilesetLayer = map.getLayerById(nodeid) + + // 获取构件节点位置，现对于原始矩阵变化后的新位置 + center = tiles3dLayer.getPositionByOrginMatrix(center) + + // 飞行过去 + const sphere = new Cesium.BoundingSphere(center, nodesphere[3]) + map.camera.flyToBoundingSphere(sphere, { + offset: new Cesium.HeadingPitchRange(map.camera.heading, map.camera.pitch, nodesphere[3] * 1.5), + duration: 0.5 + }) +} +export function checkModelStyle(layerid: number, arrIds: any) { + // 设置tileset的样式 + if (!map) { + return + } + const tiles3dLayer = map.getLayerById(layerid) + + let titleStyle = "" + if (!arrIds.length) { + tiles3dLayer.style = null + return + } + // 勾选 + arrIds.forEach((element: any, index: number) => { + if (index === 0) { + titleStyle += "${id} ==='" + element.id + "' " + } else { + titleStyle += "|| ${id} ==='" + element.id + "'" + } + }) + tiles3dLayer.style = new Cesium.Cesium3DTileStyle({ + color: { + conditions: [ + [titleStyle, "rgb(255, 255, 255)"], + ["true", "rgba(255, 200, 200,0.2)"] + ] + } + }) +} diff --git a/src/mars/widgets/basic/query-poi/index.vue b/src/mars/widgets/basic/query-poi/index.vue new file mode 100644 index 0000000..64954de --- /dev/null +++ b/src/mars/widgets/basic/query-poi/index.vue @@ -0,0 +1,332 @@ + + + + + + diff --git a/src/mars/widgets/basic/query-poi/map.ts b/src/mars/widgets/basic/query-poi/map.ts new file mode 100644 index 0000000..9d87429 --- /dev/null +++ b/src/mars/widgets/basic/query-poi/map.ts @@ -0,0 +1,230 @@ +/** + * 高德POI 查询栏 （左上角） + * @copyright 火星科技 mars3d.cn + * @author 火星渣渣灰 2022-01-10 + */ +import * as mars3d from "mars3d" +import QueryPopup from "./query-popup.vue" +import { initVue3Popup } from "@/mars/utils/file-util" + +const Cesium = mars3d.Cesium + +let map: mars3d.Map // 地图对象 +export let graphicLayer: mars3d.layer.GraphicLayer +let queryPoi: mars3d.query.GaodePOI // GaodePOI查询 +let address: any = null +const imgArr = [] + +// 初始化当前业务 +export async function onMounted(mapInstance: mars3d.Map): Promise { + for (let i = 0; i < 6; i++) { + const img = await getCanvas(i + 1) + imgArr.push(img) + } + + map = mapInstance // 记录map + + queryPoi = new mars3d.query.GaodePOI({ + // city: '合肥市', + }) + + graphicLayer = new mars3d.layer.GraphicLayer({ + name: "POI查询", + pid: 99 // 图层管理 中使用，父节点id + }) + + graphicLayer.bindPopup((event) => { + const attr = event.graphic.attr || {} + if (!attr) { + return + } + + const dom = initVue3Popup(QueryPopup, attr) + return dom + }) + + map.addLayer(graphicLayer) + + map.on(mars3d.EventType.cameraChanged, cameraChanged) +} + +function cameraChanged() { + queryPoi.getAddress({ + location: map.getCenter(), + success: (result: any) => { + address = result + } + }) +} + +// 释放当前业务 +export function onUnmounted(): void { + map.removeLayer(graphicLayer) + map.off(mars3d.EventType.cameraChanged, cameraChanged) + graphicLayer.remove() + queryPoi = null + address = null + map = null +} + +// 查询数据 +export function queryData(val: string) { + return queryPoi.autoTip({ + text: val, + city: address?.city, + location: map.getCenter() + }) +} + +export function querySiteList(text: string, page: number) { + return queryPoi.queryText({ + text, + count: 6, + page: page - 1, + city: address?.city + }) +} + +/** + * 加载查询之后的数据，通过矢量数据展示出来 + * @param {any} arr 查询之后的数据 + * @returns {void} 无 + */ +export function showPOIArr(arr: any): void { + clearLayers() + + arr.forEach(async (item: any, index: number) => { + const jd = Number(item.lng) + const wd = Number(item.lat) + if (isNaN(jd) || isNaN(wd)) { + return + } + + item.lng = jd + item.lat = wd + + // 添加实体 + const graphic = new mars3d.graphic.BillboardEntity({ + position: Cesium.Cartesian3.fromDegrees(jd, wd), + style: { + pixelSize: 10, + color: "#ffffff", + outline: true, + outlineColor: "#ffffff", + outlineWidth: 2, + scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1), + clampToGround: true, // 贴地 + visibleDepth: false, // 是否被遮挡 + label: { + text: item.name, + font_size: 20, + color: "#ffffff", + outline: true, + outlineWidth: 2, + outlineColor: Cesium.Color.BLACK, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + pixelOffsetY: -10, // 偏移量 + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000), + clampToGround: true, // 贴地 + visibleDepth: false // 是否被遮挡 + }, + image: imgArr[index] + }, + attr: item + }) + graphicLayer.addGraphic(graphic) + + item._graphic = graphic + }) + + if (arr.length > 1) { + graphicLayer.flyTo({ radius: 5000, pitch: -90 }) + } +} + +// 获取Canvas对象 +async function getCanvas(text) { + return new Promise((resolve) => { + const img = new Image(19, 25) + img.crossOrigin = "Anonymous" + img.src = "img/poi/indexMark.png" + img.onload = () => { + const canvas = document.createElement("canvas") + canvas.width = 19 + canvas.height = 25 + const ctx = canvas.getContext("2d") + ctx.clearRect(0, 0, canvas.width, canvas.height) + // 绘制图片 + ctx.drawImage(img, 0, 0) + // 绘制文字 + ctx.fillStyle = "#ffffff" + ctx.font = "22px 楷体" + ctx.textBaseline = "middle" + ctx.fillText(text, 4, 10) + // 将图片赋予给矢量对象进行显示，this.image是父类的属性 + resolve(canvas.toDataURL("image/png")) + } + }) +} + +/** + * 判断是否为经纬度值， + * 若是，加载为矢量数据且定位至该矢量数据 + * 若否，返回 + * @param {string} text 输入框输入的关键字 + * @returns {void} 无 + */ +export function centerAtLonLat(text: string): void { + const arr = text.split(",") + if (arr.length !== 2) { + return + } + + const jd = Number(arr[0]) + const wd = Number(arr[1]) + if (isNaN(jd) || isNaN(wd)) { + return + } + + // 添加实体 + const graphic = new mars3d.graphic.PointEntity({ + position: Cesium.Cartesian3.fromDegrees(jd, wd), + style: { + color: "#3388ff", + pixelSize: 10, + outline: true, + outlineColor: "#ffffff", + outlineWidth: 2, + scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1), + clampToGround: true, // 贴地 + visibleDepth: false // 是否被遮挡 + } + }) + graphicLayer.addGraphic(graphic) + + graphic.bindPopup(`
坐标定位
+
+
${jd}
+
${wd}
+
`) + + graphic.openHighlight() + + graphic.flyTo({ + radius: 1000, // 点数据：radius控制视距距离 + scale: 1.5, // 线面数据：scale控制边界的放大比例 + complete: () => { + graphic.openPopup() + } + }) +} + +export function flyToGraphic(graphic: mars3d.graphic.BaseGraphic, option: any): void { + map.flyToGraphic(graphic, { ...option, complete: () => graphicLayer.openPopup(graphic) }) +} + +export function clearLayers(): void { + graphicLayer.closePopup() + graphicLayer.clear() +} diff --git a/src/mars/widgets/basic/query-poi/query-popup.vue b/src/mars/widgets/basic/query-poi/query-popup.vue new file mode 100644 index 0000000..e010848 --- /dev/null +++ b/src/mars/widgets/basic/query-poi/query-popup.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/src/mars/widgets/basic/toolbar/index.vue b/src/mars/widgets/basic/toolbar/index.vue new file mode 100644 index 0000000..10615ce --- /dev/null +++ b/src/mars/widgets/basic/toolbar/index.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/src/mars/widgets/demo/menu/index.vue b/src/mars/widgets/demo/menu/index.vue new file mode 100644 index 0000000..59f05b1 --- /dev/null +++ b/src/mars/widgets/demo/menu/index.vue @@ -0,0 +1,37 @@ + + + + diff --git a/src/mars/widgets/demo/menu/map.ts b/src/mars/widgets/demo/menu/map.ts new file mode 100644 index 0000000..ce1247e --- /dev/null +++ b/src/mars/widgets/demo/menu/map.ts @@ -0,0 +1,50 @@ +import * as mars3d from "mars3d" +import PopupDemo from "./popup-demo.vue" +import { initVue3Popup } from "@/mars/utils/file-util" + +export let map: mars3d.Map // 地图对象 +export let graphicLayer: mars3d.layer.GraphicLayer // 地图对象 + +// 初始化当前业务 +export function onMounted(mapInstance: mars3d.Map): void { + map = mapInstance // 记录map + + // 创建矢量数据图层 + graphicLayer = new mars3d.layer.GraphicLayer() + map.addLayer(graphicLayer) + + graphicLayer.bindPopup((event: any) => { + const attr = event.graphic.attr || {} + const dom = initVue3Popup(PopupDemo, attr) + return dom + }) + + const graphic1 = new mars3d.graphic.PointEntity({ + position: [117.194842, 31.831489, 41.21521], + style: { + color: "#ff0000", + pixelSize: 10, + outlineColor: "#ffffff", + outlineWidth: 2 + }, + attr: { remark: "示例1" } + }) + graphicLayer.addGraphic(graphic1) + + const graphic2 = new mars3d.graphic.DivGraphic({ + position: [117.229619, 31.8, 1521], + pointerEvents: true, + style: { + html: `
安徽欢迎您
` + }, + attr: { remark: "示例2" } + }) + graphicLayer.addGraphic(graphic2) + +} + +// 释放当前业务 +export function onUnmounted(): void { + map = null +} + diff --git a/src/mars/widgets/demo/menu/popup-demo.vue b/src/mars/widgets/demo/menu/popup-demo.vue new file mode 100644 index 0000000..30f0f80 --- /dev/null +++ b/src/mars/widgets/demo/menu/popup-demo.vue @@ -0,0 +1,24 @@ + + + + diff --git a/src/mars/widgets/demo/my-dialog/index.vue b/src/mars/widgets/demo/my-dialog/index.vue new file mode 100644 index 0000000..412d8fb --- /dev/null +++ b/src/mars/widgets/demo/my-dialog/index.vue @@ -0,0 +1,53 @@ + + + + diff --git a/src/mars/widgets/demo/my-dialog/map.ts b/src/mars/widgets/demo/my-dialog/map.ts new file mode 100644 index 0000000..7be73cd --- /dev/null +++ b/src/mars/widgets/demo/my-dialog/map.ts @@ -0,0 +1,36 @@ +import * as mars3d from "mars3d" + +let map: mars3d.Map // 地图对象 + +// 初始化当前业务 +export function onMounted(mapInstance: mars3d.Map): void { + map = mapInstance // 记录map +} + +// 释放当前业务 +export function onUnmounted(): void { + map.graphicLayer.clear() + map = null +} + +// 绘制矩形（演示map.js与index.vue的交互） +export function drawExtent(): Promise { + return new Promise((resolve) => { + map.graphicLayer.clear() + // 绘制矩形 + map.graphicLayer.startDraw({ + type: "rectangle", + style: { + fill: true, + color: "rgba(255,255,0,0.2)", + outline: true, + outlineWidth: 2, + outlineColor: "rgba(255,255,0,1)" + }, + success: function (graphic: any) { + const rectangle = mars3d.PolyUtil.formatRectangle(graphic._rectangle_draw) + resolve({ extent: JSON.stringify(rectangle) }) + } + }) + }) +} diff --git a/src/mars/widgets/demo/power-pannel/index.vue b/src/mars/widgets/demo/power-pannel/index.vue new file mode 100644 index 0000000..8ba673d --- /dev/null +++ b/src/mars/widgets/demo/power-pannel/index.vue @@ -0,0 +1,258 @@ + + + + diff --git a/src/mars/widgets/demo/sample-dialog/index.vue b/src/mars/widgets/demo/sample-dialog/index.vue new file mode 100644 index 0000000..4435bf3 --- /dev/null +++ b/src/mars/widgets/demo/sample-dialog/index.vue @@ -0,0 +1,42 @@ + + + + diff --git a/src/mars/widgets/demo/sample-dialog/map.ts b/src/mars/widgets/demo/sample-dialog/map.ts new file mode 100644 index 0000000..22a7375 --- /dev/null +++ b/src/mars/widgets/demo/sample-dialog/map.ts @@ -0,0 +1,36 @@ +import * as mars3d from "mars3d" + +export let map: mars3d.Map // 地图对象 + +// 事件对象，用于抛出事件给vue +export const eventTarget = new mars3d.BaseClass() + +// 初始化当前业务 +export function onMounted(mapInstance: mars3d.Map): void { + map = mapInstance // 记录map +} + +// 释放当前业务 +export function onUnmounted(): void { + map = null +} + +// 绘制矩形（演示map.js与index.vue的交互） +export function drawExtent(): void { + map.graphicLayer.clear() + // 绘制矩形 + map.graphicLayer.startDraw({ + type: "rectangle", + style: { + fill: true, + color: "rgba(255,255,0,0.2)", + outline: true, + outlineWidth: 2, + outlineColor: "rgba(255,255,0,1)" + }, + success: function (graphic: mars3d.graphic.RectangleEntity) { + const rectangle = graphic.getRectangle({ isFormat: true }) + eventTarget.fire("drawExtent", { extent: JSON.stringify(rectangle) }) // 抛出事件，可以vue中去监听事件 + } + }) +} diff --git a/src/mars/widgets/demo/sample-pannel/index.vue b/src/mars/widgets/demo/sample-pannel/index.vue new file mode 100644 index 0000000..5376819 --- /dev/null +++ b/src/mars/widgets/demo/sample-pannel/index.vue @@ -0,0 +1,44 @@ + + + + diff --git a/src/mars/widgets/demo/sample-pannel/map.ts b/src/mars/widgets/demo/sample-pannel/map.ts new file mode 100644 index 0000000..baf931b --- /dev/null +++ b/src/mars/widgets/demo/sample-pannel/map.ts @@ -0,0 +1,38 @@ +import * as mars3d from "mars3d" + + +let map: mars3d.Map // 地图对象 + +// 事件对象，用于抛出事件给vue +export const eventTarget = new mars3d.BaseClass() + + +// 初始化当前业务 +export function onMounted(mapInstance: mars3d.Map): void { + map = mapInstance // 记录map +} + +// 释放当前业务 +export function onUnmounted(): void { + map = null +} + +// 绘制矩形（演示map.js与index.vue的交互） +export function drawExtent(): void { + map.graphicLayer.clear() + // 绘制矩形 + map.graphicLayer.startDraw({ + type: "rectangle", + style: { + fill: true, + color: "rgba(255,255,0,0.2)", + outline: true, + outlineWidth: 2, + outlineColor: "rgba(255,255,0,1)" + }, + success: function (graphic: any) { + const rectangle = mars3d.PolyUtil.formatRectangle(graphic._rectangle_draw) + eventTarget.fire("drawExtent", { extent: JSON.stringify(rectangle) }) // 抛出事件，可以vue中去监听事件 + } + }) +} diff --git a/src/mars/widgets/demo/test/index.vue b/src/mars/widgets/demo/test/index.vue new file mode 100644 index 0000000..d2089bf --- /dev/null +++ b/src/mars/widgets/demo/test/index.vue @@ -0,0 +1,15 @@ + + + + diff --git a/src/mars/widgets/demo/test/map.ts b/src/mars/widgets/demo/test/map.ts new file mode 100644 index 0000000..68d2a40 --- /dev/null +++ b/src/mars/widgets/demo/test/map.ts @@ -0,0 +1,208 @@ +import * as mars3d from "mars3d" +const Cesium = mars3d.Cesium + +let map: mars3d.Map // 地图对象 +export const eventTarget = new mars3d.BaseClass() + +let currEffect // 当前生效的效果 +let weather +// 雨效果 +const rainEffect = new mars3d.effect.RainEffect({ + speed: 10, + size: 20, + direction: -30, + enabled: false +}) +// 雾效果 +const fogEffect = new mars3d.effect.FogEffect({ + maxHeight: 20000, // 大于此高度后不显示 + fogByDistance: new Cesium.Cartesian4(1600, 0.0, 37602, 0.9), + color: Cesium.Color.WHITE, + enabled: false +}) + +const snowEffect = new mars3d.effect.SnowEffect({ + speed: 20, + enabled: false +}) + +const snowCover = new mars3d.effect.SnowCoverEffect({ + maxHeight: 8000, // 大于此高度后不显示 + alpha: 0.2, + enabled: false +}) + +/** + * 初始化地图业务，生命周期钩子函数（必须） + * 框架在地图初始化完成后自动调用该函数 + * @param {mars3d.Map} mapInstance 地图对象 + * @returns {void} 无 + */ +export function onMounted(mapInstance) { + map = mapInstance // 记录map + + map.addEffect(rainEffect) + map.addEffect(fogEffect) + map.addEffect(snowEffect) + map.addEffect(snowCover) + + Cesium.Resource.fetchJson({ url: "http://wthrcdn.etouch.cn/weather_mini?city=青岛" }) + .then((msg) => { + const data = JSON.parse(msg) + const tianqiForcat = data.data.forecast[0].type + if (tianqiForcat.search("雪") !== -1) { + snowEffect.enabled = true + snowCover.enabled = true + currEffect = snowEffect + weather = "snow" + } else if (tianqiForcat.search("雨") !== -1) { + rainEffect.enabled = true + currEffect = rainEffect + weather = "rain" + } else if (tianqiForcat.search("雾") !== -1) { + fogEffect.enabled = true + currEffect = fogEffect + weather = "fog" + } else { + currEffect = null + weather = "normal" + } + + eventTarget.fire("weather", { weather: weather }) + }) + +} + +/** + * 释放当前地图业务的生命周期函数 + * @returns {void} 无 + */ +export function onUnmounted() { + map.removeEffect(rainEffect) + map.removeEffect(fogEffect) + map.removeEffect(snowEffect) + map.removeEffect(snowCover) + map = null +} + +export function snow() { + if (!snowEffect.enabled) { + if (currEffect != null) { + currEffect.enabled = false + } + + snowEffect.enabled = true + snowCover.enabled = true + currEffect = snowEffect + } +} + +export function rain() { + if (!rainEffect.enabled) { + if (currEffect != null) { + currEffect.enabled = false + if (currEffect === snowEffect) { + snowCover.enabled = false + } + } + + rainEffect.enabled = true + currEffect = rainEffect + } + +} + +export function fog() { + if (!fogEffect.enabled) { + if (currEffect != null) { + currEffect.enabled = false + if (currEffect === snowEffect) { + snowCover.enabled = false + } + } + + fogEffect.enabled = true + currEffect = fogEffect + } +} + +export function normal() { + if (currEffect != null) { + currEffect.enabled = false + if (currEffect === snowEffect) { + snowCover.enabled = false + } + } + + currEffect = null +} + +export function getSnow() { + return snowEffect.enabled +} +// 速度 +export function setSpeed(value) { + snowEffect.speed = value +} + +// 是否开启积雪效果 +export function setCover(val) { + snowCover.enabled = val +} + +// 积雪厚度 +export function setAlpha(value) { + snowCover.alpha = value +} + +// 是否开启下雪效果 +export function setSnow(val) { + snowEffect.enabled = val +} + +// 是否开始雾效果 +export function setFogEffect(val) { + fogEffect.enabled = val +} + +// 改变雾的颜色 +export function setColor(color) { + fogEffect.color = Cesium.Color.fromCssColorString(color) +} + +// 修改近距离和远距离 +export function setDistanceX(val) { + fogEffect.fogByDistance.x = val +} + +export function setDistanceZ(val) { + fogEffect.fogByDistance.z = val +} + +export function getFog() { + return fogEffect.enabled +} + +// 是否开启特效 +export function setRainEffect(val) { + rainEffect.enabled = val +} + +// 粒子速度 +export function setRainSpeed(value) { + rainEffect.speed = value +} + +// 粒子大小 +export function setRainSize(value) { + rainEffect.size = value +} + +// 粒子方向 +export function setRainDirection(value) { + rainEffect.direction = value +} + +export function getRain() { + return rainEffect.enabled +} diff --git a/src/mars/widgets/demo/ui/index.vue b/src/mars/widgets/demo/ui/index.vue new file mode 100644 index 0000000..28f7ce5 --- /dev/null +++ b/src/mars/widgets/demo/ui/index.vue @@ -0,0 +1,435 @@ + + + + + diff --git a/src/mars/widgets/demo/ui/map.ts b/src/mars/widgets/demo/ui/map.ts new file mode 100644 index 0000000..41c8d2b --- /dev/null +++ b/src/mars/widgets/demo/ui/map.ts @@ -0,0 +1,93 @@ +import * as mars3d from "mars3d" + +let map: mars3d.Map // 地图对象 + +/** + * 构造bloom效果对象 + */ +let bloomEffect: mars3d.effect.BloomEffect + +// 事件对象，用于抛出事件给vue +export const eventTarget = new mars3d.BaseClass() + +/** + * 初始化地图业务，生命周期钩子函数（必须） + * 框架在地图初始化完成后自动调用该函数 + * @param {mars3d.Map} mapInstance 地图对象 + * @returns {void} 无 + */ +export function onMounted(mapInstance: mars3d.Map): void { + map = mapInstance // 记录首次创建的map + + // 构造bloom效果 用于滑动条测试 + bloomEffect = new mars3d.effect.BloomEffect({}) + map.addEffect(bloomEffect) +} + +/** + * 释放当前地图业务的生命周期函数 + * @returns {void} 无 + */ +export function onUnmounted() { + map.graphicLayer.clear() + map.removeEffect(bloomEffect, true) + bloomEffect = null + map = null +} + +// 绘制矩形（演示map.js与index.vue的交互） +export function drawExtent(): void { + map.graphicLayer.clear() + // 绘制矩形 + map.graphicLayer.startDraw({ + type: "rectangle", + style: { + fill: true, + color: "rgba(255,255,0,0.2)", + outline: true, + outlineWidth: 2, + outlineColor: "rgba(255,255,0,1)" + }, + success: function (graphic: any) { + const rectangle = mars3d.PolyUtil.formatRectangle(graphic._rectangle_draw) + eventTarget.fire("drawExtent", { extent: JSON.stringify(rectangle) }) // 抛出事件，可以vue中去监听事件 + } + }) +} + +// 是否运行地图鼠标交互 +export function enableMapMouseController(value: boolean) { + map.setSceneOptions({ + cameraController: { + enableZoom: value, + enableTranslate: value, + enableRotate: value, + enableTilt: value + } + }) +} + +// 调整亮度 （演示滑动条） +export function updateBrightness(val: number) { + bloomEffect.brightness = val +} + +// 调整对比度 （演示滑动条） +export function updateContrast(val: number) { + bloomEffect.contrast = val +} + +// 创建图层 +export function createLayer(layer: any) { + return mars3d.LayerUtil.create(layer) +} + +// 添加图层 +export function addLayer(layer: mars3d.layer.BaseLayer) { + map.addLayer(layer) +} + +// 移除图层 +export function removeLayer(layer: any) { + map.removeLayer(layer) +} diff --git a/src/router/routes/modules/demo/charts.ts b/src/router/routes/modules/demo/charts.ts index d4348d0..b1bb836 100644 --- a/src/router/routes/modules/demo/charts.ts +++ b/src/router/routes/modules/demo/charts.ts @@ -1,3 +1,11 @@ +/* + * @Author: 刘妍 + * @Date: 2024-01-13 13:04:15 + * @LastEditors: Do not edit + * @LastEditTime: 2024-01-17 15:36:03 + * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\router\routes\modules\demo\charts.ts + * @Description: + */ import type { AppRouteModule } from '@/router/types'; import { LAYOUT } from '@/router/constant'; @@ -22,6 +30,23 @@ const charts: AppRouteModule = { }, component: () => import('@/views/demo/charts/map/Baidu.vue'), }, + { + path: 'mars3d', + name: 'mars3d', + meta: { + title: t('routes.demo.charts.mars3d'), + ignoreKeepAlive: true, + }, + component: () => import('@/views/demo/charts/mars3d/index.vue'), + }, + { + path: 'marsgis', + name: 'Marsgis', + meta: { + title: 'Mars3D地图', + }, + component: () => import('@/mars/views/index.vue'), + }, ], }; diff --git a/src/router/routes/modules/demo/system.ts b/src/router/routes/modules/demo/system.ts index 066425d..16564d5 100644 --- a/src/router/routes/modules/demo/system.ts +++ b/src/router/routes/modules/demo/system.ts @@ -1,3 +1,11 @@ +/* + * @Author: 刘妍 + * @Date: 2024-01-13 13:04:15 + * @LastEditors: Do not edit + * @LastEditTime: 2024-01-17 14:59:59 + * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\router\routes\modules\demo\system.ts + * @Description: + */ import type { AppRouteModule } from '@/router/types'; import { LAYOUT } from '@/router/constant'; @@ -80,7 +88,8 @@ const system: AppRouteModule = { ignoreKeepAlive: true, }, component: () => import('@/views/demo/system/password/index.vue'), - }, + }, + ], }; diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts index 9bf626d..f49074c 100644 --- a/src/settings/projectSetting.ts +++ b/src/settings/projectSetting.ts @@ -95,7 +95,7 @@ const setting: ProjectConfig = { //仅限于打开左侧菜单，鼠标在菜单右侧有一个拖动条 canDrag: false, // 是否显示无dom - show: false, + show: true, // Whether to show dom hidden: true, // Menu width diff --git a/src/views/demo/charts/mars3d/index.vue b/src/views/demo/charts/mars3d/index.vue new file mode 100644 index 0000000..5a5bfb7 --- /dev/null +++ b/src/views/demo/charts/mars3d/index.vue @@ -0,0 +1,162 @@ + + + + + + + diff --git a/src/views/demo/charts/mars3d/map.js b/src/views/demo/charts/mars3d/map.js new file mode 100644 index 0000000..c5d72a6 --- /dev/null +++ b/src/views/demo/charts/mars3d/map.js @@ -0,0 +1,217 @@ +import * as mars3d from "mars3d" + +export let map // mars3d.Map三维地图对象 + +const creditHtml = `自然资源部 - 审图号：GS(2023)336号 + - 甲测资字1100471 - 服务条款 ` + +// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并） +export const mapOptions = { + scene: { + center: { lat: 31.675177, lng: 117.323257, alt: 81193, heading: 359, pitch: -79 }, + highDynamicRange: false + }, + // 方式1：在创建地球前的参数中配置 + basemaps: [ + { + name: "天地图影像(EPSG:3857)", + icon: "img/basemaps/tdt_img.png", + type: "tdt", + layer: "img_d", + key: mars3d.Token.tiandituArr, + show: true, + credit: creditHtml + }, + { + name: "天地图电子(EPSG:3857)", + icon: "img/basemaps/tdt_vec.png", + type: "group", + layers: [ + { name: "底图", type: "tdt", layer: "vec_d", key: mars3d.Token.tiandituArr }, + { name: "注记", type: "tdt", layer: "vec_z", key: mars3d.Token.tiandituArr } + ], + credit: creditHtml + }, + { + name: "天地图地形(EPSG:3857)", + icon: "img/basemaps/tdt_ter.png", + type: "group", + layers: [ + { name: "底图", type: "tdt", layer: "ter_d", key: mars3d.Token.tiandituArr }, + { + name: "注记", + type: "tdt", + layer: "ter_z", + key: mars3d.Token.tiandituArr, + // 表示缩小和放大瓦片数据的过滤方式。默认值为LINEAR线性结构，大部分地图调整为最近方式过滤能够有效提升地图清晰度。 + minificationFilter: Cesium.TextureMinificationFilter.NEAREST, + magnificationFilter: Cesium.TextureMinificationFilter.NEAREST + } + ], + credit: creditHtml + }, + { + name: "天地图影像(EPSG:4326)", + icon: "img/basemaps/tdt_img.png", + type: "group", + layers: [ + { + name: "底图", + type: "tdt", + layer: "img_d", + crs: "EPSG:4326", + key: mars3d.Token.tiandituArr + }, + { + name: "注记", + type: "tdt", + layer: "img_z", + crs: "EPSG:4326", + key: mars3d.Token.tiandituArr + } + ], + credit: creditHtml + }, + { + name: "天地图电子(EPSG:4326)", + icon: "img/basemaps/tdt_vec.png", + type: "group", + layers: [ + { + name: "底图", + type: "tdt", + layer: "vec_d", + crs: "EPSG:4326", + key: mars3d.Token.tiandituArr + }, + { + name: "注记", + type: "tdt", + layer: "vec_z", + crs: "EPSG:4326", + key: mars3d.Token.tiandituArr + } + ], + credit: creditHtml + }, + { + name: "天地图地形(EPSG:4326)", + icon: "img/basemaps/tdt_ter.png", + type: "group", + layers: [ + { + name: "底图", + type: "tdt", + layer: "ter_d", + crs: "EPSG:4326", + key: mars3d.Token.tiandituArr + }, + { + name: "注记", + type: "tdt", + layer: "ter_z", + crs: "EPSG:4326", + key: mars3d.Token.tiandituArr + } + ], + credit: creditHtml + }, + + { + name: "天地图影像(英文)", + icon: "img/basemaps/tdt_img.png", + type: "group", + layers: [ + { name: "底图", type: "tdt", layer: "img_d", key: mars3d.Token.tiandituArr }, + { name: "底图", type: "tdt", layer: "img_e", key: mars3d.Token.tiandituArr } + ], + credit: creditHtml + }, + { + name: "天地图电子(英文)", + icon: "img/basemaps/tdt_vec.png", + type: "group", + layers: [ + { name: "底图", type: "tdt", layer: "vec_d", key: mars3d.Token.tiandituArr }, + { name: "底图", type: "tdt", layer: "vec_e", key: mars3d.Token.tiandituArr } + ], + credit: creditHtml + } + ] +} + +export const eventTarget = new mars3d.BaseClass() // 事件对象，用于抛出事件到面板中 + +/** + * 初始化地图业务，生命周期钩子函数（必须） + * 框架在地图初始化完成后自动调用该函数 + * @param {mars3d.Map} mapInstance 地图对象 + * @returns {void} 无 + */ +export function onMounted(mapInstance) { + map = mapInstance // 记录map + addCreditDOM() + + // 三维文字注记不清晰的原因：https://zhuanlan.zhihu.com/p/389945647 + + // 数值越高，性能越好，但视觉质量越差。默认值为2。 + // 针对不同的地图数据源，该值在 0.66~1.33 之间地图清晰度最高。 + map.scene.globe.maximumScreenSpaceError = 4 / 3 +} + +/** + * 释放当前地图业务的生命周期函数 + * @returns {void} 无 + */ +export function onUnmounted() { + removeCreditDOM() + map = null +} + +// 叠加的图层 +let tileLayer +export function addTileLayer() { + removeTileLayer() + + // 方式2：在创建地球后调用addLayer添加图层(直接new对应type类型的图层类) + tileLayer = new mars3d.layer.TdtLayer({ + name: "天地图影像注记", + layer: "img_z", + key: mars3d.Token.tiandituArr + }) + map.addLayer(tileLayer) +} + +export function removeTileLayer() { + if (tileLayer) { + map.removeLayer(tileLayer, true) + tileLayer = null + } +} + + + + +// 在下侧状态栏增加一个额外div展示图层版权信息 +let creditDOM +function addCreditDOM() { + const locationBar = map.controls.locationBar?.container + if (locationBar) { + creditDOM = mars3d.DomUtil.create("div", "mars3d-locationbar-content mars3d-locationbar-autohide", locationBar) + creditDOM.style["pointer-events"] = "all" + creditDOM.style.float = "left" + creditDOM.style.marginLeft = "20px" + + creditDOM.innerHTML = map.basemap?.options?.credit || "" + + map.on(mars3d.EventType.changeBasemap, function (event) { + creditDOM.innerHTML = event.layer?.options?.credit || "" + }) + } +} +function removeCreditDOM() { + if (creditDOM) { + mars3d.DomUtil.remove(creditDOM) + creditDOM = null + } +} diff --git a/tsconfig.json b/tsconfig.json index 9c69499..dd8ad02 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,7 @@ "types": ["vite/client"], "paths": { "@/*": ["src/*"], - "#/*": ["types/*"] + "#/*": ["types/*"], } }, "include": [ diff --git a/vite.config.ts b/vite.config.ts index 428256d..b52a17f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,4 +1,16 @@ +/* + * @Author: 刘妍 + * @Date: 2024-01-13 13:04:15 + * @LastEditors: Do not edit + * @LastEditTime: 2024-01-17 16:06:35 + * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\vite.config.ts + * @Description: + */ import { defineApplicationConfig } from '@vben/vite-config'; +import { mars3dPlugin } from "vite-plugin-mars3d"; +import path, { resolve } from 'path'; + + export default defineApplicationConfig({ overrides: { @@ -35,5 +47,21 @@ export default defineApplicationConfig({ clientFiles: ['./index.html', './src/{views,components}/*'], }, }, + define: { + 'process.env': { + BASE_URL: '/', + }, + }, + css: { + preprocessorOptions: { + less: { + javascriptEnabled: true, + additionalData: ` + @import "${path.resolve(__dirname, 'src/mars/components/mars-ui/base.less')}"; + `, + }, + }, + }, + plugins: [mars3dPlugin ()], }, });