【OpenLayers】加载 GeoServer 的 WMTS 或 TMS

网上能查到的都太旧了,2020年了,正确的做法应该是:

WMTS


              import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS';
              import WMTSCapabilities from 'ol/format/WMTSCapabilities';

              const namespace='xxx';
              const layername='xxx';
              var parser = new WMTSCapabilities();
              fetch("/geoserver/gwc/service/wmts?REQUEST=GetCapabilities")
                .then(response => response.text())
                .then(text => {
                  var result = parser.read(text);
                  var options = optionsFromCapabilities(result, {
                    layer: `${namespace}:${layername}`,
                    matrixSet: "EPSG:900913"
                  });
                  const lsadf = new TileLayer({
                    name: layername,
                    source: new WMTS(options)
                  });
                  map.addLayer(lsadf);
                });

TMS

              
              const namespace='xxx';
              const layername='xxx';
              const url = `/geoserver/gwc/service/tms/1.0.0/${namespace}:${layername}@EPSG:900913@png/{z}/{x}/{-y}.png`;
              //从/geoserver/gwc/service/tms/1.0.0可获取该地址
              const imgL = new TileLayer({
                name: layername,
                extent: [
                  12683762.740587706,
                  2634418.077883248,
                  12686202.690741098,
                  2635902.322841516
                ], //从geoserver- Tile Caching - Tile Layers - 编辑图层 - Tile Caching 获取的
                //用extent只有在该范围去获取瓦片,防止404错误
                source: new XYZ({
                  url: url
                  // 如果url获取的图片坐标是4326 ,则在此方法里转换坐标为3857
                  // tileUrlFunction: function(tileCoord) {}
                })
              });

 

OpenLayers是一个开源的JavaScript库,用于在Web上创建交互式地图应用程序。它支持加载各种地图图层,包括Geoserver图层。下面是使用OpenLayers加载Geoserver图层的一般步骤: 1. 引入OpenLayers库文件。你可以从OpenLayers官方网站下载最新版本的库文件,并将其引入到你的HTML文件中。 ```html <script src="path/to/openlayers.js"></script> ``` 2. 创建地图容器。在HTML文件中创建一个具有唯一ID的`<div>`元素,用于容纳地图。 ```html <div id="map"></div> ``` 3. 初始化地图对象。在JavaScript代码中,使用OpenLayers的`Map`类来创建一个地图对象,并指定地图容器的ID。 ```javascript var map = new ol.Map({ target: 'map' }); ``` 4. 创建Geoserver图层。使用OpenLayers的`TileLayer`类来创建一个Geoserver图层,并指定Geoserver的图层URL。 ```javascript var geoserverLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://your-geoserver-url.com/geoserver/wms', params: { 'LAYERS': 'your-layer-name' } }) }); ``` 5. 将Geoserver图层添加到地图中。使用`addLayer`方法将Geoserver图层添加到地图对象中。 ```javascript map.addLayer(geoserverLayer); ``` 6. 设置地图视图。使用`View`类来设置地图的中心点和缩放级别。 ```javascript var view = new ol.View({ center: ol.proj.fromLonLat([longitude, latitude]), zoom: 10 }); map.setView(view); ``` 以上是使用OpenLayers加载Geoserver图层的基本步骤。你可以根据自己的需求进行进一步的定制和配置。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值