🗺️maptalks study

Appearance

目录

WMSTileLayer ​

WMSTileLayer是TileLayer的子类，本质就是通过用户配置一些WMS请求的一些参数，来构造瓦片请求地址

其比较简单，故在这里就不多细说了

WMSTileLayer怎样强制刷新? ​

由于业务的需要WMSTileLayer的数据可能是动态，业务里期望隔一段时间就去更新WMSTileLayerr的内容,这时就需要去强制刷新WMSTileLayer

js
wmsLayer.forceReload();

WARNING

这个方法会清空图层里缓存的所有图片资源，从新加载的，所以要慎用

怎样避免浏览器的缓存策略 ​

瓦片请求是简单的image get请求，因为浏览器缓存策略的问题，如果瓦片地址一样，会触发浏览器缓存策略, 导致前端并没有真实的再次去请求后台的瓦片,导致显示的瓦片还是上一次的请求的结果，这时就需要我们手动的绕过 浏览器缓存策略

通过给瓦片请求携带个随机参数以此使瓦片的每次请求地址不一样从而绕过浏览器缓存策略

js
const wmsTileLayer = new maptalks.WMSTileLayer("wms", {
    tileSystem: [1, -1, -180, 90],
    urlTemplate: "https://ahocevar.com/geoserver/wms",
    crs: "EPSG:4326",
    layers: "topp:states",
    styles: "",
    version: "1.3.0",
    format: "image/png",
    transparent: true,
    uppercase: true,
});
//generate tile url
wmsTileLayer.getTileUrl = function (x, y, z) {
    //replace with your own
    //e.g. return a url pointing to your sqlite database
    let url = maptalks.WMSTileLayer.prototype.getTileUrl.call(this, x, y, z);
    url += `&t=${new Date().getTime()}`;
    // console.log(url);
    return url;
};

WARNING

该方法无法利用浏览器的缓存策略的，每次都是重新加载同样的资源，用户体验会下降的，业务要要根据自己的图层是否需要 实时刷新来决定是否使用，不可滥用

This document is generated by mdpress