Как заполнить цвет для региона на основе значения в mapbox? - PullRequest
Новая
       45

Как заполнить цвет для региона на основе значения в mapbox?

0 голосов
/ 04 июля 2018

Я использую mapbox , который рисует контур почтового индекса на основе внешнего файла geojson, как показано ниже: 

import { Component, OnInit } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';

@Component({
  selector: 'app-mapbox',
  templateUrl: './mapbox.component.html',
  styleUrls: ['./mapbox.component.css']
})
export class MapboxComponent implements OnInit {

  ngOnInit() {
    mapboxgl.accessToken = 'api-key';
    let map = new mapboxgl.Map({
      container: 'map',
      style: 'styles',
      zoom: 5,
      center: [-80.118, 25.897]
    });

    map.addControl(new mapboxgl.NavigationControl());

    map.on('load', function () {
      map.addSource("route", {
        "type": "geojson",
        "data": "./assets/shapeGeoJson.json"
      });

      map.addLayer({
        "id": "route",
        "type": "line",
        "source": "route",
        "paint": {
          'line-color': "gray"
        }
      });
    });
  }
}

здесь, я могу загрузить geojson, в котором я получу схему почтовых индексов.

Теперь я хочу вызвать API, где In получит счет density для почтовых индексов, и мне нужно нарисовать слой почтового индекса на основе значения density.

Может кто-нибудь сказать мне, как этого добиться?

любая помощь?

1 Ответ

0 голосов
/ 04 июля 2018

Вы можете использовать addSource Mapbox. Просто добавьте эти строки в ваш код 

map.addSource('zipDensity', {
          type: 'geojson',
          data: {
            ...geoJsonObj // this can be your data from API containing density prop
          } 
});

map.addLayer({
          'id': 'zipDensity',
          'source': 'zipDensity',
          'type': 'fill',
          'paint': {
            'fill-color': {
              property: 'density', // this will be your density property form you geojson
              stops: [
                [1000, '#CECECE'],
                [100000, '#DEDEDE'],
              ]
            },
            'fill-opacity': 1
          }
});

В addLayer вы можете добавить остановки, где вы можете добавить значение плотности и цветовой код. Вы можете исследовать больше реквизита addLayer

Надеюсь, это поможет вам ..

...