Bootstrap

【超图+CESIUM】【基础API使用示例】04、超图｜CESIUM - 设置地图风格样式

前言

	缺少前置学习使用资料，请自行查阅：[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.csdn.net/weixin_44402694/article/details/123110136)
	以下示例使用到的公共静态资料，不建议下载，建议官网自行下载超图Build资源，示例所涉及图片会在示例使用到时提供出来。如有需要可下载：[https://download.csdn.net/download/weixin_44402694/82180350](https://download.csdn.net/download/weixin_44402694/82180350)。
	设置地图风格样式。

使用

内容简介

1、根据本地图片设置3d球的样式
2、加载天地图
3、加载bingmap
4、加载地形服务
5、加载supermap影像服务
6、添加由supermap iserver发布的s3m服务
7、添加mvt服务图层

1、根据本地图片设置场景3d球的样式
  • 使用到图片下方图片
    在这里插入图片描述
  • 效果
    在这里插入图片描述
  • 完整代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置地图风格</title>
    <link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script
      type="text/javascript"
      src="./public/Build/Cesium/Cesium.js"
    ></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #cesium-container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="cesium-container" />
    <script>
      let viewer = null
      window.onload = function () {
        viewer = new Cesium.Viewer('cesium-container')
        setMapStyleByLocalImgHandler()
      }

      // 1、根据本地图片设置场景3d球的样式
      function setMapStyleByLocalImgHandler() {
        viewer.imageryLayers.addImageryProvider(
          new Cesium.SingleTileImageryProvider({
            url: './public/static/img/3d-map.jpeg',
          })
        )
      }
      </script>
  </body>
</html>
2、加载天地图

  • 效果
    在这里插入图片描述

  • 完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置地图风格</title>
    <link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script
      type="text/javascript"
      src="./public/Build/Cesium/Cesium.js"
    ></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #cesium-container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="cesium-container" />
    <script>
      let viewer = null
      window.onload = function () {
        viewer = new Cesium.Viewer('cesium-container')
        setMapStyleByTDTHandler()
      }

      // 2、加载天地图
      function setMapStyleByTDTHandler() {
        // Cesium.TiandituMapsStyle.CIA_C : String 天地图全球中文注记服务（经纬度投影）
        // Cesium.TiandituMapsStyle.CIA_W : String 天地图全球中文注记服务（墨卡托投影）
        // Cesium.TiandituMapsStyle.CTA_C : String 天地图全球地形中文注记服务（经纬度投影）
        // Cesium.TiandituMapsStyle.CTA_W : String 天地图全球地形中文注记服务（墨卡托投影）
        // Cesium.TiandituMapsStyle.CVA_C : String 天地图全球矢量中文注记服务（经纬度投影）
        // Cesium.TiandituMapsStyle.CVA_W : String 天地图全球矢量中文注记服务（墨卡托投影）
        // Cesium.TiandituMapsStyle.EIA_C : String 天地图全球影像英文注记服务（经纬度投影）
        // Cesium.TiandituMapsStyle.EIA_W : String 天地图全球影像英文注记服务（墨卡托投影）
        // Cesium.TiandituMapsStyle.EVA_C : String 天地图全球矢量英文注记服务（经纬度投影）
        // Cesium.TiandituMapsStyle.EVA_W : String 天地图全球矢量英文注记服务（墨卡托投影）
        // Cesium.TiandituMapsStyle.IMG_C : String 天地图全球影像地图服务（经纬度投影）
        // Cesium.TiandituMapsStyle.IMG_W : String 天地图全球影像地图服务（墨卡托投影）
        // Cesium.TiandituMapsStyle.TER_C : String 天地图全球地形晕渲服务（经纬度投影）
        // Cesium.TiandituMapsStyle.TER_W : String 天地图全球地形晕渲服务（墨卡托投影）
        // Cesium.TiandituMapsStyle.VEC_C : String 天地图全球矢量地图服务（经纬度投影）
        // Cesium.TiandituMapsStyle.VEC_W : String 天地图全球矢量地图服务（墨卡托投影）
        viewer.imageryLayers.addImageryProvider(
          new Cesium.TiandituImageryProvider({
            mapStyle: Cesium.TiandituMapsStyle.VEC_C, //天地图全球中文注记服务
            token: 'bc3b5d509e380ae4308cc4ace4385ddc', //由天地图官网申请的密钥
          })
        )
        viewer.imageryLayers.addImageryProvider(
          new Cesium.TiandituImageryProvider({
            mapStyle: Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务
            token: 'bc3b5d509e380ae4308cc4ace4385ddc', //由天地图官网申请的密钥
          })
        )
      }
    </script>
  </body>
</html>
3、加载bingmap

  • 效果
    在这里插入图片描述

  • 完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置地图风格</title>
    <link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script
      type="text/javascript"
      src="./public/Build/Cesium/Cesium.js"
    ></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #cesium-container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="cesium-container" />
    <script>
      let viewer = null
      window.onload = function () {
        viewer = new Cesium.Viewer('cesium-container')
        setMapStyleByBingMapHandler()
      }

      // 3、加载bingmap
      function setMapStyleByBingMapHandler() {
        // Cesium.BingMapsStyle.AERIAL : String 影像地图
        // Cesium.BingMapsStyle.AERIAL_WITH_LABELS : String 带路网的影像
        // Cesium.BingMapsStyle.COLLINS_BART : String Collins Bart imagery.
        // Cesium.BingMapsStyle.ORDNANCE_SURVEY : String Ordnance Survey imagery
        // Cesium.BingMapsStyle.ROAD : String 矢量路网图
        viewer.imageryLayers.addImageryProvider(
          new Cesium.BingMapsImageryProvider({
            url: 'https://dev.virtualearth.net',
            mapStyle: Cesium.BingMapsStyle.AERIAL,
            key: 'AhrJDRCi6VfUJWMk-_eZNGTfDSddoQfoUGRaf1PJg3KPejm6W3H0kjdhJFgIV948', //由BingMap官网申请的密钥
          })
        )
      }
    </script>
  </body>
</html>
4、加载地形服务

  • 效果
    在这里插入图片描述

  • 完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置地图风格</title>
    <link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script
      type="text/javascript"
      src="./public/Build/Cesium/Cesium.js"
    ></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #cesium-container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="cesium-container" />
    <script>
      let viewer = null
      window.onload = function () {
        viewer = new Cesium.Viewer('cesium-container')
        setTerrainServiceHandler()
      }
      // 5、加载地形服务
      function setTerrainServiceHandler() {
        setViewerViewByParamsHandler({
          x: -1206939.1925299785,
          y: 5337998.241228442,
          z: 3286279.2424502545,
          heading: 1.4059101895600987,
          pitch: -0.20917672793046682,
          roll: 2.708944180085382e-13,
        })
        viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
          url: 'http://www.supermapol.com/realspace/services/3D-dixingyingxiang/rest/realspace/datas/DatasetDEM',
          isSct: true, //地形服务源自SuperMap iServer发布时需设置isSct为true
        })
      }
      // 根据坐标等参数设置当前场景的视角
      function setViewerViewByParamsHandler({ x, y, z, heading, pitch, roll }) {
        viewer.scene.camera.setView({
          destination: new Cesium.Cartesian3(x, y, z),
          orientation: {
            heading,
            pitch,
            roll,
          },
        })
      }
    </script>
  </body>
</html>
5、加载supermap影像服务

  • 效果
    在这里插入图片描述

  • 完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置地图风格</title>
    <link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script
      type="text/javascript"
      src="./public/Build/Cesium/Cesium.js"
    ></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #cesium-container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="cesium-container" />
    <script>
      let viewer = null
      window.onload = function () {
        viewer = new Cesium.Viewer('cesium-container')
        setSuperMapImageryHandler()
      }
      // 6、添加supermap影像服务
      function setSuperMapImageryHandler() {
        // const layer = viewer.imageryLayers.addImageryProvider(
        //   new Cesium.SuperMapImageryProvider({
        //     url: 'http://www.supermapol.com/realspace/services/3D-HuanJingJianCe-2/rest/realspace/datas/rs0300@%E6%88%BF%E5%B1%B1', //影像服务的地址
        //   })
        // )
        const layer = viewer.imageryLayers.addImageryProvider(
          new Cesium.SuperMapImageryProvider({
            url: 'http://{s}/realspace/services/3D-dixingyingxiang/rest/realspace/datas/MosaicResult',
            subdomains: ['www.supermapol.com'],
          })
        )
        flyToHandler({
          obj: layer,
          duration: 2,
          maximumHeight: 100,
        })
      }
      // 飞到指定的实体、图层等
      function flyToHandler({ obj, duration, maximumHeight }) {
        viewer.flyTo(obj, {
          duration: duration || 1, // 飞行的持续时间
          maximumHeight: maximumHeight || 10, // 飞行中的最大高度
          // offset: new Cesium.HeadingPitchRange(heading, pitch, range) // 在以目标为中心的局部“东-北-上”参考系中，距离目标的偏移量
        })
      }
    </script>
  </body>
