代码之家  ›  专栏  ›  技术社区  ›  leogoesger

使用除圆之外的其他形状设置地图框点的样式

  •  0
  • leogoesger  · 技术社区  · 7 年前

    目前我有一个地图框层,其中有许多点,显示时使用 circle 。是否有方法使用其他形状来定义层而不是圆?

    以下是我的资料:

    export const gaugeLayer = fromJS({
      id: 'gauges',
      source: 'gauges',
      type: 'circle',
      interactive: true,
      minzoom: 5,
      layout: {
        visibility: 'visible',
      },
      paint: {
        'circle-radius': {
          base: 3,
          stops: [[5, 3.5], [7, 4]],
        },
        'circle-stroke-color': '#fafafa',
        'circle-stroke-width': 1,
        'circle-color': {
          property: 'classId',
          stops: [
            [1, '#f9a825'], //yellow #f9a825
            [2, '#0D47A1'], //blue #1a237e
            [3, '#03a9f4'], //light blue
            [4, '#ff6f00'], //orange Winter storm
            [5, '#F44336'],
            [6, '#087f23'], //green
            [7, '#f06292'], //pink
            [8, '#7E57C2'],
            [9, '#C51162'],
          ],
        },
      },
    });
    

    我能用一下吗 diamond ?或者,使用不同形状的首选方法是什么?

    1 回复  |  直到 7 年前
        1
  •  0
  •   leogoesger    7 年前

    这不是一个简单的方法,但我已经找到了使用它的方法 symbol 而是这样做。但你需要先把SVG上传到你的地图上。一旦加载它们,如果文件是 svg 。有很多循环要跳过去。

    {
        id: source,
        source: source,
        type: 'symbol',
        interactive: true,
        layout: {
          'icon-image': {
            property: 'geoClassId',
            stops: [
              [1, `${source}-1`],
              [2, `${source}-2`],
              [3, `${source}-3`],
              [4, `${source}-4`],
              [5, `${source}-5`],
              [6, `${source}-6`],
            ],
          },
          'icon-allow-overlap': true,
          'symbol-avoid-edges': true,
          'text-field': {
            property: 'geoClassId',
            stops: [
              [1, `${source}-1`],
              [2, `${source}-2`],
              [3, `${source}-3`],
              [4, `${source}-4`],
              [5, `${source}-5`],
              [6, `${source}-6`],
            ],
          },
          'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
          'text-size': 8,
          'text-transform': 'uppercase',
          'text-letter-spacing': 0.05,
          'text-offset': [0, 1.3],
        },
        paint: {
          'text-color': '#ffffff',
        },
      }