Question

在下面的代码中，您将找到由Mapbox中映射的3个多边形组成的Multipolygon。

我想用不同的网络颜色填充3个多边形。我该怎么办？

如果我使用具有1种颜色的属性填充，那么显然它会用相同的颜色绘制3个多边形。

我试图将3个元素的列表传递给'fill-color'属性，但它抛出了错误。

一个简单的解决方案是创建3个不同的层，但是在我看来，这是不可行的。需要使用多面体

有什么主意吗？

threeHouses = {
    "type": "MultiPolygon",
    "coordinates": [
    [
      [
        [
          115.813867,
          -31.932177
        ],
        [
          115.813867,
          -31.932177
        ],
        [
          115.813867,
          -31.932087
        ],
        [
          115.813962,
          -31.932087
        ],
        [
          115.813962,
          -31.932124
        ],
        [
          115.814005,
          -31.932124
        ],
        [
          115.814005,
          -31.932168
        ],
        [
          115.813962,
          -31.932168
        ],
        [
          115.813962,
          -31.932177
        ],
        [
          115.813867,
          -31.932177
        ]
      ]
    ], [
      [
        [
          115.813962,
          -31.932087
        ],
        [
          115.813894,
          -31.932087
        ],
        [
          115.813894,
          -31.932042
        ],
        [
          115.81391,
          -31.932042
        ],
        [
          115.81391,
          -31.931967
        ],
        [
          115.813984,
          -31.931967
        ],
        [
          115.813984,
          -31.932042
        ],
        [
          115.81401,
          -31.932042
        ],
        [
          115.81401,
          -31.932087
        ],
        [
          115.813962,
          -31.932087
        ]
      ]
    ], [
      [
        [
          115.81391,
          -31.931967
        ],
        [
          115.81391,
          -31.931931
        ],
        [
          115.813849,
          -31.931931
        ],
        [
          115.813849,
          -31.9319
        ],
        [
          115.81386,
          -31.9319
        ],
        [
          115.81386,
          -31.931868
        ],
        [
          115.813984,
          -31.931868
        ],
        [
          115.813984,
          -31.931967
        ],
        [
          115.81391,
          -31.931967
        ]
      ]
     ]
     ]
    }

    mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleGdsZWl0aCIsImEiOiIwZU0xU2RZIn0.z4BFqvJIf6fnzlIGQUmptQ';
    var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [115.813867, -31.932177],
    zoom: 17
    });
    map.on('load', function () {
       map.addLayer({
        'id': 'maine',
        'type': 'fill',
        'source': {
            'type': 'geoj,
        'paint': {
            'fill-color': '#189',
            'fill-opacity': 0.8
        }
    });
    });

Answer 1

您可以利用数据表达式。

以下是示例-https://docs.mapbox.com/mapbox-gl-js/example/data-driven-lines/

在您的情况下，看起来像这样

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',
  providers: [{provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]
})

映射框中的多边形中每个多边形的颜色不同

1 个答案: