本地开发中 Cesium使用天地图瓦片请求跨域处理的问题

原创已于 2025-12-26 11:30:40 修改 · 484 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#Cesium #天地图 #瓦片加载跨域

于 2025-12-25 11:22:37 首次发布

Cesium 专栏收录该内容

1 篇文章

订阅专栏

跨域的问题

我是直接复制粘贴的天地图中文档 js的文件与引用
但是会出现跨域的问题

于是我就把天地图文档中的实例展示的那个地图内容扒了一下。发现在使用就可以了

下面我是把后的文件我一次展示出来

axios

记得打开下面的功能允许跨域

//跨域请求，允许保存cookie
axios.defaults.withCredentials = true;

html

！！！需要注意的是下面的html文件是我在vue3的工程中使用的，所以有一个引用
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
不需要的话，记得自己把这个删除掉或者注释掉！！！

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>国家地理信息公共服务平台 天地图</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <script type="text/javascript" cesium="true"
    src="https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Cesium.js"></script>
  <script type="text/javascript" cesium="true"
    src="https://api.tianditu.gov.cn/cdn/plugins/cesium/Cesium_ext_min.js"></script>
  <script type="text/javascript" cesium="true"
    src="https://api.tianditu.gov.cn/cdn/plugins/cesium/long.min.js"></script>
  <script type="text/javascript" cesium="true"
    src="https://api.tianditu.gov.cn/cdn/plugins/cesium/bytebuffer.min.js"></script>
  <script type="text/javascript" cesium="true"
    src="https://api.tianditu.gov.cn/cdn/plugins/cesium/protobuf.min.js"></script>
  <link rel="stylesheet" cesium="true"
    href="https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Widgets/widgets.css">
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #cesiumContainer {
      width: 100%;
      height: 100%;
    }

    #cesiumContainer .cesium-viewer-bottom {
      display: none;
    }
  </style>
  <style>
    .cesium-credit-lightbox-overlay {
      display: none;
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(80, 80, 80, 0.8);
    }

    .cesium-credit-lightbox {
      background-color: #303336;
      color: #ffffff;
      position: relative;
      min-height: 100px;
      margin: auto;
    }

    .cesium-credit-lightbox>ul>li a,
    .cesium-credit-lightbox>ul>li a:visited {
      color: #ffffff;
    }

    .cesium-credit-lightbox>ul>li a:hover {
      color: #48b;
    }

    .cesium-credit-lightbox.cesium-credit-lightbox-expanded {
      border: 1px solid #444;
      border-radius: 5px;
      max-width: 370px;
    }

    .cesium-credit-lightbox.cesium-credit-lightbox-mobile {
      height: 100%;
      width: 100%;
    }

    .cesium-credit-lightbox-title {
      padding: 20px 20px 0 20px;
    }

    .cesium-credit-lightbox-close {
      font-size: 18pt;
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 6px;
      color: #ffffff;
    }

    .cesium-credit-lightbox-close:hover {
      color: #48b;
    }

    .cesium-credit-lightbox>ul {
      margin: 0;
      padding: 12px 20px 12px 40px;
      font-size: 13px;
    }

    .cesium-credit-lightbox>ul>li {
      padding-bottom: 6px;
    }

    .cesium-credit-lightbox>ul>li * {
      padding: 0;
      margin: 0;
    }

    .cesium-credit-expand-link {
      padding-left: 5px;
      cursor: pointer;
      text-decoration: underline;
      color: #ffffff;
    }

    .cesium-credit-expand-link:hover {
      color: #48b;
    }

    .cesium-credit-text {
      color: #ffffff;
    }

    .cesium-credit-textContainer *,
    .cesium-credit-logoContainer * {
      display: inline;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

下面是js


var token = '你自己的token';
// 服务域名
var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
// 服务负载子域
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];

// cesium 初始化
var viewer = new Cesium.Map('cesiumContainer', {
  shouldAnimate: true, //是否允许动画
  selectionIndicator: false,
  baseLayerPicker: false,
  fullscreenButton: false,
  geocoder: false,
  homeButton: false,
  infoBox: false,
  sceneModePicker: false,
  timeline: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  showRenderLoopErrors: false,
  shadows: false,
});

// 抗锯齿
viewer.scene.fxaa = true;
viewer.scene.postProcessStages.fxaa.enabled = false;
// 水雾特效
viewer.scene.globe.showGroundAtmosphere = true;
// 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度
viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(-20);
viewer.scene.screenSpaceCameraController.autoResetHeadingPitch = false;
viewer.scene.screenSpaceCameraController.inertiaZoom = 0.5;
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50;
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000;
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
  Cesium.CameraEventType.RIGHT_DRAG,
  Cesium.CameraEventType.WHEEL,
  Cesium.CameraEventType.PINCH,
];
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
  Cesium.CameraEventType.MIDDLE_DRAG,
  Cesium.CameraEventType.PINCH,
  {
    eventType: Cesium.CameraEventType.LEFT_DRAG,
    modifier: Cesium.KeyboardEventModifier.CTRL,
  },
  {
    eventType: Cesium.CameraEventType.RIGHT_DRAG,
    modifier: Cesium.KeyboardEventModifier.CTRL,
  },
];
// 取消默认的双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

// 叠加影像服务
var imgMap = new Cesium.UrlTemplateImageryProvider({
  url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
  subdomains: subdomains,
  tilingScheme: new Cesium.WebMercatorTilingScheme(),
  maximumLevel: 18
});
viewer.imageryLayers.addImageryProvider(imgMap);

// 叠加国界服务
var iboMap = new Cesium.UrlTemplateImageryProvider({
  url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
  subdomains: subdomains,
  tilingScheme: new Cesium.WebMercatorTilingScheme(),
  maximumLevel: 10
});
viewer.imageryLayers.addImageryProvider(iboMap);

