SuperMap超图使用简单笔记

九霄123

已于 2023-02-22 15:10:09 修改

阅读量1.7k

点赞数

文章标签：前端

于 2023-02-22 15:09:43 首次发布

本文链接：https://blog.csdn.net/lyxkgc/article/details/129159572

版权

1 需求：

项目使用的是openlayer和Cesium，现在需要使用超图的图层，和引入实景公路功能。

2 使用过程中出现一下疑问点记录如下：

超图：北京超图软件股份有限公司是全球第三大、亚洲最大的地理信息系统（GIS）软件厂商,是一家国内的地图服务商。超图有自己的全生态产品，部分产品为在其他技术基础上修改优化而来。

3 Cesium加载超图的图层

思路是，使用Cesium自己的依赖包，正常加载。

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

<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.102/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.102/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body>
  <div id="cesiumContainer"></div>
  <script>

    Cesium.Ion.defaultAccessToken =
      "eyJhbGciOiJIU*****5cCI6IkpXVCJ9.eyJqdGkiOiI4ZjNhMDU4NC0wNWMxLTRhNmEtYWI4Yy01M2EzMzY2NTY0ZTYiLCJpZCI6MTkzMTksInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzUzNTUxMzJ9.zO0b6MjVkjfRDD9bHG1ffvTVbTA0WQ1JU16X9cndyv0";

    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(
        119.90,
        31.02,
        60000.0
      ),
    });

    // 超图的图层
    viewer.imageryLayers.addImageryProvider(
      new Cesium.WebMapServiceImageryProvider({
        url: "http://****.***:8090/iserver/services/map-changxingxiandao/wms22",
        layers: "xiandao@changxingxd",

      }),
      8
    );



  </script>
  </div>
</body>

</html>

4 Openlayer加载超图图层

思路：使用openlayer依赖，正常加载。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_tiledMapLayer4326"></title>
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" rel="stylesheet" />
<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/ol/iclient-ol.min.js"></script>
<style>
    body,html{
        height: 100%;
    }
</style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
    var map, url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-world/rest/maps/World";
                                       var url = "http://**.**.**.***:8090/iserver/map-chang***/rest/maps/xiandao@changxingxd";
    map = new ol.Map({
        target: 'map',
        controls: ol.control.defaults({attributionOptions: {collapsed: false}})
            .extend([new ol.supermap.control.Logo()]),
        view: new ol.View({
            center:[121.2,30],
            zoom: 9,
            projection: 'EPSG:4326'
        })
    });

    var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: url,
            wrapX: true
        }),
        projection: 'EPSG:4326'
    });

    map.addLayer(layer);
    map.addControl(new ol.supermap.control.ScaleLine());

</script>
</body>

</html>

5 项目引入道路实景（虚拟漫游 supermap ）

1.相关资料

国内漫游产品

https://www.5uvr.com/

虚拟开发平台国外的

krpano

www.krpano.com

国外网站，可能打不开

购买基础包（可以使用所有api）：1246 元

458欧元（所有api+ 去除右键产品信息和logo）折合人民币 3352 元

什么是虚拟漫游？

简单来说，虚拟漫游就是由多个VR全景和多媒体技术组成的一个整合体。

krpano就是一种将VR全景图制作成虚拟漫游的技术。

实现思路：

从数据采集到数据处理到前端展示一整套流程，需要一定的人员参与。

全景车+全景相机采集图像信息，全景测量，使用krpano，对全景图片进行细碎化，再根据空间的上下左右前后6个面进行逻辑上的缝合，形成虚拟全景。

2 使用

登录官网https://krpano.com/download/，根据系统下载相应的软件，安装到电脑，根据流程导入采集的全景图片，稍等片刻，图片多的话处理时间会相应增加，形成一个工程，相关参考demo.

3注意点

demo的主html文件不能直接打开，需要启动本地服务，或使用Hbuilder - 运行到浏览器。

实现思路：

下载超图的三维资源包 http://support.supermap.com.cn/product/iClient.aspx
本案例使用的是， SuperMap iClient3D 11i (2022) SP1 for Cesium(2022-11-01) ，这个版本是超图在
Cesium的基础上优化而来，实际就是在这个基础上加了自己的js，图片，所以和Cesium官网上的资源包
是不一样的。
查看demo ,运行时，同样需要启动服务，或使用Hbuilder 运行到浏览器。否则跨域。