WedX - журнал о программировании и компьютерных науках

Как исправить ошибку типа при рисовании линии с помощью Mapbox

Я работаю над проектом, в котором я использую API Mapbox для отображения велосипедных маршрутов.

Я следовал собственному примеру Mapbox с API, который можно найти здесь:

https://docs.mapbox.com/mapbox-gl-js/example/geojson-line/

Почему-то у меня возникает ошибка, которая, кажется, вызвана неправильным типом, но я действительно этого не понимаю, не говоря уже о том, чтобы решить ее.

Этот код работает, как в примере.

this.map.addLayer({
      id: 'geojson',
      type: 'line',
      source: {
        type: 'geojson',
        data: {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'LineString',
            coordinates: [
              [-122.48369693756104, 37.83381888486939],
              [-122.48348236083984, 37.83317489144141],
              [-122.48339653015138, 37.83270036637107],
              [-122.48356819152832, 37.832056363179625],
              [-122.48404026031496, 37.83114119107971],
              [-122.48404026031496, 37.83049717427869],
            ]
          }
        }
      },
      layout: {
        'line-join': 'round',
        'line-cap': 'round'
      },
      paint: {
        'line-color': '#888',
        'line-width': 8
      }

Но когда я удаляю жестко заданные геоточки и заменяю их массивом значений LatLong, основываясь на более раннем вызове API, который я сделал для Mapbox, чтобы получить велосипедный маршрут, я получаю сообщение об ошибке:

this.map.addLayer({
      id: 'geojson',
      type: 'line',
      source: {
        type: 'geojson',
        data: {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'LineString',
            coordinates: this.directionsResult.routes[0].geometry.coordinates
          }
        }
      },
      layout: {
        'line-join': 'round',
        'line-cap': 'round'
      },
      paint: {
        'line-color': '#888',
        'line-width': 8
      }
    });

Сообщение об ошибке:

(property) mapboxgl.Layer.source?: string | mapboxgl.GeoJSONSourceRaw | mapboxgl.VideoSourceRaw | mapboxgl.ImageSourceRaw | mapboxgl.CanvasSourceRaw | mapboxgl.VectorSource | mapboxgl.RasterSource | mapboxgl.RasterDemSource
Type '{ type: string; data: { type: string; properties: {}; geometry: { type: string; coordinates: LatLong[]; }; }; }' is not assignable to type 'string | GeoJSONSourceRaw | VideoSourceRaw | ImageSourceRaw | CanvasSourceRaw | VectorSource | RasterSource | RasterDemSource'.
  Type '{ type: string; data: { type: string; properties: {}; geometry: { type: string; coordinates: LatLong[]; }; }; }' is not assignable to type 'GeoJSONSourceRaw'.
    Types of property 'type' are incompatible.
      Type 'string' is not assignable to type '"geojson"'.ts(2322)
index.d.ts(1298, 9): The expected type comes from property 'source' which is declared here on type 'Layer'.

Когда я сравниваю обозначение жестко запрограммированных геоточек с моим результатом, который я получаю от API направлений, они, кажется, имеют точно такой же тип и обозначение:

let coords = this.directionsResult.routes[0].geometry.coordinates;
let geometry = [
      [-122.48369693756104, 37.83381888486939],
      [-122.48348236083984, 37.83317489144141],
      [-122.48339653015138, 37.83270036637107],
      [-122.48356819152832, 37.832056363179625],
      [-122.48404026031496, 37.83114119107971],
      [-122.48404026031496, 37.83049717427869]
    ];

console.log(coords);
console.log(geometry);

Что дает мне следующий вывод консоли:

(17) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
map-box.component.ts:94 

(6) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]

Кто-нибудь с некоторыми предложениями помощи о том, что я делаю неправильно здесь? Спасибо!


Ответы:


1

Я не знаю почему, но когда я добавляю путевые точки в пустой объект массива и использую его, он работает:

let coordsArray = new Array(0);

for (let item of this.directionsResult.routes[0].geometry.coordinates) {
  coordsArray.push(item);
}

И затем при добавлении слоя маршрута на карту:

this.map.addLayer({
      id: 'geojson',
      type: 'line',
      source: {
        type: 'geojson',
        data: {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'LineString',
            coordinates: coordsArray
          }
        }
      },
      layout: {
        'line-join': 'round',
        'line-cap': 'round'
      },
      paint: {
        'line-color': '#198e46',
        'line-width': 3
      }
    });
18.05.2019

2

Попробуйте установить @types/mapbox-gl и @geojson:

npm install @types/mapbox-gl --save

npm install @types/geojson --save

npm install geojson --save

Все ваши вопросы будут решены.

21.10.2020
Новые материалы

Как создать диаграмму градиентной кисти с помощью D3.js
Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


Для любых предложений по сайту: [email protected]