deck.gl Руководство по приготовлению пищи (а) принадлежат Угловая

deck.gl географических данных является основой визуализации Uber дистального производства, основанный на технологии WebGL. Демо с официального сайта зрения, он богат в стиле, что делает, гладкой, а также поддержка трехмерной визуализации (в конце концов, WebGL Ну), в echarts профессионал с более чем мои руки проекта. Но эти примеры в основном основаны на официальном веб-сайте обязательно подходит, в TS и JS угловому React достигнута. И внутренний китайский учебник для этой визуализации рамки не так много. Поэтому на этот раз воспользовавшись технических обновлений плана проекта, следовать своей собственной рукой, чтобы избежать официального документа учебного опыта, чтобы записать яму Давай. Потому что я также новый передний конец Мэн (пять и шесть испытаний не было 480), так что это руководство написано где упиваться ~

На основании угловых 8.1 Writing (собака не красит номер версии)

Нанести на счет MapBox

Ключ лежит в визуализации географической карты. echarts официальные Baidu предоставляет Baidu карту, пользователь может также использовать источник карты высокого немецкого, карту мира и т.д., или просто загрузить свой собственный пользовательский файл в формате JSON. И deck.gl этой библиотеки, хотя официальная линия, которая не зависит ни от какой работы карты компонентов (если вы настраиваете неправильный документ карта будет найти действительно так, хотя нет картографических данных загружен, но он по-прежнему не влияет, может загрузить должным образом) , но рекомендуются использовать в сочетании с MapBox-Gl этой карты библиотеки компонентов. MapBox-ГЛ из свободной и создавать собственные карты сайта MapBox, поэтому наш первый шаг, чтобы зарегистрировать новую учетную запись на сайте MapBox

Регистрация аккаунта интерфейс очень прост, только одна страница, лишь немногие окно данных, вам не нужно даже подтверждения по электронной почте. Так что не говорят здесь опущено. После ввода страницы регистрации учетной записи см доступ лексема интерфейса еще? Нажмите кнопку «Создать маркер», заполнить имя, другие оставьте значение по умолчанию, вы можете создать карту, принадлежащую токен.

Создание нового проекта Угловой

Затем создайте новый проект Угловой. Для того, чтобы быть создан, перейдите в папку проекта с НПМ установки deck.gl две библиотеки @ deck.gl / ядро и @ deck.gl / слои

NPM установить @ deck.gl / ядро @ deck.gl / слои

Это официальный учебник рекомендуемый метод. Но я столкнулся при установке ошибки НПМ: «может быть только» @deck $ Deck «» НПМ после обновления до новой версии по-прежнему не поддерживает эту команду «команда в качестве аргумента ссылки на переменную в выражении, использование.» , Так я вручную зависимостей в файле проекта package.json вручную добавить эти две библиотеки, а затем установить НПМ

    "@ deck.gl / ядро": "~ 7.2.3" ,
     "@ deck.gl / слои": "~ 7.2.3",

НАЯ установка

Измените файл шаблона с файлом TS

После установки, мы сначала добавить MapBox использовать стиль в файле индекса

< Ссылка HREF = 'https: //api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' отн = 'таблица стилей' />

Затем найдите файл шаблона app.component.html, скопируйте в него следующее, заменив некрасиво генерируется автоматически при создании нового проекта (Угловая слышал, что следующая версия будет заменить этот сгенерированный шаблон, новый шаблон много хорошего вида)

< DIV ID = "контейнер" > 
  < DIV ID = "Карта" > </ DIV > 
  < холст ID = "колода холст" > </ холст > 
</ DIV >

Затем найдите файл TS, или пустой, скопируйте следующий код в него

импорта {Компонент, OnInit} от '@ угловой / ядра' ; 
импорт {} Палуба из '@ deck.gl / ядра' ; 
импорт {GeoJsonLayer, ArcLayer} от '@ deck.gl / слои' ; 
импорт mapboxgl из 'mapboxgl' ; 

