cesium加载上传至geoserver的tif矢量数据

最新推荐文章于 2024-03-27 14:26:00 发布
最新推荐文章于 2024-03-27 14:26:00 发布
阅读量4.4k 收藏 40
点赞数 7
分类专栏： GIS 文章标签： cesium geoserver tif javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43598687/article/details/124102651
版权

文章目录

geoserver

geoserver安装及跨域问题解决方案：https://blog.csdn.net/weixin_43598687/article/details/124005542

将TIF上传至geoserver

启动geoserver服务，并进入geoserver主页。
在这里插入图片描述

1. 新建工作区

  1. 点击工作区，再点击添加新的工作区。
    在这里插入图片描述
  2. 填入工作区名称以及命名空间URI，点击保存。
    在这里插入图片描述

2. 新建数据源

  1. 点击数据存储，再点击添加新的数据存储。
    在这里插入图片描述
  2. 选择GeoTIFF
    在这里插入图片描述
  3. 填入数据源信息
    在这里插入图片描述

3. 新建图层

  1. 点击图层，再点击添加新的资源。
    在这里插入图片描述
  2. 选择刚刚创建的数据源，点击发布
    在这里插入图片描述
  3. 设置相关信息
    在这里插入图片描述
    在这里插入图片描述
    点击Tile Caching
    在这里插入图片描述

4. 查看发布的tif

点击Layer Preview ，找到刚才新建的图层，点击OpenLayers。
在这里插入图片描述

即可预览，上传的tif。
在这里插入图片描述

Cesium

cesium官网：https://cesium.com/。

通过geoserver加载tif

直接上代码：

