当前位置: 首页 > news >正文

SuperMap超图使用简单笔记

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 - 运行到浏览器。

实现思路:

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

相关文章:

  • 从0探索NLP——神经网络
  • 计算机操作系统和进程
  • JAVA服务端实现页面截屏(附代码)
  • Java入门要知道!
  • [6/101] 101次软件测试面试之经典面试题剖析
  • 电脑c盘满了变成红色了怎么清理,清理c盘详细攻略
  • 现在的00后,实在是太卷了
  • RocketMQ概述
  • 解决Ubuntu22.04.1上安装ch34x串口驱动报 Key was rejected by service 需要签名的问题
  • [python入门㊿] - python如何打断点
  • CCNP350-401学习笔记(501-550题)
  • 音箱上8键触摸芯片绿芯GTC08L完美替换启攀微
  • php+vue加油站会员服务系统 java微信小程序
  • ES6--class类(详解/看完必会)
  • ChatGPT的出现网络安全专家是否会被替代?
  • 游戏服务器框架设计 总纲
  • PB里post提交
  • Linux 配置网卡(基础配置、网卡会话配置、网卡绑定配置)
  • 深度学习Week16-yolo.py文件解读(YOLOv5)
  • 富文本编辑组件封装,tinymce、tinymce-vue
  • 电子作业指导书系统能树立良好的生产形象
  • Doris单机部署
  • 利用身份证号获取生日信息
  • c++模板的简单认识
  • 真香!Linux 原来是这么管理内存的
  • 计网之IP协议和以太网
  • 华为OD机试 - 关联子串(Python) | 机试题+算法思路+考点+代码解析 【2023】
  • SpringBoot学习笔记(二)
  • 亚马逊云科技SageMaker:实现自动、可视化管理迭代
  • 汽车 Automotive > CAN Transceivers收发器选择