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

已于 2022-02-25 09:11:32 修改
阅读量7k 收藏 34
点赞数 28
分类专栏： 超图+CESIUMJS 文章标签： 超图+CESIUMJS
于 2022-02-24 15:10:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44402694/article/details/123111593
版权

前言

	缺少前置学习使用资料，请自行查阅：[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>
汪 同 学 丶
关注
  • 28
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Cesium 深色主题地图样式的 GIS
NhnMacos的博客
09-26 282
Cesium是一款强大的地理信息系统（GIS）开发工具，它提供了丰富的功能和可定制性，可以用于创建各种类型的地图应用程序。本文将介绍如何使用Cesium创建一个深色主题的地图样式，并提供相应的源代码。接下来，我们将创建一个基本的Cesium地图实例，并使用深色主题样式。保存上述代码为HTML文件，并在浏览器中打开该文件，你将看到一个具有深色主题样式的Cesium地图。在上面的代码中，我们创建了一个具有全屏大小的div容器，用于容纳Cesium地图。类创建一个新的地图视图实例，并将其附加到指定的容器中。
cesium加载geoserver发布的mvt服务
D_bel的博客
04-19 1785
在Canvas中把矢量瓦片绘制好了，以图片形式像WMTS一样向Cesium提供图片服务就行了，当然也可以采用中间件的形式在后台把服务渲染好再以服务形式提供给前端。cesium+openlayer，利用openlayer的方法将mvt绘制到canvas上，然后传给cesium进行渲染，这个方法不限制坐标系，支持4490,4326,3857,900913等。cesium+mapbox，这个方法解析和加载的速度都很快，不过只支持3857和900913，不支持2000坐标系。GitHub上已经有开源的代码。
Cesium加载Mapbox自定义地图
我码玄黄的博客
06-17 622
Cesium支持加载多种影像地图，但自定义风格受限。MapBox可自定义风格并上传数据，Cesium有接口支持加载。MapBoxStudio可编辑样式并发布，Cesium可加载渲染。但MapBox加载大数据时性能受限，适合不要求高精度的场景。
记录使用超图的mapboxgl以及地图api
zuiHouHui16Sui的博客
12-30 647
2)由于项目需求,需要进行创建多个海量点图层,mapboxgl是基于webgl封装的,达到一定量的图层的时候就会报WARNING: Too many active WebGL contexts. Oldest context will be lost.看了官网没有像高德那样有marker的hide和show方法,popup也没有高德infowindow的open和close方法.只能去获取dom节点,设置style的隐藏和现实,有点烦.vue3包括包文件的引入也会报ts错误,需要自己去定义,太恶心了。
【超图+CESIUM】【基础API使用示例】20、超图｜CESIUM - 标绘线段：Cesium.DrawHandler绘制线段Cesium.DrawMode.Line
汪同学丶的博客
02-28 1052
超图｜CESIUM - 标绘：Cesium.DrawHandler绘制点位Cesium.DrawMode.Line
SuperMap中文详细API文档
07-25
supermap的中文帮助文档，里面有详细的api介绍以及专题介绍，地图的初始化示例
【超图+CESIUM】【基础API使用示例】50、超图｜CESIUM - moveLeft\moveRight\moveForward\moveBackward实现运动中的碰撞检测效果
汪同学丶的博客
12-07 2460
由于项目业务需要，所以实现了这四个api的碰撞检测效果。 核心是通过ray射线来做碰撞检测。
超图+CESIUM】【基础学习使用】示例相关公共资料
02-24
这个压缩包文件包含了使用超图与CESIUMJS进行基础学习和应用的示例资源。 首先，"超图build资源"可能指的是超图的编译后的JavaScript库文件，这些文件通常包含了超图的核心功能，如地图操作、图层管理、空间分析等...
ruoyi 若依 集成 cesium supermap 超图 加载地图倾斜摄影
08-21
本话题主要涉及的是将“ruoyi”框架与“cesium”和“supermap”进行集成，以实现地图的倾斜摄影加载功能。让我们详细探讨一下这些技术及其集成过程。 “ruoyi”是一个基于Java开发的企业级后台管理框架，它提供了...
超图三维地图开发webgl和cesium
08-31
在Tomcat中部署超图和Cesium的项目，你需要配置相应的web.xml文件，设置好静态资源路径，确保所有的JavaScript库和地图数据能够正确加载。 在项目中，"helloworld"可能是一个初始的示例或者目录，用来引导你开始...
基于超图的城市可视化示例cesium-city3d
05-14
【基于超图的城市可视化示例cesium-city3d】是一个以Cesium库为基础，实现城市三维可视化的项目。Cesium是一个强大的开源JavaScript库，专为构建动态、交互式的3D地理空间应用程序而设计，常用于地图服务、城市规划...
supermap切换底图
09-04
supermap切换底图supermap切换底图supermap切换底图supermap切换底图supermap切换底图supermap切换底图supermap切换底图supermap切换底图supermap切换底图supermap切换底图supermap切换底图supermap切换底图supermap切换底图supermap切换底图supermap切换底图supermap切换底图
Cesium加载超图S3M
01-11
理解Cesium的API、S3M的数据结构，以及如何利用超图服务或自定义插件进行转换，是成功实现这一功能的关键。通过这样的集成，用户可以在Cesium的3D环境中享受到超图丰富的三维地理数据，为GIS应用带来更加生动真实的...
mapbox矢量切片_Cesium 加载矢量切片(MapBox Vector Tile)求职学习资料
weixin_39897746的博客
12-24 1175
矢量切片(vector tile)是当前 WebGIS 较热技术，国内的高德、百度等在线地图都使用了矢量切片技术。相较于传统栅格切片，矢量切片好处很多。简单几点就是：轻量、客户端渲染、还可加密(栅格切片容易被爬取)。矢量切片格式一般有 GeoJSON、TopoJSON 、MVT (MapBox Vector Tile)、PBF。下面是 Cesium 加载 MVT 矢量切片的代码，由于样式渲染使用的...
003：vue+cesium 设置skybox透明并添加背景图
大剑师兰特的GIS世界
02-25 1312
第003个本示例的目的是介绍如何在vue+leaflet中设置skybox透明并添加背景图。我们不想要黑乎乎的背景，想自定义一个背景图，然后前面显示地球。
Cesium调用在线地形服务，SuperMap超图、火星科技、恒歌科技、CesiumLab、ESRI（weixin公众号【图说GIS】）
ONEGISER的博客
10-31 6774
前言 最近偶然发现Cesium可以调用SuperMap在线地形服务，服务地址为：https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path， 需要使用CesiumTerrainProvider。 效果展示 Cesium调用超图在线地形服务代码 <!DOCTYPE html> <html lang="en"> <head> &lt
Cesium 加载栅格切片
一醉千秋的专栏
07-06 522
Cesium加载栅格切片，使用WebMapTileServiceImageryProvider加载栅格地图栅格切片服务，支持两种方式key-value和rest。适配3857、4326、4490坐标切片
SuperMap iClient3D for WebGL/Cesium端性能优化
nan620403的博客
12-15 4000
在GIS项目中，SuperMap iClient for WebGL/Cesium加载的服务图层很多、种类也很多，经常会出现少部分数据可以，但是大批量数据加载进来会出现掉帧严重，性能急速下跌，甚至导致浏览器崩溃的情况。本文争对这种情况来罗列出了下列四大类性能优化的方案，供GIS用户参考使用。
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
最新发布
07-17
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
超图 与cesium的区别
07-03
### 回答1： 超图和cesium是两种不同的地理信息系统软件。以下是它们之间的区别： 1. 功能和用途：超图是一个全功能的GIS软件，提供丰富的地图制作、地理数据处理和空间分析功能。它主要用于地理信息系统领域的数据管理、制图分析和决策支持等任务。而cesium则是一个基于Web的三维地球平台，主要用于展示、浏览和分析三维地理数据。它适用于虚拟现实、地球建模和三维可视化等应用场景。 2. 技术架构：超图基于自有的SuperMap GIS平台开发，使用Java语言编写，支持多种操作系统。它具有强大的空间数据库管理和分布式计算能力。而cesium则是基于JavaScript和WebGL技术构建，可以轻松集成到Web应用程序中，并支持主流的浏览器。 3. 数据格式和标准：超图支持多种地理数据格式，包括SHP、GDB、GeoTIFF等，同时也支持开放的地理空间数据标准，如OGC标准。而cesium主要使用其自有的3D Tiles数据格式，该格式针对大规模的三维数据进行了优化，并支持3D Tiles标准，以提供更高效的数据传输和可视化效果。 4. 社区和生态系统：超图在中国具有广泛的用户和开发者社区，有丰富的插件和扩展生态系统。它也与国内外多家科研机构和企业建立了合作关系。而cesium在全球范围内拥有庞大的用户社区，同时也有一些专业的开发者社区，提供各种扩展和创新的解决方案。 综上所述，超图和cesium在功能、技术架构、数据格式和社区等方面存在明显的区别。根据具体的应用需求，选择合适的软件可以提高工作效率和数据可视化效果。 ### 回答2： 超图和Cesium都是地理信息系统(GIS)领域中广泛使用的工具。它们在一些方面有相似之处，但也有一些明显的区别。 首先，超图是一种基于二维平面地图的GIS工具，主要用于处理和展示地理空间数据。它提供了丰富的地图制作功能，可以创建具有多种样式和符号的地图，以满足不同需求。超图支持矢量数据和栅格数据，可以进行地图叠加、查询和空间分析等操作。它还提供了丰富的地图编辑工具，使用户能够对地图进行绘制、修改和数据编辑。 Cesium则是一种基于三维球面模型的GIS工具，主要用于三维地理可视化。它通过基于Web的技术，如HTML、CSS和JavaScript，实现了在网页上展示和交互式浏览三维地球的功能。Cesium可以加载和可视化大规模的全球地理空间数据集，支持各种地球表面要素的渲染和高级效果，如光照和阴影等。它还提供了丰富的API和工具，使开发人员能够自定义和扩展其中的功能。 总体而言，超图更加专注于二维平面地图的制作和分析，而Cesium则更加专注于三维地球的可视化和交互。超图强调图形制作和编辑的功能，而Cesium则注重地理可视化和数据交互的能力。此外，Cesium基于Web技术，可以通过浏览器直接访问和使用，而超图则可能需要特定的软件环境和安装。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值