zoukankan      html  css  js  c++  java
  • GIS Experience (二):Cesium本地影像与地形服务发布

    @

    1 数据切片

    目前遥感影像及数字高程模型切片主要包括gdal和ctb两种方式,相应的开源工具包可以在Cesium交流群(QQ群:115883691)中下载到。最近在进行Cesium本地影像与地形服务发布时,发现一款软件Cesiumlab。Cesiumlab是一款专为Cesium开源数字地球平台打造的免费数据处理工具集。目前包含 地形数据处理、影像数据处理、点云数据处理、数据下载、建筑物矢量面处理、倾斜数据处理、三维场景(max,maya)处理、BIM数据(revit,ifc)处理等工具。同时提供一套java开发的数据服务器。形成从数据处理、服务发布、到代码集成的完整工具链。备注:Cesiumlab可以处理CGCS2000和WGS84坐标系数据,可借助ArcGIS实现。
    在这里插入图片描述

    1.1 影像处理

    在这里插入图片描述
    在这里插入图片描述

    1.2 地形处理

    在这里插入图片描述
    在这里插入图片描述

    2 Web应用服务器安装与配置

    2.1 Tomcat安装及配置

    1. Tomcat安装、配置与使用
    2. Tomcat安装及配置教程
    3. Tomcat解决跨域问题

    2.2 IIS安装及配置

    1. win7系统要怎样安装和配置信息服务(IIS)
    2. Win10 IIS Web服务器安装与配置
    3. CORS .net 跨域解决方案
    4. IIS配置支持跨域请求

    3 本地影像与地形服务发布

    Cesium本地影像与地形服务发布的文件目录如下图所示,image_tilesterrain_tiles分别为DOM切片数据和DEM切片数据。
    在这里插入图片描述
    test_Cesium.html源码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <!-- Use correct character set. -->
      <meta charset="utf-8">
      <!-- Tell IE to use the latest, best version. -->
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
      <title>Cesium本地影像与地形服务发布</title>
      <script src="Cesium-1.5.1/Build/Cesium/Cesium.js"></script>
      <link href="Cesium-1.5.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    </head>
    <body>
      <div id="cesiumContainer"></div>
      <script src="tiles.js"></script> 
    </body>
    </html>
    

    tiles.js源码如下:

    //加载天地图在线地图
    
    var tdtImagerLayerProvider = new Cesium.WebMapTileServiceImageryProvider({
        url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
        layer: "tdtBasicLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatibleg",
        show: true,
        credit: new Cesium.Credit("天地图全球影像服务"),
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        maximumLevel: 18
    });
    
    //加载本地影像数据
    /*
    var imageryProvider = new Cesium.UrlTemplateImageryProvider({
        url: "http://localhost:8888/image_tiles/{z}/{x}/{y}.png",
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        fileExtension: 'png',
        minimumLevel: 0,
        maximumLevel: 20
    });
    */
    //跨域操作-Cesiumlab影像服务
    /*
    var imageryProvider = new Cesium.UrlTemplateImageryProvider({
        url: 'http://localhost:9002/api/wmts/gettile/931e1757c93743199219badb10a2e0df/{z}/{x}/{y}',
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        minimumLevel: 0,
        maximumLevel: 20,
        credit: 'http://www.bjxbsj.cn',
    }, {
        show: true
    });
    */
    
    //加载本地地形数据
    
    var terrainLayer = new Cesium.CesiumTerrainProvider({
        url: "http://localhost:8888/terrain_tiles",
        // 请求照明
        requestVertexNormals: true,
        // 请求水波纹效果
        requestWaterMask: true
    });
    //查看器
    var viewer = new Cesium.Viewer('cesiumContainer', {
        //需要进行可视化的数据源集合
        imageryProvider: tdtImagerLayerProvider,
        terrainProvider: terrainLayer,
    });
    
    //新增测试图层
    var layers = viewer.scene.imageryLayers;
    var showTest = layers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
        url: "http://localhost:8888/image_tiles/{z}/{x}/{y}.png",
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        fileExtension: 'png',
        minimumLevel: 0,
        maximumLevel: 20
    }));
    
    //设置边界矩形框
    //设定矩形框左上及右下点的经纬度坐标
    var rectangle = new Cesium.Rectangle(Cesium.Math.toRadians(xx1), Cesium.Math.toRadians(yy1),
    Cesium.Math.toRadians(xx2), Cesium.Math.toRadians(yy1));
    
    //视图切换到指定区域
    viewer.scene.camera.flyTo({ destination: rectangle });
    

    web.config源码如下:

    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
        <directoryBrowse enabled="true" />
        <staticContent>
          <mimeMap fileExtension=".terrain" mimeType="application/vnd.quantized-mesh" />
          <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
            <httpProtocol>
                <customHeaders>
                    <add name="Access-Control-Allow-Headers" value="Content-Type, api_key, Authorization" />
                    <add name="Access-Control-Allow-Origin" value="*" />
                </customHeaders>
            </httpProtocol>
      </system.webServer>
      <system.web>
        <compilation debug="true" />
      </system.web>
    </configuration>
    

    4 参考资料

    1. CesiumLab地形处理成果在Tomcat和IIS上发布
    2. Cesium中地形数据的加载
    3. Cesium官方教程4--影像图层
    4. Cesium官方教程5--地形图层
    5. Cesium:局域网离线影像及瓦片影像地图加载
    6. Cesium加载几种离线和在线地图
    7. Cesium离线切片地图服务器搭建和代码实现
    行走的小柚子
  • 相关阅读:
    JavaScript没有块级作用域
    JavaScript数据类型
    接口
    Linux用户与组别的操作
    解决 macOS 下 SSH 空闲一段时间后自动断开
    Excel 系列一 之 账户类长数字打开不截断与完全显示
    怎样花两年时间去面试一个人
    北京大学硕士学位论文模板
    Mysql: 图解 inner join、left join、right join、full outer join、union、union all的区别
    刷 LeetCode 时再学习 Python 中引用
  • 原文地址:https://www.cnblogs.com/UncleLivin/p/11274836.html
Copyright © 2011-2022 走看看