@Component ({ 
  селектор: 'приложение-корень' , 
  templateUrl: './app.component.html' , 
  styleUrls: [ »./app.component.css' ] 
}) 
экспорт класс AppComponent реализует OnInit { 
  название = 'ngDeckGL' ; 
  ngOnInit (): пустота {
     // 数据集来源 
    Const AIR_PORTS =
      'Https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson' ; 

    Const INITIAL_VIEW_STATE = { 
      Широта: 51,47 , 
      долгота: 0,45 , 
      Zoom: 4. , 
      Подшипник: 0 , 
      Высота: 30 
    }; 

    // отвечал в заявке на свой счет MapBox 
    mapboxgl.accessToken = «приложения , чтобы прикрепить свой собственный счет в MapBox»; // eslint-отключение строки 

    // Карта стилизации 
    сопзЬ = карта новый новый mapboxgl.Map ({ 
      Контейнер: «Карта ' , 
      стиль:'MapBox: // стили / MapBox / светло-v9' ,
       // Примечание: deck.gl будет отвечать за взаимодействие и обработку событий 
      интерактивными: ЛОЖЬ , 
      центр: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude], 
      масштаб: INITIAL_VIEW_STATE. масштаба, 
      подшипник: INITIAL_VIEW_STATE.bearing, 
      шаг: INITIAL_VIEW_STATE.pitch 
    }); 

    // 可视化数据集投影 
    Const палуба = новая палуба ({ 
      холст: 'палуба холст' , 
      ширина: '100%' , 
      высота: '100%' , 
      initialViewState: INITIAL_VIEW_STATE,
      Контроллер:  ,истинно 
      onViewStateChange: ({VIEWSTATE}) => { 
        map.jumpTo ({ 
          центр: [viewState.longitude, viewState.latitude], 
          масштаб: viewState.zoom, 
          подшипник: viewState.bearing, 
          шаг: viewState.pitch 
        }); 
      }, 
      Слои: [ 
        новый GeoJsonLayer ({ 
          ID: '' аэропорты , 
          данные: AIR_PORTS, 
          // Стили 
          заполнения: истинные , 
          pointRadiusMinPixels: 2 , 
          Непрозрачность: 1 ,
          pointRadiusScale: 2000  ,
          getRadius: F => 11 - f.properties.scalerank, 
          getFillColor: [ 200, 0, 80, 180 ],
           // Интерактивная реквизит 
          pickable: истинно , 
          autoHighlight: истинно , 
          OnClick: Информация =>
             // eslint-отключение -next линии 
            info.object && оповещения ( `$ {info.object.properties.name} ($ {info.object.properties.abbrev})`) 
        }), 
        новый ArcLayer ({ 
          ID: 'дуги' , 
          данные: AIR_PORTS, 
          DataTransform: d => d.features.filter (F => f.properties.scalerank <4),
           // Стили 
          getSourcePosition: F => [-0,4531566, 51,4709959], // Лондон 
          getTargetPosition: F => f.geometry.coordinates, 
          getSourceColor: [ 0, 128, 200 ], 
          getTargetColor: [ 200, 0, 80 ] , 
          GetWidth: 1 
        }) 
      ] 
    }); 
  } 
}

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

Файлы CSS Изменить

В этот момент мои друзья должны быть в состоянии увидеть проектор данных, но на земле это обширное пространство, там нет карты. Почему это? Потому что мы не ставим хороший стиль файл шаблона CSS. Эта точка зрения должна быть расположена на географической точки зрения выжатый ушел. Мы шаблон CSS файл изменен так далее, установить как ширина и высота 100% вид, мы можем видеть окончательные результаты немного

#container { 
  позиция : фиксированная ; 
  сверху : 0 ; 
  осталось : 0 ; 
  право : 0 ; 
  снизу : 0 ; 
} 
#Container> * { 
  позиция : абсолютная ; 
  сверху : 0 ; 
  осталось : 0 ; 
  ширина : 100% ; 
  Высота : 100% ; 
}