Создание scattermapbox в javascript аналогично тому, что делается в библиотеке Python Dash - PullRequest
0 голосов
/ 29 октября 2019

Я пытаюсь преобразовать то, что делается в Python's Dash, в java-скрипт. В основном он берет цветовую шкалу и некоторую цветовую карту и помещает ее в API mapbox.

Я пытался сделать это:

        mapboxgl.accessToken = 'pk.eyJ1IjoibXdlaXNzYXNwZW4iLCJhIjoiY2sxdG96ZWhiMG04ZDNncW1yYnY1Zm45byJ9.gbFJEsL3BuxGhWjDSh3kvw';
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v10',
        center: [-122.662323, 45.523751], // starting position
        zoom: 12
        });

        map.on('load', function () {
          map.addLayer({
              id: 'points-of-interest',
              source: {
              type: 'scattermapbox', 
              colorscale: [[0.0, 'rgba(8, 48, 107, 255)'], [0.05263157894736842, 'rgba(8, 48, 107, 255)'], [0.10526315789473684, 'rgba(8, 48, 107, 255)'],
                      [0.15789473684210525, 'rgba(8, 48, 107, 255)'], [0.21052631578947367, 'rgba(8, 48, 107, 255)'], [0.2631578947368421, 'rgba(8, 48, 107, 255)'],
                      [0.3157894736842105, 'rgba(8, 48, 107, 255)'], [0.3684210526315789, 'rgba(8, 48, 107, 255)'], [0.42105263157894735, 'rgba(8, 48, 107, 255)'],
                      [0.47368421052631576, 'rgba(8, 48, 107, 255)'], [0.5263157894736842, 'rgba(8, 48, 107, 255)'], [0.5789473684210527, 'rgba(8, 48, 107, 255)'],
                      [0.631578947368421, 'rgba(8, 48, 107, 255)'], [0.6842105263157894, 'rgba(8, 48, 107, 255)'], [0.7368421052631579, 'rgba(8, 48, 107, 255)'],
                      [0.7894736842105263, 'rgba(8, 48, 107, 255)'], [0.8421052631578947, 'rgba(8, 48, 107, 255)'], [0.894736842105263, 'rgba(8, 48, 107, 255)'],
                      [0.9473684210526315, 'rgba(8, 48, 107, 255)'], [1.0, 'rgba(8, 48, 107, 255)']], 
              },
              type:'circle',
              layout : {
                lat: [45.48553],
                lon: [-122.77518],
                marker: {color: 'rgb(231, 41, 74)', size: 9},
                mode: 'markers',
                showlegend: false,
                text: ['9555 SW DUNCAN LN']
              }
        });
      });

Чтобы получить это:

enter image description here

Но я получаюэто вместо этого:

enter image description here

Я сделал несколько таких сообщений, и, честно говоря, я просто сдался. Если кто-то заинтересован в помощи мне за $$$, я сделал пост проекта на codementor.io. Я был бы рад кого-нибудь компенсировать за помощь в этом.

...