leaflet加载geosever发布的多种地图服务

流氓也是种气质 _Cookie

已于 2024-10-18 11:40:10 修改

阅读量900

点赞数

分类专栏： leaflet 文章标签： javascript leaflet

于 2021-10-11 15:34:59 首次发布

本文链接：https://blog.csdn.net/qq_37550440/article/details/120703873

版权

leaflet 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

1 加载wms服务

L.tileLayer.wms("localhost:8096/......?service=WMS", {
      layers: 'name', //需要加载的图层名
      format: "image/png",
      transparent: true,
      //crs: L.CRS.EPSG4326

  }).addTo(map);

2 加载tms服务

const url = 'xx/jbgisTiles/zcq_tdtsl_tiles/tiles/{z}/{x}/{y}.png' //类似这样的tms服务地址
L.tileLayer(url,{
minZoom:1,
maxZoom:18, 
reuseTiles: true, 
tms:true} //这个参数很关键
).addTo(mymap);

3.加载瓦片


    L.ATileLayer = L.TileLayer.extend({
      getTileUrl: function (tilePoint) {
        var oo = "00000000"
        var xx = tilePoint.x.toString(16);
        xx = "C" + oo.substring(0, 8 - xx.length) + xx;
        var yy = (tilePoint.y).toString(16);//这里减去偏移值
        yy = "R" + oo.substring(0, 8 - yy.length) + yy;
        return L.Util.template(this._url, L.extend({
          s: this._getSubdomain(tilePoint),
          //z: "L" + (tilePoint.z+1),
          z: "L" + (tilePoint.z + 1).toString().padStart(2, '0'),
          x: xx,
          y: yy
        }, this.options));
      }
    });
    new L.ATileLayer("http://120.78.84.109:8089/jlpTiles/cqzcqdx_cqzcqdx/Layers/_alllayers/{z}/{y}/{x}.png").addTo(mymap);

4.图层遮罩层

这是对服务数据是有要求的！

不可行的地图服务：（其余空间为空白）

可行的地图服务：

实现效果图：

代码块：

function initJLPMarskLayer() {
  const labe200 = params.gisMap.createPane('labe200');
  labe200.style.zIndex = 200;

  let JLPMarkerLayer = L.geoJSON(jlp_gxq_mask, {
    id: "jiulongpo",
    style: function (e) {
      return {
        /*  fillRule: 'evenodd',
         fill: true, */
        fillOpacity: .7,
        color: 'rgb(4,54,129)',
        fillColor: 'rgb(4,54,129)',
        weight: 3,
        opacity: .7,
        pane: 'labe200',
      };
    }
  }).addTo(params.gisMap)
}