将哨兵图层添加到传单地图 [英] Add sentinel layer to leaflet map
问题描述
这就是我如何定义我的 url 以获取 sentinel 的 wms 图像:哨兵2:
This is how i define my url for get wms image for sentinel: Sentinel2:
"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}
在这张图片中我看到请求是成功的
In this image i see that the request is successfull
[![在此处输入图片描述][1]][1]
[![enter image description here][1]][1]
但是当我复制请求 URL 时,我看到了这条消息:
But when i copu the request URL I see this message:
<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参数..
How to set the right Bbox parameteres..
我读过那个bbox
地图范围的边界框.值为 minx,miny,maxx,maxy,以 SRS 为单位.
Bounding box for map extent. Value is minx,miny,maxx,maxy in units of the SRS.
这也是有效的请求网址:
Also this is working request url:
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
Why bbox parameters are so long numbers:BBOX=2861802.338996999%2C5390950.730896911%2C2866694.30880725%2C5395842.700707162
你能帮我在 bbox 参数中添加什么,以便传单获取正确的参数并查看图层...
Can you help me what to add in the bbox parameter so leaflet to get the right parameters and to view the layer...
推荐答案
解决方案:
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 地图设置高度:
Don't forget to set a height to the div map :
样式 CSS:
<style>
#map {
height: 500px;
}
</style>
HTML 元素:
<div id="map"></div>
在此处查看您的 WMS 示例:jsfiddle 示例
See example with your WMS here: jsfiddle example
这篇关于将哨兵图层添加到传单地图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!