cesium加载本地地图（地图资源放服务器也行），以及设置背景图和只显示部分区域地图，隐藏大气层，去掉光圈等...

@玖伍贰柒

已于 2024-09-09 18:12:50 修改

阅读量381

点赞数 2

文章标签：前端

于 2024-09-09 10:56:21 首次发布

本文链接：https://blog.csdn.net/m0_55794001/article/details/142051913

版权

1.地图容器

<template>
  <div id="earthContainer"> </div>
</template>


<style lang="less" scoped>
#earthContainer {
  width: 100%;
  height: 100%;
  background-image: url("你的图片路径");//背景图片
  background-size: 100% 100%;
}
</style>

2.加载地图及相关设置

//在script标签中引入cesium
import * as Cesium from 'cesium';


function initEarth() {
  let earth = new Cesium.Viewer("earthContainer", {
    contextOptions: {
      webgl: {
        alpha: true,//背景图才能显示出来
      }
    },
    infoBox: false,//隐藏点击要素后的提示信息
    geocoder: false, //右上角 搜索
    homeButton: false, //右上角 Home
    sceneModePicker: false, //右上角 2D/3D切换
    baseLayerPicker: false,  //右上角 地形
    navigationHelpButton: false, //右上角 Help
    animation: false, // 左下角 圆盘动画控件
    timeline: false, //时间轴
    fullscreenButton: false, //右下角 全屏控件
    vrButton: false, // 如果设置为true，将创建VRButton小部件。
    scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
    //加载地图（默认显示的地图瓦片，如果加载多个地图图层，该层会显示在最下层）
    baseLayer: Cesium.ImageryLayer.fromProviderAsync(
        Cesium.TileMapServiceImageryProvider.fromUrl(
            Cesium.buildModuleUrl("你的地图瓦片资源地址"),
        ),
    ),
  })
  earth.scene.screenSpaceCameraController.maximumZoomDistance = 9000000;//设置地图的最小缩放级别，单位为米
  earth.scene.screenSpaceCameraController.maximumZoomDistance = "自己设定数字";//设置地图的最大缩放级别，单位为米
  earth._cesiumWidget._creditContainer.style.display = "none"; //隐藏版本信息
  earth.scene.globe.baseColor = Cesium.Color.TRANSPARENT;//设置地球透明
  earth.scene.globe.showGroundAtmosphere = false;//是否显示地球大气层
  earth.scene.skyAtmosphere.show = false;//取消光圈
  earth.scene.skyBox.show = false;//设置不显示天空 //背景图才能显示出来
  earth.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);//设置不显示天空（天空背景颜色设置为透明）
  // 创建第一个瓦片图层（如果只显示一个地图瓦片图层则只设置默认就好）
  let imageryLayer1 = new Cesium.ImageryLayer.fromProviderAsync(
      Cesium.TileMapServiceImageryProvider.fromUrl(
          Cesium.buildModuleUrl("你的地图瓦片资源地址")
      )
  );
  // // 创建第二个瓦片图层（如果只显示一个地图瓦片图层则只设置默认就好）
  // let imageryLayer2 = new Cesium.ImageryLayer.fromProviderAsync(
  //     Cesium.TileMapServiceImageryProvider.fromUrl(
  //         Cesium.buildModuleUrl("你的地图瓦片资源地址")
  //     )
  // );
  // 将两个图层添加到 Viewer（将地图添加到视图中，我记得此方法先添加的显示在最上层）
  //一般需要局部显示更清晰的地图瓦片则需要添加多个地图图层
  earth.imageryLayers.add(imageryLayer1);
  // earth.imageryLayers.add(imageryLayer2);
};

3.地图瓦片格式（"你的地图瓦片资源地址"拿到的地图瓦片资源格式）

1）本地瓦片资源（不建议放本地，资源太大的话会影响项目编译速度）

1.1）vue2可将资源放在static里面，vue3可将资源放在public里面

1.2）获取资源

//方法一：步骤二里面"你的地图瓦片资源地址"调用此方法获取本地地图瓦片资源
function getMapTiles() {
      const baseUrl = window.location.origin + '/';
      // baseUrl 会是类似 'http://example.com/' 或 'http://localhost:8080/' 的形式
      const relativePath = '../../static/earthImg';//你的本地瓦片资源的相对路径
      // 创建一个 URL 对象来处理路径
      const fullUrl = new URL(relativePath, baseUrl);
      return fullUrl.href;
}
//方法二：步骤二里面"你的地图瓦片资源地址"直接使用你的本地瓦片资源的相对路径，类似于'../../static/earthImg'

2）地图瓦片放在服务器上面的（步骤二里面"你的地图瓦片资源地址"直接填写服务器资源地址）

4.附：tilemapresource.xml代码(每个地图瓦片资源的都不一样，仅作格式参考)

<?xml version="1.0" encoding="UTF-8" ?>
<tilemap tilemapservice="http://tms.osgeo.org/1.0.0" version="1.0.0">
    <title>中国</title>
    <abstract>WeMap Export TMS</abstract>
    <srs>EPSG:4326</srs>
    <vsrs />
    <boundingbox minx="73.476562500" miny="3.515625000" maxx="135.351562500" maxy="53.789062500" />
    <origin x="73.476562500" y="3.515625000" />
    <tileformat extension="png" mime-type="image/png" width="256" height="256" />
    <tilesets profile="global-geodetic">
        <tileset href="" order="0" units-per-pixel="0.703125000" />
        <tileset href="" order="1" units-per-pixel="0.351562500" />
        <tileset href="" order="2" units-per-pixel="0.175781250" />
        <tileset href="" order="3" units-per-pixel="0.087890625" />
        <tileset href="" order="4" units-per-pixel="0.043945313" />
        <tileset href="" order="5" units-per-pixel="0.021972656" />
        <tileset href="" order="6" units-per-pixel="0.010986328" />
        <tileset href="" order="7" units-per-pixel="0.005493164" />
        <tileset href="" order="8" units-per-pixel="0.002746582" />
        <tileset href="" order="9" units-per-pixel="0.001373291" />
        <tileset href="" order="10" units-per-pixel="0.000686646" />
        <tileset href="" order="11" units-per-pixel="0.000343323" />
        <tileset href="" order="12" units-per-pixel="0.000171661" />
        <tileset href="" order="13" units-per-pixel="0.000085831" />
        <tileset href="" order="14" units-per-pixel="0.000042915" />
        <tileset href="" order="15" units-per-pixel="0.000021458" />
        <tileset href="" order="16" units-per-pixel="0.000010729" />
        <tileset href="" order="17" units-per-pixel="0.000005364" />
        <tileset href="" order="18" units-per-pixel="0.000002682" />
        <tileset href="" order="19" units-per-pixel="0.000001341" />
        <tileset href="" order="20" units-per-pixel="0.000000671" />
    </tilesets>
</tilemap>