@sakitam-gis/viz-maptalks

安装

npm i @sakitam-gis/viz-maptalks -S

pnpm i @sakitam-gis/viz-maptalks

使用

栅格掩膜图层

TIP: renderer 必须指定为 'gl', 或者不传；

已知问题：因为使用了模版测试，默认瓦片绘制的模版测试先关掉了，因为会产生冲突。

可以在普通图层调用，或者在 GroupGLLayer 中使用。

import { TileLayerGl, MaskType } from '@sakitam-gis/viz-maptalks';

const raster = new TileLayerGl('base', {
  urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
  // urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
  subdomains: ['a', 'b', 'c', 'd'],
  // renderer: 'with-clip',
  // debug: true,
  mask: {
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          properties: {},
          geometry: {
            coordinates: [
              [
                [94.9613473096262, 40.80408295567787],
                [90.57528878502734, 36.093077934629704],
                [85.86260888093528, 31.87771635137203],
                [91.46183252936169, 29.022281166980306],
                [98.88080386352476, 24.948755267284795],
                [102.2869982496502, 31.4010195128851],
                [108.77276564240935, 24.099750712234425],
                [114.37198929083422, 32.745273210990646],
                [120.11119353047098, 37.992313183021196],
                [109.05272682482985, 41.88993599991693],
                [95.1013279008381, 43.23022275509115],
                [94.9613473096262, 40.80408295567787],
              ],
            ],
            type: 'Polygon',
          },
        },
        {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'MultiPolygon',
            coordinates: [
              [
                [
                  [-47.900390625, -14.944784875088372],
                  [-51.591796875, -19.91138351415555],
                  [-41.11083984375, -21.309846141087192],
                  [-43.39599609375, -15.390135715305204],
                  [-47.900390625, -14.944784875088372],
                ],
                [
                  [-46.6259765625, -17.14079039331664],
                  [-47.548828125, -16.804541076383455],
                  [-46.23046874999999, -16.699340234594537],
                  [-45.3515625, -19.31114335506464],
                  [-46.6259765625, -17.14079039331664],
                ],
                [
                  [-44.40673828125, -18.375379094031825],
                  [-44.4287109375, -20.097206227083888],
                  [-42.9345703125, -18.979025953255267],
                  [-43.52783203125, -17.602139123350838],
                  [-44.40673828125, -18.375379094031825],
                ],
              ],
            ],
          },
        },
      ],
    },
    type: MaskType.inside, // 默认是 inside，即只显示范围内的
  },
});

const groupLayer = new GroupGLLayer('group', [rasterLight, raster]).addTo(map);

或者直接添加地图

map.addLayer(raster);