Mars3D官方文档

一、打开自己的vite项目

我创建了一个新的 结构如下

二、创建场景配置文件

1.json文件

路径 public\config\config.json

config.json实例数据

{"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},"contextOptions": {"webgl": {"preserveDrawingBuffer": true}},"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,"showRenderLoopErrors": true,"contextmenu": {"hasDefault": true},"mouseDownView": true,"zoom": {"insertIndex": 1},"compass": {"bottom": "toolbar","left": "5px"},"distanceLegend": {"left": "100px","bottom": "2px"},"locationBar": {"crs": "CGCS2000_GK_Zone_3","crsDecimal": 0,"template": "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx}  纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>"}},"templateValues": {"dataServer": "//data.mars3d.cn","gltfServerUrl": "//data.mars3d.cn/gltf"},"terrain": {"url": "//data.mars3d.cn/terrain","show": true,"clip": 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": "蓝色底图","icon": "/img/basemaps/bd-c-midnight.png","type": "gaode","layer": "vec","chinaCRS": "GCJ02","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-dark.png","type": "gaode","layer": "vec","chinaCRS": "GCJ02","invertColor": true,"filterColor": "#909090","brightness": 0.6,"contrast": 1.8,"gamma": 0.3,"hue": 1,"saturation": 0},{"pid": 10,"name": "离线影像地图 (供参考)","icon": "/img/basemaps/google_img.png","type": "xyz","url": "{dataServer}/tile/img/{z}/{x}/{y}.jpg","chinaCRS": "GCJ02","maximumLevel": 13},{"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","layer": "xzqh","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地形","terrainType": "ion","radio": true},{"pid": 60,"type": "terrain","name": "Mars3D地形","terrainType": "xyz","url": "{dataServer}/terrain","radio": true},{"pid": 60,"type": "terrain","name": "ArcGIS地形","terrainType": "arcgis","url": "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer","radio": true},{"pid": 60,"type": "terrain","name": "无地形","terrainType": "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": "名称：{项目名称}<br />类型：{设施类型}<br />面积：{用地面积}亩<br />位置：{具体位置}","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}<br />层数：{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": "<div style='text-align: right;color: #ff0000;padding-right: 10px;'>数据仅供参考</div>"}],"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}<br />层数：{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}<br />地址：{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}<br />层数：{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,"style": {"color": {"conditions": [["true","color('rgba(42, 160, 224, 1)')"]]}},"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}},{"pid": 2040,"type": "3dtiles","name": "合肥市区-带贴图","url": "{dataServer}/3dtiles/jzw-hefei-cz/tileset.json","maximumScreenSpaceError": 1,"marsJzwStyle": true,"highlight": {"type": "click","color": "#FFFF00"},"popup": [{"field": "objectid","name": "编号"},{"field": "remark","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,"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": "{dataServer}/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,"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,"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": -2.0},"maximumScreenSpaceError": 1,"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,"center": {"lat": 29.792675,"lng": 121.480207,"alt": 190.8,"heading": 196.1,"pitch": -49}},{"id": 2030,"pid": 20,"name": "倾斜摄影","type": "group"},{"pid": 2030,"type": "3dtiles","name": "大雁塔","url": "{dataServer}/3dtiles/qx-dyt/tileset.json","position": {"alt": -27},"maximumScreenSpaceError": 1,"center": {"lat": 34.215516,"lng": 108.960251,"alt": 834,"heading": 4,"pitch": -48},"flat": {"enabled": true,"editHeight": -24},"flyTo": false,"show": false},{"pid": 2030,"name": "校园(含单体)","type": "group","hasOpacity": true,"center": {"lat": 43.821193,"lng": 125.143124,"alt": 990,"heading": 342,"pitch": -50},"layers": [{"type": "geojson","name": "校园-单体化","url": "{dataServer}/file/geojson/dth-xuexiao-fd.json","symbol": {"type": "polygonP","styleOptions": {"color": "rgba(255, 255, 255, 0.01)","clampToGround": true,"classification": true,"buffer": 1,"highlight": {"type": "click","color": "rgba(255,255,0,0.4)"}}},"popup": [{"field": "name","name": "学校场所"},{"field": "sfkf","name": "是否开放"},{"field": "remark","name": "备注信息"}]},{"pid": 2030,"type": "3dtiles","name": "校园","url": "{dataServer}/3dtiles/qx-xuexiao/tileset.json","position": {"alt": 279.0},"maximumScreenSpaceError": 1}]},{"id": 203014,"pid": 2030,"type": "3dtiles","name": "县城社区","url": "{dataServer}/3dtiles/qx-shequ/tileset.json","position": {"alt": 148.2},"maximumScreenSpaceError": 2,"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,"dynamicScreenSpaceError": true,"cullWithChildrenBounds": false,"skipLevelOfDetail": true,"preferLeaves": true,"center": {"lat": 31.795308,"lng": 117.21948,"alt": 1820,"heading": 0,"pitch": -39}},{"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.4)"}}},"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": 38.8},"maximumScreenSpaceError": 2,"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"}]}
}

