倾斜摄影数据从发布到前端调用

最新推荐文章于 2023-09-19 19:13:05 发布
最新推荐文章于 2023-09-19 19:13:05 发布
阅读量2.1k 收藏 13
点赞数
分类专栏： JS 三维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gislaozhang/article/details/108361540
版权
JS 同时被 2 个专栏收录
18 篇文章 3 订阅
订阅专栏
三维
10 篇文章 8 订阅
订阅专栏

本篇博客记录如何将osgb转为slpk并将其发成场景服务以及前端调用。

示例数据：

链接：https://pan.baidu.com/s/1bLOBKxNBIiqEHGD-62LiGw 
提取码：enbz

1、osgb转为slpk

其中：

这三个工具任意一个都支持坐标转换，例如：utm（32651）转为4326等。

2、发布场景服务

如果slpk不超过1g，可以直接在portal或者arcgisonline将本地的slpk进行加载和发布成场景服务

如果超过1g，可以使用arcgispro自带的share package（分享包）工具将其共享到portal或者arcgisonline。

3、前端调用倾斜摄影的场景服务

前端支持加载4326、3857和4490空间参考的倾斜摄影的场景服务；

如果是自定义坐标系，可以参考这个博客在前端调用自定义坐标系的三维场景服务，链接：http://zhihu.geoscene.cn/article/4030

 如果是4326或者3857的，可以参照下述代码，能够成功的在前端加载4326或者3857的场景服务，同时可以显示在线底图。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>IntegratedMeshLayer - 4.15</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.15/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      #menu {
        padding: 1em;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/IntegratedMeshLayer"
      ], function (Map, SceneView, IntegratedMeshLayer) {
       
        const layer = new IntegratedMeshLayer({
          url:
            "https://zjq161.esrichina.com/server/rest/services/Hosted/lixiannian/SceneServer"
        });

        var map = new Map({
          basemap: "satellite",
          ground: "world-elevation",
          layers: [layer]
        });

        const view = new SceneView({
          container: "viewDiv",
          map: map
        });
        view.goTo({
          center: [114.515214, 31.1510916],
          heading: 10,
          zoom: 19,
          tilt: 45
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

如果是4490的场景服务，并且也需要在线底图的话，需要加载4490的在线底图才行，要不然只能加载显示4490的场景服务，底图不显示。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>IntegratedMeshLayer - 4.16</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      #menu {
        padding: 1em;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/IntegratedMeshLayer"
      ], function (Map, SceneView, IntegratedMeshLayer) {
       
        const layer = new IntegratedMeshLayer({
          url:
            "https://zjq161.esrichina.com/server/rest/services/Hosted/lxn4490/SceneServer"
        });

        var map = new Map({
      
          ground: "world-elevation",
          layers: [layer]
        });

        const view = new SceneView({
          container: "viewDiv",
          map: map
        });
        view.goTo({
          center: [114.515214, 31.1510916],
          heading: 10,
          zoom: 19,
          tilt: 45
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

当倾斜摄影的场景服务和在线底图的空间参考都是4490时，底图才能显示。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>IntegratedMeshLayer - 4.16</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      #menu {
        padding: 1em;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/WebTileLayer",
            "esri/layers/support/TileInfo",
        "esri/layers/IntegratedMeshLayer"
      ], function (Map, SceneView, WebTileLayer, TileInfo, IntegratedMeshLayer) {
        
        var tileInfo = new TileInfo({
                dpi: 90.71428571427429,
                rows: 256,
                cols: 256,
                compressionQuality: 0,
                origin: {
                    x: -180,
                    y: 90
                },
                spatialReference: {
                    wkid: 4490
                },
                lods: [
                    { level: 0, levelValue: 1, resolution: 0.703125, scale: 295497593.05875003 },
                    { level: 1, levelValue: 2, resolution: 0.3515625, scale: 147748796.52937502 },
                    { level: 2, levelValue: 3, resolution: 0.17578125, scale: 73874398.264687508 },
                    { level: 3, levelValue: 4, resolution: 0.087890625, scale: 36937199.132343754 },
                    { level: 4, levelValue: 5, resolution: 0.0439453125, scale: 18468599.566171877 },
                    { level: 5, levelValue: 6, resolution: 0.02197265625, scale: 9234299.7830859385 },
                    { level: 6, levelValue: 7, resolution: 0.010986328125, scale: 4617149.8915429693 },
                    { level: 7, levelValue: 8, resolution: 0.0054931640625, scale: 2308574.9457714846 },
                    { level: 8, levelValue: 9, resolution: 0.00274658203125, scale: 1154287.4728857423 },
                    { level: 9, levelValue: 10, resolution: 0.001373291015625, scale: 577143.73644287116 },
                    { level: 10, levelValue: 11, resolution: 0.0006866455078125, scale: 288571.86822143558 },
                    { level: 11, levelValue: 12, resolution: 0.00034332275390625, scale: 144285.93411071779 },
                    { level: 12, levelValue: 13, resolution: 0.000171661376953125, scale: 72142.967055358895 },
                    { level: 13, levelValue: 14, resolution: 8.58306884765625e-005, scale: 36071.483527679447 },
                    { level: 14, levelValue: 15, resolution: 4.291534423828125e-005, scale: 18035.741763839724 },
                    { level: 15, levelValue: 16, resolution: 2.1457672119140625e-005, scale: 9017.8708819198619 },
                    { level: 16, levelValue: 17, resolution: 1.0728836059570313e-005, scale: 4508.9354409599309 },
                    { level: 17, levelValue: 18, resolution: 5.3644180297851563e-006, scale: 2254.4677204799655 },
                    { level: 18, levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },
                    { level: 19, levelValue: 20, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 }
                ]
            });
            var tdtUrl = "http://{subDomain}.tianditu.com/vec_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=ac0daf56728bbb77d9514ba3df69bcd3"
            //此处天地图的坐标系为CGCS2000
            var tiledLayer = new WebTileLayer(tdtUrl, {
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                tileInfo: tileInfo,
                spatialReference: { wkid: 4490 },//重点在这一句,如果不指定,那么默认为102100,在前端就会报坐标系的错误
                fullExtent: {
                    xmin: -180,
                    ymin: -90,
                    xmax: 180,
                    ymax: 90,
                    spatialReference: 4490
                }
            });
        
        const layer = new IntegratedMeshLayer({
          url:
            "https://zjq161.esrichina.com/server/rest/services/Hosted/lxn4490/SceneServer"
        });

        var map = new Map({
           basemap: {
                    baseLayers: [tiledLayer]
                },
          ground: "world-elevation",
          layers: [layer]
        });

        const view = new SceneView({
          container: "viewDiv",
          map: map
        });
        view.goTo({
          center: [114.515214, 31.1510916],
          heading: 10,
          zoom: 19,
          tilt: 45
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

参考资料：

https://blog.csdn.net/weixin_44616652/article/details/107532608

https://developers.arcgis.com/javascript/latest/sample-code/layers-integratedmeshlayer/index.html

 

更多gis方面的内容，请关注微信公众号:gislaozhang

 

gislaozhang
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
地图之家总目录
GIS之家家长
02-28 1万+
地图之家总目录 cesium示例 leaflet示例
python 调用API接口 获取和解析 Json数据
12-17
调用API接口数据，抽取我们所需类型的数据，并写入指定mysql数据库。 先从宏观上看这个任务，并对任务进行分解： step1：需要学习python下的通过url读取数据的方式； step2：数据解析，也是核心部分，数据格式从...
cesium-3d-tile/倾斜摄影超大场景（14GB）
05-13
超大倾斜摄影模型,由倾斜摄影osgb转换的3Dtiles格式，cesium可直接使用，亲测可用，模型为国内某一个景区摄影，高精度，范围广。
ArcGIS（ArcMap）中添加在线地图（天地图、影像图、街道图等）无需插件
热门推荐
qq_27816785的博客
09-17 6万+
🔥🔥🔥ArcGIS作为最强大的地理数据处理、编辑、制图和地图服务发布、管理等的GIS平台，在不同的专业都可以看到它的身影。对于那些利用GIS信息进行编辑，设计的专业人士来说，其桌面端ArcMap备受欢迎。但是非GIS专业人员上手时候可能有些困难，需要一些小白级的简单教程。
cesuim加载倾斜摄影OSGB三维数据完整过程（超详细）
四域公子的博客
01-22 5万+
1、得到正确原始.osgb格式数据； （1）倾斜摄影数据仅支持 smart3d 格式的 osgb 组织方式， 数据目录必须有一个 “Data” 目录的总入口， “Data” 目录同级放置一个 metadata.xml 文件用来记录模型的位置信息。 （2）每个瓦片目录下，必须有个和目录名同名的 osgb 文件，否则无法识别根节点。 （3）正确的目录结构如下： –metadata.xml –Data\...
GeoScene Pro 发布Web图层及调用方式
z小迪迪的博客
10-28 3682
一、建立所要发布的图层 在GeoSence Pro中将所要发布的图层添加到地图上，（注意：图层的坐标系和地图的坐标系要保持一致） 二、发布Web图层 1.操作过程 在工具栏中依次点击 共享 -> Web图层 -> 发布Web图层。在右侧菜单栏里填写名称（推荐使用英文）、摘要、标签。数据和图层类型，这里根据需求选择复制所有数据下的要素、切片、地图影像以及矢量切片（此处以要素为例）。位置，选择自己门户或者Server下的文件夹。共享给，根据自己需求进行选择。因为这里只是发布一个简单的图层服务所以不需
GeoScene Pro 2.1下载地址与安装基本要求
徐永赛的博客
08-09 7073
GeoScene Pro 2.1下载地址与安装基本要求
osgb-slpk-master.zip
04-17
osgb-slpk-master.zip
Cesium开发及离线加载倾斜摄影
Andy-ZhangSir的博客
07-31 2720
前言     前段时间接手了一个任务，让我研究一下开源的地图引擎，可以加载倾斜摄影数据，展示3D效果，实现地图应该有的大部分功能~好吧，我听到时真是一头雾水。WTF?地图引擎？3D模型？倾斜摄影？这都是什么鬼…但是没办法，既然已经安排下来了就得去做，然后我就开始了疯狂的百度之旅。     以下记录一下在这次旅途中发现的优质文档和我自己觉得应该记录下来的笔记，以备下次查阅。 一、cesium 在众多的开源地图中，我最终选择了Ces
GeoScene工具箱
洛山图的专栏
10-22 282
工具集
【保姆级】Geoserver 发布影像
aqin1012的博客
09-13 1396
创建工作区 name：自己起个名字 命名空间URI：一般 【域名/IP地址 + name】 点击提交后，可以在工作区中搜索到刚刚新建的工作区 添加数据 根据不同的文件类型选择要上传的数据 下面拿tif举例 工作区：选择文件要上传的工作区（这里选择刚刚新建的test） 数据源名称：给上传的文件起个名字 说明：数据源说明（可不填） URL：选择上传的文件 点击浏览，会弹出下面这个： 保存后发布 设置发布参数（这里都默认） 设置完后，单击保存
前端调用麦克风获取实时音频流和录音并上传至后台
05-11
文件分为两个，一个是实时获取音频流的文件，另一个是录音并上传至后台的文件，建议都在服务器环境下打开，这两天从网上整理的，希望对大家有所启发。
前端调用麦克风实现开启语音，录制语音功能
11-26
前端调用麦克风实现开启语音，录制语音功能，前端调用麦克风实现开启语音，录制语音功能，前端调用麦克风实现开启语音，录制语音功能
java调用远程接口传输数据的demo
07-15
java调用远程接口传输数据的demo
通过前端Jquery调用web Socket连接，并返回数据Demo
07-06
通过前端Jquery调用Web Socket服务连接，并返回数据，记得在websocket.demo.js中修改你自己的websocket连接
ArcGIS中加载各种在线地图
qq_43173805的博客
10-22 1万+
ArcGIS中加载各种在线地图
Arcgis在线地图资源
拾光、的样子
09-13 572
在线地图url资源
Geoscene Enterprise2.1 windows环境下的安装部署
xinyu的记录博客
10-14 3593
Geoscene Enterprise2.1 windows环境下的安装部署
个人记录：arcgis加载在线地图
weixin_61235989的博客
09-19 110
GeoScene Enterprise (geosceneonline.cn)
cesium倾斜摄影数据
最新发布
10-18
倾斜摄影数据是指通过倾斜...在Cesium中加载倾斜摄影数据需要使用Cesium3DTileset对象，通过指定倾斜摄影数据的url来加载数据，然后调用相应的方法进行展示和调整。具体的加载和调整方法可以参考引用中提供的示例代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值