引入cesium并创建一个地球

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九寨沟影像可视化</title>
    <script src="../lib/Cesium/Cesium.js"></script>
    <link href="../lib/Cesium/Widgets/widgets.css" rel="stylesheet">


    <style>
        html,
        body{
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        //Viewer第一个参数容器就是需要上面的div容器承载
        var viewer = new Cesium.Viewer('cesiumContainer');
    </script>
</body>
</html>

在这里插入图片描述

新建一个图层

var provider = new Cesium.WebMapServiceImageryProvider({        //创建一个图层（geoserver中的tif）
            url:'http://localhost:8080/geoserver/test/wms',         // geoserver服务地址
            layers: 'test:img05',                                // 工作区名：图层名
              parameters: {
              service : 'WMS',
                  format: 'image/png',
                  srs: 'EPSG:4326',                                 // 坐标系
                  transparent: true,
              }

        });

在地图上显示

    <script>
        //Viewer第一个参数容器就是需要上面的div容器承载
        var viewer = new Cesium.Viewer('cesiumContainer');
        viewer.terrainProvider = Cesium.createWorldTerrain();       // 加入地形
        viewer.imageryLayers.remove(viewer.imageryLayers.get(0))        //去掉初始图层
        var provider = new Cesium.WebMapServiceImageryProvider({        //创建一个图层（geoserver中的tif）
            url:'http://localhost:8080/geoserver/test/wms',         // geoserver服务地址
            layers: 'test:img05',                                // 工作区名：图层名
              parameters: {
              service : 'WMS',
                  format: 'image/png',
                  srs: 'EPSG:4326',                                 // 坐标系
                  transparent: true,
              }

        });

        viewer.imageryLayers.addImageryProvider(provider); 
    </script>

这时会发现地球上仍然什么都没有，这是由于我们还没有设置相机的位置。
在这里插入图片描述

设置相机位置

viewer.camera.setView({
            destination:Cesium.Cartesian3.fromDegrees(104.14,33.16,200000.0),   // 经纬度和高度
        });

在这里插入图片描述
这样就看到了想要的效果。

HTML完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cesium Start</title>
    <script src="../lib/Cesium/Cesium.js"></script>
    <link href="../lib/Cesium/Widgets/widgets.css" rel="stylesheet">


    <style>
        html,
        body{
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        //Viewer第一个参数容器就是需要上面的div容器承载
        var viewer = new Cesium.Viewer('cesiumContainer');
        viewer.terrainProvider = Cesium.createWorldTerrain();       // 加入地形
        viewer.imageryLayers.remove(viewer.imageryLayers.get(0))        //去掉初始图层
        var provider = new Cesium.WebMapServiceImageryProvider({        //创建一个图层（geoserver中的tif）
            url:'http://localhost:8080/geoserver/test/wms',         // geoserver服务地址
            layers: 'test:img05',                                // 工作区名：图层名
              parameters: {
              service : 'WMS',
                  format: 'image/png',
                  srs: 'EPSG:4326',                                 // 坐标系
                  transparent: true,
              }

        });

        viewer.imageryLayers.addImageryProvider(provider); 

        viewer.camera.setView({
            destination:Cesium.Cartesian3.fromDegrees(104.14,33.16,200000.0),   // 经纬度和高度
        });
    </script>
</body>
</html>
1 + 1=王
关注
  • 7
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
专栏目录
Cesium 实战 10 - 两种方式加载 Geoserver 服务 WMTS 以及 WMS、WFS、KML 资源图层
linzi19900517的博客
10-23 7334
Cesium 两种方式加载 Geoserver服务 WMTS以及WMS、WFS、KML资源图层。
cesium 加载地形以及.tif格式转.terrain的方法
11-08
cesium 加载地形以及.tif格式转.terrain的方法，亲测。若有疑问请发邮件[email protected]询问
第四章 Cesium学习入门之加载离线影像图（tif）
Aliavlue的博客
02-16 3386
Cesium学习入门之加载离线影像图（tif）
cesium加载.tif格式文件
最新发布
阿狸狸阿狸狸呀的博客
03-27 1417
cesium直接加载后缀名tif格式的文件
cesium直接加载TIFF地图影像
A_ta_and_run的博客
11-14 1513
遇到了一个需求： 就是用cesium加载TIFF影像，本来主流的方式是后台切片发布服务，前端直接调用服务加载就行，但是 后台直接给了我一个tif文件，就需要前端来进行绘图渲染了。
cesium加载mvt 矢量瓦片
03-06
详细说明：https://blog.csdn.net/caozl1132/article/details/88106984
GeoServer搭建私有地图服务，Cesium引擎加载。
qq_41400354的博客
01-05 2096
Cesium,GeoServer.解决地图变形，设置加载范围。TMS,WMS,WMTS
geoserver发布TIF格式瓦片地图
热门推荐
~~
09-07 1万+
一，准备tif地图 可以通过全能电子地图下载器获取地图（软件可以去淘宝下载） 二，geoserver发布tif 在geoserver安装文件夹中双击“startup.bat”打开服务（注意：为了防止端口占用，我这里更改了默认的端口为8090，在startup.bat文件的最后一行中可以看到） 然后访问：http://localhost:8090/geoserver 新建工作区，名为test 新建数据存储 发布图层 切片 可以看到当前文件夹中就有切片文件了
下载地形、矢量图层、卫星影像到本地并geoserver发布为服务，后使用Cesium加载
cky_123的博客
02-18 3694
地形、矢量、遥感影像的下载、本地发布与用cesium加载
关于cesium中tif文件处理加载在三维地图中得方式
猪猪侠的博客
08-23 1859
tif文件前台处理
从零开始学GeoServer源码九（如何集成Cesium以实现预览3dtiles和terrain服务？）
xiangshangdemayi的博客
05-24 2689
这里写目录标题1.前言2.思路3.准备一个预览页面4.在静态页面准备一个a标签跳转并传值5.完善静态页面5.1 获取要预览服务的唯一编号previewId5.2 准备加载3dtiles和terrain的函数5.3 发ajax获取服务的url6. 补全预览页面需要的Cesium依赖7.看看预览时的效果8.总结 1.前言   在第七篇中我们讲了如何使用 GeoServer 发布 3dtiles 和 terrain 文件，在那一篇中，我们最终实现了发布功能，但预览功能还是需要在 Cesium 的工程里去手动添加预
Cesium加载Geoserver跨域问题
10-15
https://blog.csdn.net/qq_40216244/article/details/109046931 ceslium加载Geoserver跨域问题方法步骤，真实有效。
Cesium加载OSGB倾斜摄影数据Demo
06-01
Cesium加载OSGB倾斜摄影数据Demo，内附由OSGB倾斜摄影数据转换的Cesium3DTile数据，可直接运行。另：原始的OSGB倾斜摄影数据以及转换工具也可以由本人提供的资源进行下载。
测试数据tif格式可生成cesium地形（外国网站下载）
11-09
外网下载的深圳片区tif格式数据（srtm）可用工具生成cesium terrain数据
cesium加载WFS服务(GeoServer发布)-附件资源
03-05
cesium加载WFS服务(GeoServer发布)-附件资源
GeoServer发布服务+跨域及401问题+Cesium调用WMS/WFS服务
Dani05的博客
03-27 3924
目录 GeoServer发布WFS服务 解决跨域问题 cesium请求服务 GeoServerWFS服务 1.打开开始菜单，找到安装的GeoServer文件夹，点击StartGeoServer开启服务，出现下图说明启动成功。 2.点击开始菜单中GeoServer Web Admin Page，或浏览器手动输入localhost:自己设置的端口号/geoserver/web，登录自己的账号。 ​ 3. 新建一个工作区。工作区->>添加新的工作区->>填写工...
cesium 直接加载 geotiff 影像图
细雨纷飞~~~
01-03 4462
前言 最近碰到了一个需求，需要通过 cesium 直接加载 geotiff 影像图。 咋一听，这个需求好像蛮奇怪，cesium 本身本来就支持加载 tile 影像图，也就是所谓的切片地图。原理其实就是，通过 geoserver 等工具，按照一定的规则和坐标系规则，切好对应的切片。 而 cesium 里面，加载瓦片地图也很简单，想要显示哪个区域的地图，就根据对应的规则，去 geoserver 里请求对应的切片。这些逻辑在 cesium 里面，也已经封装好了，直接调用就好了。 但是如果不想发布到 geos
【一览无余】Vue框架下Cesium加载遥感地图使用GeoServer切割TIF大文件对外发布WMS服务进行地图绘制（科普篇2/2）
追寻上飞的博客
05-09 1975
GeoServer是一个开源的地理信息系统（GIS）服务器，它提供了一个标准的、可扩展的平台，用于发布和共享地理空间数据和服务。GeoServer支持各种标准的地理空间数据格式和协议，如WMS、WFS、WCS、KML、GML等，可以运行在各种操作系统上，并且提供了一个Web管理界面，使用户可以轻松地配置和管理GeoServer。它可以表示地图、地形、建筑、道路、河流、气象数据等各种地理信息，支持多种地理坐标系和地理要素类型。它提供了一系列的工具和服务，包括3D数据处理、地图制作、数据集成、分析和可视化等。
geoserver发布wms、wmts服务及cesium加载
pigs_dream的博客
01-04 2381
geoserver cesium
cesium加载矢量数据
08-24
您可以使用Cesium的CZML（Cesium Language）格式或GeoJSON格式来加载矢量数据。 首先，如果您有CZML格式的矢量数据，您可以在Cesium中使用`CzmlDataSource`来加载它。下面是一个使用CZML加载矢量数据的示例代码： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var dataSource = new Cesium.CzmlDataSource(); viewer.dataSources.add(dataSource); // 加载CZML文件 dataSource.load('path/to/your.czml').then(function() { // 缩放到适合数据的范围 viewer.zoomTo(dataSource); }); ``` 如果您有GeoJSON格式的矢量数据，您可以使用`GeoJsonDataSource`来加载它。下面是一个使用GeoJSON加载矢量数据的示例代码： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var dataSource = new Cesium.GeoJsonDataSource(); viewer.dataSources.add(dataSource); // 加载GeoJSON文件 dataSource.load('path/to/your.geojson').then(function() { // 缩放到适合数据的范围 viewer.zoomTo(dataSource); }); ``` 您可以将上述代码中的`cesiumContainer`替换为您HTML页面中Cesium容器的ID，并将`path/to/your.czml`或`path/to/your.geojson`替换为您实际的文件路径。 希望这可以帮助到您！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1 + 1=王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值