小说网站建设目的,呼市做网站,网站运营需要服务器吗,快手怎么引流推广文章目录 一、打开自己的vite项目二、创建场景配置文件1.json文件路径 public\config\config.json2.创建组件定义文件路径 src\components\mars-work\mars-map.vue三、demo中引入四、必要样式 依赖文件 总结 一、打开自己的vite项目
我创建了一个新的 结构如下
二、创建场景… 文章目录 一、打开自己的vite项目二、创建场景配置文件1.json文件路径 public\config\config.json2.创建组件定义文件路径 src\components\mars-work\mars-map.vue三、demo中引入四、必要样式 依赖文件 总结 一、打开自己的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 classhide1000横{crsx} 纵{crsy}/div div海拔{alt}米/div div classhide700层级{level}/divdiv方向{heading}°/div div俯仰角{pitch}°/divdiv classhide700视高{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 styletext-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: 11 ,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 实例数据
templatediv :idwithKeyId classmars3d-container/div
/template
script setup langts
/*** 地图渲染组件* 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/indexconst 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)
})
/scriptstyle langless
/**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.cssvite.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(),],
});
总结
