首先是离线影像导出工具,推荐使用离线地图下载工具(全能电子地图下载器https://www.downkuai.com/soft/158862.html  下载后选好安装位置后无脑下一步)

导出步骤:

一、选择你要导出影像和区域以及层级,区域可以根据地名或者坐标范围进行选中

二、选择后点击开始,会开始导出图像

导出的离线影像在mapabc文件里

将导出文件部署在资源服务器内并用ngnix配置后就可以直接使用了。

mars3d加载:(http://mars3d.cn/docs/guide/

页面引用mars3d
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import "mars3d/mars3d.css"
import * as mars3d from 'mars3d'
import 'mars3d-space'
mapSdk.value = new mars3d.Map("你的目标dom的id", {
  scene: {
    center: {lat: lat, lng: lng, alt: alt},//初始视角
    showSun: true,
    showMoon: true,
    showSkyBox: true,
    showSkyAtmosphere: true, // 开启球周边的白色轮廓
    fog: true,
    fxaa: true,
    globe: {
      showGroundAtmosphere: true, // 大气渲染(球表面白蒙蒙的效果)
      depthTestAgainstTerrain: false, // 关闭深度检测
      baseColor: "#546a53"
    },
    cameraController: {
      zoomFactor: 3.0,
      minimumZoomDistance: 1,
      maximumZoomDistance: 50000000,
      enableRotate: true,
      enableZoom: true
    },
    mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
    mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL // 2D下左右一直可以滚动重复世界地图
  },
  control: {
    toolbar: {
      position: 'right-bottom'
    },// 定位位置,可选值:"top-right"上侧靠右(cesium原生默认位置)、"top-left"上侧靠左、"left-top"左侧靠上、"left-bottom"左侧靠下、"right-top"右侧靠上、"right-bottom"右侧靠下
    baseLayerPicker: true, // basemaps底图切换按钮
    homeButton: true, // 视角复位按钮
    sceneModePicker: false, // 二三维切换按钮
    navigationHelpButton: true, // 帮助按钮
    fullscreenButton: true, // 全屏按钮
    // compass: {bottom: "toolbar", right: "5px"},// 指南针
    contextmenu: {hasDefault: true} // 右键菜单
  },
  terrain: {
    url: "https://data.mars3d.cn/terrain",
    show: true
  },
  basemaps: [
    {
      name: "导出的离线影像",
      icon: "选择一个你喜欢的图标",
      url: "http://你的静态资源ip及目录/{z}/{x}/{y}.jpg",
      type: "xyz",
      show: true,
    }

  ]
})
// 创建矢量数据图层
graphicLayer.value = new mars3d.layer.GraphicLayer({
  allowDrillPick: true,// 如果存在坐标完全相同的图标点,可以打开该属性,click事件通graphics判断
  // cluster:{
  //   enabled:true, // 聚合
  //   includePoly:false,// 关闭线面聚合
  //   minimumClusterSize:8 //区域碰撞值 ,当前密度为8
  //   // pixelRange:10
  // }
})
// 标注
let XyzLayer = new mars3d.layer.XyzLayer({
  url: "http://你的静态资源ip及目录/{z}/{x}/{y}.png",
})
mapSdk.value.addLayer(XyzLayer)

(因为导出的离线影像数据是xyz格式的,直接使用xyz加载的方式就可以了)

加载后的效果

Logo

码道开发者社区,聚焦华为云码道 CodeArts 代码智能体,沉淀 Agent、Skill、鸿蒙开发实战内容,供开发者查阅资料、交流技术、分享工程实践

更多推荐