ExtrudePolygonLayer配合TileLayer设置mask,添加PointLayer到GroupGLLayer，PointLayer始终在TileLayer下方

[WayneSmithWu]

https://codepen.io/wayneSmithWu/pen/JjQBYQG

[sunmy1011h]

这样可以 感觉是zindex设置的原因 ExtrudePolygonLayer需要加到gllayer里面，设置mask的tile zindex需要在gllayer的上面而且设置mask后只能放到map里面 pointlayer也需要在 tile 上面 就得在加一个gllayer ExtrudePolygonLayer和point不能在同一个gllayer里面 第一个gl只放ExtrudePolygonLayer 其它的数据放第二低gl里面设置层级高一些 因为中间需要mask的tile 我的理解时这样的 可以参考一下

const map = new maptalks.Map("map", {
  center: [116.19278924574726, 39.908792633418884],
  zoom: 10,
  pitch: 63,
  lights: {
    directional: {
      direction: [1, 0, -1],
      color: [1, 1, 1]
    }
  },
  baseLayer: new maptalks.TileLayer("base", {
    altitude: -300,
    urlTemplate: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
    subdomains: ["a", "b", "c", "d"],
    attribution:
      "&copy; <a href='http://osm.org'>OpenStreetMap</a> contributors, &copy; <a href='https://carto.com/'>CARTO</a>"
  })
});
const mask = new maptalks.Polygon(boundry[0], {
  symbol: [
    {
      lineColor: "#ccc",
      lineWidth: 8,
      polygonFillOpacity: 0
    },
    {
      lineColor: "#404040",
      lineWidth: 6,
      polygonFillOpacity: 0
    }
  ]
});
console.log(2222, boundry);

const polygon = new maptalks.Polygon(boundry[0], {
  symbol: {
    topPolygonFill: "#0B4F9B",
    bottomPolygonFill: "#061A56"
  },
  properties: {
    height: -300
  }
});
const dataConfig = {
  type: "3d-extrusion",
  altitudeProperty: "height",
  altitudeScale: 1,
  defaultAltitude: 0,
  top: false,
  side: true
};
const material = {
  baseColorFactor: [1, 1, 1, 1],
  emissiveFactor: [1, 1, 1],
  roughnessFactor: 0,
  metalnessFactor: 0,
  outputSRGB: 0,
  uvScale: [0.001, 0.0013]
};
const marker = new maptalks.Marker(
  [116.19278924574726, 39.908792633418884, 400],
  {
    symbol: {
      textFaceName: "sans-serif",
      textName: "MapTalks",
      textFill: "#22be9e",
      textSize: 40
    },
    properties: {
      height: 300
    }
  }
);
const pointLayer = new maptalks.PointLayer("point", [marker], {
  sceneConfig: { collision: false}
});
const layer = new maptalks.ExtrudePolygonLayer("vector", polygon, {
  dataConfig,
  material,
  geometryEvents: false
});
layer.setZIndex(5)
const groupLayer = new maptalks.GroupGLLayer("group", [
  layer
],{
   single:false,
});
groupLayer.setZIndex(6)
map.addLayer(groupLayer)

const maskedLayer = new maptalks.TileLayer("masked", {
  zIndex: 1,
  urlTemplate: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
  subdomains: ["a", "b", "c", "d"],
  attribution:
    "&copy; <a href='http://osm.org'>OpenStreetMap</a> contributors, &copy; <a href='https://carto.com/'>CARTO</a>"
})
  .setMask(mask) // set boundary as the mask to the tilelayer
  .addTo(map);
maskedLayer.setZIndex(7)
map.addLayer(maskedLayer)

const groupLayer1 = new maptalks.GroupGLLayer("group1", [
  pointLayer
],{
   single:false,
});
groupLayer1.setZIndex(8)
map.addLayer(groupLayer1)

[fuzhenn]

确实是楼上说的原因造成的，代码也的确是个解决方案，不过这个问题主要和 #498 有关，GroupGLLayer里的TileLayer不支持Mask导致的，等TileLayer支持Mask后即可。