广西教育平台网站建设seo优化效果怎么样
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 运行到浏览器。否则跨域。