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

妖狐艹你老母 2021-09-30 03:38 501阅读 0赞

**目录**

1.加载影像数据

2.切图

3.打开iserver服务器

4.发布成wmts服务

5.查看地图服务

6.查看标签内容

7.HTML内容

7.1 css和js文件

7.2 body内容

8.运行程序。

--------------------

# 1.加载影像数据 #

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

# 2.切图 #

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

# 3.打开iserver服务器 #

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

# 4.发布成wmts服务 #

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

# 5.查看地图服务 #

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

# 6.查看<Contents>标签内容 #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

# 7.HTML内容 #

## 7.1 css和js文件 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

## 7.2 body内容 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 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 <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中的内容对应的数据如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

# 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][http_localhost_8090_SuperMap_iClient3D_9D_2019_for_WebGL_chs_examples_XXX.html]  ，即可看到加载的地图，如：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]

注意：如果运行不成功，就试着替换一下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：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]

<!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][http_localhost_8090_SuperMap_iClient3D_9D_2019_for_WebGL_chs_examples_2019_8_19Test.html]

运行结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7][]

[http_localhost_8090_iserver_manager]: http://localhost:8090/iserver/manager
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/4c139861e81f4907bfa1798d5bcad45d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/de8944e6322b4750afd025f6c184bfa0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/e555e7debbd34d77ad53a1eebc288072.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/82c8e40833a14fd0a85b4ea441548532.png
[http_localhost_8090_SuperMap_iClient3D_9D_2019_for_WebGL_chs_examples_XXX.html]: http://localhost:8090/SuperMap_iClient3D_9D%282019%29_for_WebGL_chs/examples/XXX.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: /images/20210725/1fc45aa9035f45679ee445a3cf290943.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: /images/20210725/83c122ec0bf24ff98582ff99c7ddf55f.png
[http_localhost_8090_SuperMap_iClient3D_9D_2019_for_WebGL_chs_examples_2019_8_19Test.html]: http://localhost:8090/SuperMap_iClient3D_9D%282019%29_for_WebGL_chs/examples/2019_8_19Test.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20190819200255629.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7]: /images/20210725/b6fdb20734154e8d83a7a6770975d4f1.png