将影像地图发布成wmts服务，并在客户端加载影像地图

最新推荐文章于 2024-12-03 15:02:46 发布

疆~

最新推荐文章于 2024-12-03 15:02:46 发布

阅读量4.4k

点赞数 2

文章标签： SuperMap iClient3D for Webgl SuperMap iClient3D for Webgl

本文链接：https://blog.csdn.net/qq_40323256/article/details/96980748

版权

SuperMap iClient3D for Webgl 专栏收录该内容

4 篇文章

订阅专栏

1.加载影像数据

在idesktop中加载影像数据（注意：该影像数据必须要有坐标系，比如wgs84），并保存为地图。

2.切图

右键该地图-【生成地图瓦片（单任务）】-【新建切图任务】，图片类型选择“png”。

3.打开iserver服务器

地址：*\supermap-iserver-9.1.0a-win64-deploy\bin\service.bat

4.发布成wmts服务

浏览器输入链接：http://localhost:8090/iserver/manager ，点击【首页】-【快速发布一个或一组服务】-【UGCV5瓦片】-【远程浏览…】，选择刚刚切图生成的瓦片配置文件（后缀名为.sci或.inf的文件），然后选择服务类型为“WMTS1.0.0服务”。

5.查看地图服务

点击【首页】-【服务管理】，即可看到我们的地图服务，点击地图服务，可查看该服务的基本信息，如服务名称和服务地址。

6.查看<Contents>标签内容

点击“服务地址”链接，查找到<Contents>标签，可看到里面一些属性。

7.HTML内容

7.1 css和js文件

7.2 body内容

即：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>发布wmts服务</title>
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
</head>
<body>
<div id="cesiumContainer" style="width: 100%;height: 100%;float: left;"></div>
<script type="text/javascript">
	function onload(Cesium) {
            var viewer = new Cesium.Viewer('cesiumContainer');

            var matrixIds = [];//数组长度和瓦片数量相同
            for (var i = 0; i <6; i++) {
                matrixIds[i] = i;
            }

            var wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
                url: 'http://localhost:8090/iserver/services/map-ugcv5-daymap/wmts100',//服务地址
                layer: 'daymap',//图层名
                style: 'default',//风格
                format: 'image/png',//平台
                tileMatrixSetID: 'Custom_daymap',//选择Custom_daymap
                tileMatrixLabels: matrixIds,

                tilingScheme: new Cesium.GeographicTilingScheme({
                    numberOfLevelZeroTilesX: 2,
                    numberOfLevelZeroTilesY: 1
                }),
            });
            viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);

        }
</script>
</body>
</html>

Body中的内容对应的数据如下：

8.运行程序。

将HTML文件放在examples文件夹下

（D:\supermap-iserver-9.1.0a-win64-deploy\supermap-iserver-9.1.0a-win64-deploy\webapps\SuperMap_iClient3D_9D(2019)_for_WebGL_chs\examples），在IE浏览器中输入链接：

http://localhost:8090/SuperMap_iClient3D_9D(2019)_for_WebGL_chs/examples/XXX.html ，即可看到加载的地图，如：

注意：如果运行不成功，就试着替换一下web.xml文件：

用下面的web.xml文件替换路径：*\supermap-iserver-9.1.0a-win64-deploy\webapps\iserver\WEB-INF\web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
   version="3.0"> 
  <display-name>SuperMap iServer</display-name>
  <filter>
    <filter-name>iserver-services</filter-name> 
    <filter-class>com.supermap.server.host.webapp.ApplicationFilter</filter-class>
    <async-supported>true</async-supported>
  </filter>
  <filter-mapping>
    <filter-name>iserver-services</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <welcome-file-list>
    <welcome-file>index.htm</welcome-file>
  </welcome-file-list>
</web-app>

例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>发布wmts服务</title>
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
</head>
<body>
<div id="cesiumContainer" style="width: 100%;height: 100%;float: left;"></div>
<script type="text/javascript">
	function onload(Cesium) {
            var viewer = new Cesium.Viewer('cesiumContainer');

            var matrixIds = [];//数组长度和瓦片数量相同
            for (var i = 0; i <19; i++) {
                matrixIds[i] = i;
            }

            var wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
                url: 'http://119.3.254.201:8090/iserver/services/map-kaifaqv2/wmts100',//服务地址
                layer: 'kaifaqu',//图层名
                style: 'default',//风格
                format: 'image/png',//平台
                tileMatrixSetID: 'GoogleMapsCompatible_kaifaqu',//选择Custom_kaifaqu
                tileMatrixLabels: matrixIds,
                maximumLevel:18,

            });
            viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);

        }
</script>
</body>
</html>

输入地址：http://localhost:8090/SuperMap_iClient3D_9D(2019)_for_WebGL_chs/examples/2019_8_19Test.html

运行结果：