2.创建组件定义文件

路径 src\components\mars-work\mars-map.vue

实例数据

<template><div :id="withKeyId" class="mars3d-container"></div>
</template>
<script setup lang="ts">
/*** 地图渲染组件* @copyright 火星科技 mars3d.cn* @author 木遥 2022-02-19*/
import { computed, onUnmounted, onMounted } from "vue"
import * as mars3d from "mars3d" 
// import { $alert, $message } from "@mars/components/mars-ui/index"const props = withDefaults(defineProps<{url: stringmapKey?: stringoptions?: any}>(),{url: "",mapKey: "default",options: () => ({})}
)// 用于存放地球组件实例
let map: mars3d.Map // 地图对象// 使用用户传入的 mapKey 拼接生成 withKeyId 作为当前显示容器的id
const withKeyId = computed(() => `mars3d-container-${props.mapKey}`)onMounted(() => {// 获取配置mars3d.Util.fetchJson({ url: props.url }).then((data: any) => {initMars3d({// 合并配置项...data.map3d,...props.options})})
})// onload事件将在地图渲染后触发
const emit = defineEmits(["onload"])
const initMars3d = (option: any) => {map = new mars3d.Map(withKeyId.value, option)// //如果有xyz传参，进行定位// const lat = getQueryString("lat")// const lng = getQueryString("lng")// if (lat && lng) {//   map.flyToPoint(new mars3d.LngLatPoint(lng, lat), { duration: 0 })// }// 开场动画// map.openFlyAnimation();// 针对不同终端的优化配置if (mars3d.Util.isPCBroswer()) {map.zoomFactor = 2.0 // 鼠标滚轮放大的步长参数// IE浏览器优化if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {map.viewer.targetFrameRate = 20 // 限制帧率map.scene.requestRenderMode = false // 取消实时渲染}} else {map.zoomFactor = 5.0 // 鼠标滚轮放大的步长参数// 移动设备上禁掉以下几个选项，可以相对更加流畅map.scene.requestRenderMode = false // 取消实时渲染map.scene.fog.enabled = falsemap.scene.skyAtmosphere.show = falsemap.scene.globe.showGroundAtmosphere = false}// //二三维切换不用动画if (map.viewer.sceneModePicker) {map.viewer.sceneModePicker.viewModel.duration = 0.0}// webgl渲染失败后，刷新页面// map.on(mars3d.EventType.renderError, async () => {//   await $alert("程序内存消耗过大，请重启浏览器")//   window.location.reload()// })// map构造完成后的一些处理onMapLoad()emit("onload", map)
}// map构造完成后的一些处理
function onMapLoad() {// // Mars3D地图内部使用，如右键菜单弹窗// // @ts-ignore// window.globalAlert = $alert// // @ts-ignore// window.globalMsg = $message// // 用于 config.json 中 西藏垭口 图层的详情按钮 演示// // @ts-ignore// window.showPopupDetails = (item: any) => {//   $alert(item.NAME)// }}// 组件卸载之前销毁mars3d实例
onUnmounted(() => {if (map) {map.destroy()map = null}console.log("map销毁完成", map)
})
</script><style lang="less"> 
/**cesium 工具按钮栏*/
.cesium-viewer-toolbar {top: auto !important;bottom: 35px !important;left: 12px !important;right: auto !important;
}
.cesium-toolbar-button img {height: 100%;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {margin-bottom: 5px;float: left;clear: both;text-align: center;
}
.cesium-button {background-color: rgba(23, 49, 71, 0.8);color: #e6e6e6;fill: #e6e6e6;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);line-height: 32px;
}
.cesium-button:hover {background: #3ea6ff;
}/**cesium 底图切换面板*/
.cesium-baseLayerPicker-dropDown {bottom: 0;left: 40px;max-height: 700px;margin-bottom: 5px;background-color: rgba(23, 49, 71, 0.8);
}/**cesium 帮助面板*/
.cesium-navigation-help {top: auto;bottom: 0;left: 40px;transform-origin: left bottom;background: none;background-color: rgba(23, 49, 71, 0.8);.cesium-navigation-help-instructions {background: none;}.cesium-navigation-button {background: none;}.cesium-navigation-button-selected,.cesium-navigation-button-unselected:hover {background: rgba(0, 138, 255, 0.2);}
}/**cesium 二维三维切换*/
.cesium-sceneModePicker-wrapper {width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {float: right;margin: 0 3px;
}/**cesium POI查询输入框*/
.cesium-viewer-geocoderContainer .search-results {left: 0;right: 40px;width: auto;z-index: 9999;
}
.cesium-geocoder-searchButton {background-color: rgba(23, 49, 71, 0.8);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {background-color: rgba(23, 49, 71, 0.8);
}/**cesium info信息框*/
.cesium-infoBox {top: 50px;background-color: rgba(23, 49, 71, 0.8);
}
.cesium-infoBox-title {background-color: rgba(23, 49, 71, 0.8);
}/**cesium 任务栏的FPS信息*/
.cesium-performanceDisplay-defaultContainer {top: auto;bottom: 35px;right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {color: #fff;
}/**cesium tileset调试信息面板*/
.cesium-viewer-cesiumInspectorContainer {top: 10px;left: 10px;right: auto;
}
.cesium-cesiumInspector {background-color: rgba(23, 49, 71, 0.8);
}/**覆盖mars3d内部控件的颜色等样式*/
.mars3d-compass .mars3d-compass-outer {fill: rgba(23, 49, 71, 0.8);
}
.mars3d-contextmenu-ul,
.mars3d-sub-menu {background-color: rgba(23, 49, 71, 0.8);> li > a:hover,> li > a:focus,> li > .active {background-color: #3ea6ff;}> .active > a,> .active > a:hover,> .active > a:focus {background-color: #3ea6ff;}
}/* Popup样式*/
.mars3d-popup-color {color: #ffffff;
}
.mars3d-popup-background {background: rgba(23, 49, 71, 0.8);
}
.mars3d-popup-content {margin: 15px;
}
.mars3d-template-content label {padding-right: 6px;
}
.mars3d-template-titile {border-bottom: 1px solid #3ea6ff;
}
.mars3d-template-titile a {font-size: 16px;
}
.mars3d-tooltip {background: rgba(23, 49, 71, 0.8);border: 1px solid rgba(23, 49, 71, 0.8);
}.mars3d-popup-btn-custom {padding: 3px 10px;border: 1px solid #209ffd;background: #209ffd1c;
}
</style>

三、demo中引入

四、必要样式 依赖文件

    "@turf/turf": "^6.5.0","mars3d": "^3.7.22","mars3d-cesium": "~1.119.0","vite-plugin-mars3d": "^4.1.1",

或者 yarn add vite-plugin-mars3d...

main.js

import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"
import "mars3d/dist/mars3d.css"

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { mars3dPlugin } from "vite-plugin-mars3d"// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),mars3dPlugin(),],
});

总结