【问题标题】:Add sentinel layer to leaflet map将哨兵图层添加到传单地图
【发布时间】:2020-05-13 20:02:11
【问题描述】:

这就是我如何定义我的 url 以获取 sentinel 的 wms 图像: 哨兵2:

"https://kade.si/cgi-bin/mapserv?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/jpeg&TRANSPARENT=true&LAYERS=Landsat-8&TILED=true&format=image%2Fvnd.jpeg-png&WIDTH=320&HEIGHT=320&CRS=EPSG%3A3857&STYLES=&MAP_RESOLUTION=112.5&BBOX={x}{y}{x}{y}",

我在定义如何获取 &BBOX={x}{y}{x}{y}

时遇到问题

在这张图片中我看到请求是成功的

[![在此处输入图片描述][1]][1]

但是当我复制请求 URL 时,我看到了这条消息:

<ServiceExceptionReport xmlns="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.3.0" xsi:schemaLocation="http://www.opengis.net/ogc http://schemas.opengis.net/wms/1.3.0/exceptions_1_3_0.xsd">
<ServiceException>
msWMSLoadGetMapParams(): WMS server error. Wrong number of arguments for BBOX.
</ServiceException>

如何设置正确的Bbox参数..

我读过那个bbox

地图范围的边界框。值为 minx,miny,maxx,maxy,以 SRS 为单位。

这也是有效的请求网址:

https://kade.si/cgi-bin/mapserv?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/jpeg&TRANSPARENT=true&LAYERS=Landsat-8&TILED=true&format=image%2Fvnd.jpeg-png&WIDTH=320&HEIGHT=320&CRS=EPSG%3A3857&STYLES=&MAP_RESOLUTION=112.5&BBOX=2861802.338996999%2C5390950.730896911%2C2866694.30880725%2C5395842.700707162

为什么bbox参数这么长的数字:BBOX=2861802.338996999%2C5390950.730896911%2C2866694.30880725%2C5395842.700707162

你能帮我在 bbox 参数中添加什么,以便传单获取正确的参数并查看图层...

【问题讨论】:

  • 你读过Leaflet WMS tutorial吗?
  • 是的,但是这个 bbox 参数我有同样的错误...
  • 在那个教程中,bbox 参数是怎么说的?
  • 你能给我建议如何链接以查看带有哨兵覆盖的地图....如果你能帮助我,非常感谢

标签: reactjs leaflet wms sentinel


【解决方案1】:

解决方案:

Javascript

// Declare map using EPSG3857 projection (default is also 3857, so just optionnal here) and set center
const center = [38, 20.472157];
const map = L.map('map', {
    crs: L.CRS.EPSG3857
}).setView(center, 4);

// Define wmsOptions for wmsLayer
const wmsOptions = {
    layers: 'Landsat-8',
    transparent: true,
    format: 'image/png'
}

// WMS Layer constructor
const wmsLayer = L.tileLayer.wms('https://kade.si/cgi-bin/mapserv', wmsOptions);

// add To the map
wmsLayer.addTo(map);

不要忘记为 div 地图设置高度:

样式 CSS:

<style>
    #map {
        height: 500px;
    }
</style>

HTML 元素:

<div id="map"></div>

在此处查看您的 WMS 示例:jsfiddle example

【讨论】:

  • 我如何在下拉菜单中添加类似选项,所以当您选择 Landsat 时,地图会发生变化
  • 这完全是另一个问题,与前一个问题无关。如果解决方案适用于特定用例,请开始新帖子。谢谢老哥
猜你喜欢
  • 1970-01-01
  • 2013-06-25
  • 1970-01-01
  • 2023-03-17
  • 1970-01-01
  • 2019-08-22
  • 2020-01-04
  • 1970-01-01
  • 2022-11-27
相关资源
最近更新 更多