将mars3D导入自己的项目中

于 2024-07-19 10:36:26 发布
阅读量141 收藏 2
点赞数 4
文章标签： 3d swift 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/regretTAT/article/details/140541980
版权

文章目录

一、打开自己的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: string
    mapKey?: string
    options?: 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 = false
    map.scene.skyAtmosphere.show = false
    map.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(),
  ],
});

总结

在这里插入图片描述

灰太狼大王灬
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2项目使用mars3d
qq_44922719的博客
08-02 2660
vue2中使用mars3d地图，
mars3d平台React最简的项目模板源码
12-28
在本项目中，“mars3d-react-template”是一个针对React开发者的最简项目模板，旨在帮助快速搭建基于Mars3D的Web应用程序。 该模板源码提供了基本的React项目结构，整合了Mars3D库，让开发者能够便捷地在React应用...
Vue3项目中集成mars3D简单三部曲
weixin_70027586的博客
12-13 1169
Vue3项目中集成mars3d
【mars3d】将mars3d中的示例代码拷贝到自己项目中
m0_53584457的博客
07-21 571
mars3d，示例代码单页面讲解，迁移
mars3d开发中遇到的问题
qq_44806249的博客
07-01 568
mars3d mars3d开发常见问题
Vue2项目引入mars3d
前端小攻城狮的博客
05-31 4120
1.获取 Mars3D 从 npm 获取 使用Node环境下的现代web前端技术栈时，可以使用npm或cnpm或yarn等方式来安装mars3d包 //安装mars3d主库 npm install mars3d --save //安装mars3d插件（按需安装） npm install mars3d-space --save 2.在main.js引入Mars3D类库 使用Node环境下的现代web前端技术栈时，可以使用npm等来安装mars3d包并import导入后来使用。 import
在Mars3d中加载模型出现报错
m0_53584457的博客
05-20 892
使用mars3d加载模型报错，模型位置不对，
mar3d的widget移植到自己的项目使用
qq_42628798的博客
03-03 516
mar3d的widget管理模块移植到自己的项目中
使用mars3d的几种方式
m0_69803146的博客
11-18 1048
Mars3D 提供了多种获取 SDK 类库的方式，你可以根据项目的实际情况和技术栈选择以下任意一种方式安装。
vue+Mar3d初探 之vue环境配置 (集成Mars3D到已有项目中)
qq_24441205的博客
11-01 3564
1.获取 Mars3D 从 npm 获取 使用Node环境下的现代web前端技术栈时，可以使用npm或cnpm或yarn等方式来安装mars3d包 //安装mars3d主库 npm install mars3d --save //安装mars3d插件（按需安装） npm install mars3d-space --save 2.引入Mars3D类库 使用Node环境下的现代web前端技术栈时，可以使用npm等来安装mars3d包并import导入后来使用。 //在main.js中加入下面代码
mars3d平台Vue2最简的项目模板源码
12-28
在这个模板中，我们将深入探讨与Vue2和Mars3D平台相关的技术知识点。 首先，Vue2是一个流行的前端JavaScript框架，以其轻量级、易学易用和组件化的特性受到开发者喜爱。在这个模板中，你可以看到Vue2的基础结构，...
mars3d平台Vue3最简的项目模板源码
12-28
这个"Mars3D平台Vue3最简的项目模板源码"是一个基础模板，用于快速搭建使用Mars3D和Vue3技术栈的项目，让开发者能够便捷地开发出交互式的三维地图应用。 项目模板包含以下关键知识点： 1. **Vue3**：Vue3引入了...
mars3d-link-supermap:Mars3D兼容使用超图平台示例
04-01
Mars3D最简项目模版-超图版 Mars3D支持结合Cesium相关的各类平台来兼容使用，方便结合不同平台的优点来完成各种项目需求。 本仓库是Mars3D三维地球平台软件，在技术栈下的最简的应用项目模版。 其他技术栈，请参考：...
mars3d-es5-template:Mars3D最简项目模版 - ES5传统版
04-29
Mars3D最简项目模版 - ES5传统版 Mars3D三维地球平台软件，在`传统JS技术栈`的最简的应用项目模版。 其他技术栈，请参考： 运行站点 在任意开发编辑器（如vscode等）或http服务器(如node、nginx、tomcat、IIS等)下...
腾讯元宝上线“3D角色梦工厂”：快速生成专属3D角色！
最新发布
JxyyzAI的博客
07-18 170
这一过程中，腾讯混元大模型采用了3D换头技术、3D几何雕刻技术以及PBR（基于物理的渲染）材质贴图技术，显著提升了3D人物生成的效果。腾讯元宝3D生成应用的诞生，标志着3D建模技术的普及化时代已经到来。7月16日，腾讯旗下大模型应用“腾讯元宝”上线“3D角色梦工厂”，允许用户通过上传一张五官清晰的正面头像，并选择不同的角色模板，迅速生成个人3D角色！无论是游戏玩家、动画爱好者，还是设计师、艺术家，都可以通过元宝3D生成应用轻松创建出自己喜欢的3D角色，实现自己的创意和想象。
3D 渲染一个房屋需要多长时间？
LhcyyVSO的博客
07-17 372
一个简单的住宅渲染可以在 2-3 天内完成建模，而更复杂的渲染可能需要长达一周的时间才能创建详细的 3D 模型。（4）添加人物等生活方式元素或创建特殊的灯光效果（蓝色或黄昏）会增加额外的工作量并延长时间线，但也会提高渲染的质量，如果质量是您的首要任务，那么这可能是一个不错的选择。（1）如果项目的设计已经完成，那么就可以更快地进入渲染效果图的阶段，而如果项目设计未完成，那么建模阶段将需要更多时间，因为它需要一轮修改才能完成设计。，主要取决于项目的复杂性和最终 3D 渲染的质量，图像越逼真，
ROS2从入门到精通2-3：详解机器人3D物理仿真Gazebo与案例分析
FRIGIDWINTER的博客
07-18 721
本文详细介绍了Gazebo是什么？为什么要使用这个工具？清晰地列出了Gazebo的安装流程和界面的基本功能元素；并用实例讲解了用Gazebo搭建自定义地图的过程
3D工艺大师快速生成装配动画，驱动汽车工业装配流程革新
大腾智能的博客
07-12 2018
3D工艺大师，一款能够颠覆传统装配指导模式、提升装配效率与质量的创新工具，凭借强大的三维可视化与快速生成动画的能力，帮助汽车制造商成功实现了装配指导方式的数字化转型，大幅提升了生产效率和产品质量。
Mars3D如何创建vue3项目
08-08
要创建一个 Mars3D 的 Vue3 项目，你可以按照以下步骤进行操作： 1. 首先，确保你的开发环境已经安装了 Node.js。你可以在命令行中输入 `node -v` 来检查是否已安装。 2. 打开命令行工具，进入你要创建项目的目录。 3. 使用 Vue CLI 创建一个新的 Vue3 项目。在命令行中运行下面的命令： ``` vue create my-mars3d-project ``` 这会提示你选择一个预设配置或手动配置。你可以选择手动配置，并且在特性选择中勾选 Babel、TypeScript、Router、Vuex 和 CSS Pre-processors（根据你的需求选择）。 4. 进入项目目录： ``` cd my-mars3d-project ``` 5. 安装 Mars3D 的依赖： ``` npm install mars3d ``` 6. 在 `src` 目录下创建一个新的文件，比如 `Mars3D.vue`，并在其中编写你的 Mars3D 代码。 7. 在 `src/main.js` 文件中导入 Mars3D 组件，并在 Vue 实例中使用它： ```javascript import Vue from 'vue' import App from './App.vue' import Mars3D from './Mars3D.vue' Vue.component('mars3d', Mars3D) new Vue({ render: h => h(App), }).$mount('#app') ``` 8. 在 `App.vue` 文件中使用 Mars3D 组件： ```vue <template> <div id="app"> <mars3d></mars3d> </div> </template> <script> export default { name: 'App', } </script> ``` 9. 运行项目： ``` npm run serve ``` 这将启动开发服务器并运行你的 Mars3D Vue3 项目。 现在，你可以根据自己的需求进一步开发和定制你的 Mars3D Vue3 项目了。希望这些步骤能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值