使用mapbox gl js和https://github.com/Wykks/ngx-mapbox-gl发行SVG渲染

时间:2019-12-16 18:11:19

标签: mapbox-gl-js mapbox-gl

我们在Angular应用程序-https://github.com/Wykks/ngx-mapbox-gl中使用了mapbox gl js

这就是我们正在渲染的方式-我相信问题出在布局代码中-有人遇到过类似的问题吗?某些SVG的渲染效果很好,但其他SVG的渲染图却没有在相同结构的地图上显示?

我们可以在Illustrator中打开一些文件并进行修改,但不一致-

<div>
  <mgl-geojson-source id="pointSource" [data]="pointsGeoJson">
  </mgl-geojson-source>
  <mgl-layer
    id="pointLayer"
    type="symbol"
    source="pointSource"
    (click)="onClick($event)"
    [layout]="{
      'icon-size': 0.5,
      'icon-image': [
        'case',
        [
          'any',
          [
            '==',
            ['get', 'styleType', ['object', ['get', 'styleObject']]],
            'logo'
          ]
        ],
        ['get', 'lastLogoId', ['object', ['get', 'styleObject']]],
        [
          'concat',
          ['get', 'lastIconId', ['object', ['get', 'styleObject']]],
          '_',
          ['get', 'imageColor', ['object', ['get', 'styleObject']]]
        ]  
    ],
      'text-field': ['get',
        [
        'case',
        [
          'any',
          [
            '==',
            ['get', 'type', ['object', ['get', 'styleObject']]],
            'individual'
          ],
          [
            '==',
            ['get', 'type', ['object', ['get', 'styleObject']]],
            'icon'
          ]
        ],
        'label',
        'order'
      ],
        ['object', ['get', 'attributes']]],
      'text-font': ['Arial Unicode MS Bold'],
      'text-size': [
        'case',
        [
          'any',
          ['==',
          ['get', 'lastIconId', ['object', ['get', 'styleObject']]],
          'defaultSymbol'],
          ['==',
          ['get', 'lastIconId', ['object', ['get', 'styleObject']]],
          'emptyIcon']
        ],
        14,
        0
      ],
      'icon-allow-overlap': true,
      'text-allow-overlap': true
    }"
    [paint]="{
      'text-color': '#ffffff',
      'icon-color': ['get', 'imageColor', ['object', ['get', 'styleObject']]],
      'icon-opacity': [
        'case',
        ['boolean', ['feature-state', 'hover'], false],
       0.6,
        1
      ]
    }"
  >
  </mgl-layer>
  <app-point-popup
    [selectedPoint]="selectedPoint"
    [mapID]="mapID"
    [masterLogoArray]="masterLogoArray"
  ></app-point-popup>
</div>

0 个答案:

没有答案