// 叠加地形服务
var terrainUrls = new Array();

for (var i = 0; i < subdomains.length; i++) {
  var url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?T=elv_c&tk=' + token;
  terrainUrls.push(url);
}

var provider = new Cesium.GeoTerrainProvider({
  urls: terrainUrls
});

viewer.terrainProvider = provider;

// 将三维球定位到中国
viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(116.39, 39.90, 1500),
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-45),
    roll: Cesium.Math.toRadians(0)
  },
  complete: function callback() {
    // 定位完成之后的回调函数
  }
});

// 叠加三维地名服务
var wtfs = new Cesium.GeoWTFS({
  viewer,
  //三维地名服务，使用wtfs服务
  subdomains: subdomains,
  metadata: {
    boundBox: {
      minX: -180,
      minY: -90,
      maxX: 180,
      maxY: 90
    },
    minLevel: 1,
    maxLevel: 20
  },
  depthTestOptimization: true,
  dTOElevation: 15000,
  dTOPitch: Cesium.Math.toRadians(-70),
  aotuCollide: true, //是否开启避让
  collisionPadding: [5, 10, 8, 5], //开启避让时，标注碰撞增加内边距，上、右、下、左
  serverFirstStyle: true, //服务端样式优先
  labelGraphics: {
    font: "28px sans-serif",
    fontSize: 28,
    fillColor: Cesium.Color.WHITE,
    scale: 0.5,
    outlineColor: Cesium.Color.BLACK,
    outlineWidth: 2,
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    showBackground: false,
    backgroundColor: Cesium.Color.RED,
    backgroundPadding: new Cesium.Cartesian2(10, 10),
    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
    verticalOrigin: Cesium.VerticalOrigin.TOP,
    eyeOffset: Cesium.Cartesian3.ZERO,
    pixelOffset: new Cesium.Cartesian2(5, 5),
    disableDepthTestDistance: undefined
  },
  billboardGraphics: {
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    verticalOrigin: Cesium.VerticalOrigin.CENTER,
    eyeOffset: Cesium.Cartesian3.ZERO,
    pixelOffset: Cesium.Cartesian2.ZERO,
    alignedAxis: Cesium.Cartesian3.ZERO,
    color: Cesium.Color.WHITE,
    rotation: 0,
    scale: 1,
    width: 18,
    height: 18,
    disableDepthTestDistance: undefined
  }
});

//三维地名服务，使用wtfs服务
wtfs.getTileUrl = function () {
  return tdtUrl + 'mapservice/GetTiles?lxys={z},{x},{y}&VERSION=1.0.0&tk=' + token;
}

// 三维图标服务
wtfs.getIcoUrl = function () {
  return tdtUrl + 'mapservice/GetIcon?id={id}&tk=' + token;
}

wtfs.initTDT([{ "x": 6, "y": 1, "level": 2, "boundBox": { "minX": 90, "minY": 0, "maxX": 135, "maxY": 45 } }, { "x": 7, "y": 1, "level": 2, "boundBox": { "minX": 135, "minY": 0, "maxX": 180, "maxY": 45 } }, { "x": 6, "y": 0, "level": 2, "boundBox": { "minX": 90, "minY": 45, "maxX": 135, "maxY": 90 } }, { "x": 7, "y": 0, "level": 2, "boundBox": { "minX": 135, "minY": 45, "maxX": 180, "maxY": 90 } }, { "x": 5, "y": 1, "level": 2, "boundBox": { "minX": 45, "minY": 0, "maxX": 90, "maxY": 45 } }, { "x": 4, "y": 1, "level": 2, "boundBox": { "minX": 0, "minY": 0, "maxX": 45, "maxY": 45 } }, { "x": 5, "y": 0, "level": 2, "boundBox": { "minX": 45, "minY": 45, "maxX": 90, "maxY": 90 } }, { "x": 4, "y": 0, "level": 2, "boundBox": { "minX": 0, "minY": 45, "maxX": 45, "maxY": 90 } }, { "x": 6, "y": 2, "level": 2, "boundBox": { "minX": 90, "minY": -45, "maxX": 135, "maxY": 0 } }, { "x": 6, "y": 3, "level": 2, "boundBox": { "minX": 90, "minY": -90, "maxX": 135, "maxY": -45 } }, { "x": 7, "y": 2, "level": 2, "boundBox": { "minX": 135, "minY": -45, "maxX": 180, "maxY": 0 } }, { "x": 5, "y": 2, "level": 2, "boundBox": { "minX": 45, "minY": -45, "maxX": 90, "maxY": 0 } }, { "x": 4, "y": 2, "level": 2, "boundBox": { "minX": 0, "minY": -45, "maxX": 45, "maxY": 0 } }, { "x": 3, "y": 1, "level": 2, "boundBox": { "minX": -45, "minY": 0, "maxX": 0, "maxY": 45 } }, { "x": 3, "y": 0, "level": 2, "boundBox": { "minX": -45, "minY": 45, "maxX": 0, "maxY": 90 } }, { "x": 2, "y": 0, "level": 2, "boundBox": { "minX": -90, "minY": 45, "maxX": -45, "maxY": 90 } }, { "x": 0, "y": 1, "level": 2, "boundBox": { "minX": -180, "minY": 0, "maxX": -135, "maxY": 45 } }, { "x": 1, "y": 0, "level": 2, "boundBox": { "minX": -135, "minY": 45, "maxX": -90, "maxY": 90 } }, { "x": 0, "y": 0, "level": 2, "boundBox": { "minX": -180, "minY": 45, "maxX": -135, "maxY": 90 } }]);