</html>
6、添加由supermap iserver上发布的s3m服务

  • 效果
    在这里插入图片描述

  • 完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置地图风格</title>
    <link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script
      type="text/javascript"
      src="./public/Build/Cesium/Cesium.js"
    ></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #cesium-container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="cesium-container" />
    <script>
      let viewer = null
      window.onload = function () {
        viewer = new Cesium.Viewer('cesium-container')
        setS3MServiceHandler()
      }
      // 7、添加由supermap iserver上发布的s3m服务
      function setS3MServiceHandler() {
        // 第一种方式：通过open接口将整个场景打开，这种方法简单易操作且不易出现遗漏图层的情况
        viewer.scene.open(
          'http://{s}/realspace/services/3D-NewCBD/rest/realspace',
          undefined,
          {
            subdomains: ['www.supermapol.com'],
          }
        )
        // 或者直接open： viewer.scene.open('http://www.supermapol.com/realspace/services/3D-NewCBD/rest/realspace')
        // 第二种方式：通过addS3MTilesLayerByScp接口进行添加，该方式的优势是，可以根据自己的需要选择部分图层添加到场景中，提高加载性能，但需要加载多图层的整个场景时，不如scene.open方便
        // const promise = scene.addS3MTilesLayerByScp(
        //   'http://localhost:8090/iserver/services/3D-test/rest/realspace/datas/zj/config',
        //   {
        //     name: 'base',
        //     cacheKey: '123456', //三维缓存密钥，由SuperMap iServer设置和获取
        //   }
        // )
        // promise.then(function (layer) {
        //   layer.visible = true
        // })
      }
    </script>
  </body>
</html>
7、添加MVT图层

  • 效果
    在这里插入图片描述

  • 完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置地图风格</title>
    <link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script
      type="text/javascript"
      src="./public/Build/Cesium/Cesium.js"
    ></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #cesium-container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="cesium-container" />
    <script>
      let viewer = null
      window.onload = function () {
        viewer = new Cesium.Viewer('cesium-container')
        setMVTServiceHandler()
      }
      // 8、添加MVT图层
      function setMVTServiceHandler() {
        // 在SuperMap桌面产品中将地图生成好的矢量瓦片地图通过SuperMap iServer发布成矢量瓦片或三维服务后， 在WebGL中利用接口addVectorTilesMap将MVT图层服务添加到场景中
        const mvtMap = viewer.scene.addVectorTilesMap({
          url: 'http://{s}/realspace/services/map-mvt-JingJinDiQuDiTu/restjsr/v1/vectortile/maps/%E4%BA%AC%E6%B4%A5%E5%9C%B0%E5%8C%BA%E5%9C%B0%E5%9B%BE',
          subdomains: ['www.supermapol.com'], // 支持多个子域
          canvasWidth: 512,
          name: 'testMVT',
          viewer: viewer,
        })
        const layerReadyPromise = mvtMap.readyPromise
        Cesium.when(layerReadyPromise, function (data) {
          const bounds = mvtMap.rectangle
          viewer.scene.camera.setView({ // 定位到指定的视角
            destination: new Cesium.Cartesian3.fromRadians(
              (bounds.east + bounds.west) * 0.5,
              (bounds.north + bounds.south) * 0.5,
              10000
            ),
            orientation: {
              heading: 0,
              roll: 0,
            },
          })

          const mapboxStyle = mvtMap.mapboxStyle
          for (let id in mapboxStyle.layers) {
            const layer = mapboxStyle.layers[id]
            if (layer.type === 'symbol') {
              mvtMap.setLayoutProperty(layer.id, 'text-max-width', 2) // 图层文本一行最多显示两个字，多了换行显示
            }
          }
        })
      }
    </script>
  </body>
</html>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
java: 错误: 不支持发行版本 5 java: 错误: 不支持发行版本8 java: 错误: 不支持发行版本17
强行仅用time.localtime制作“日历牌”——全程记录“顶牛”“调戏”我的AI学习搭子
java学习笔记day05-数组作为方法返回值
VM虚拟机安装ubuntu-20.04.6-live-server-amd64.iso版本全过程及注意事项。
docker安装，rancher安装
BFC 清除浮动详解
Ubuntu22.04虚拟机安装
【CTF Web】BUUCTF Upload-Labs-Linux Pass-09 Writeup（文件上传+PHP+Apache多后缀解析漏洞）
计算机毕业设计-基于Java+SSM架构的精品课程在线学习系统项目开发实战(附源码+论文)
抖音巨量引擎账户托管有用吗
;