Как обслуживать стилизованные данные векторных карт через CartoCSS

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

Теперь у данных есть такие атрибуты, как Место (Дом, Работа, Опасность) и серьезность несчастных случаев, которых они опасаются в разных местах. Поэтому более широкий вопрос заключается в том, как визуализировать это на веб-карте. Для этого я посмотрел в Google Maps, Leaflet и OpenLayers3. Каждый из них выглядит великолепно и допускает хорошее оформление, но ни один из них, на мой взгляд, не обладает аккуратностью CartoCSS для быстрого, сложного и интуитивно понятного оформления, как в приведенном ниже коде, используемом для создания изображения ниже:

Так что я попробовал это на плиточном заводе, и это то, что я придумал, преобразовав вещи в растровые плитки с помощью TileMill.

мб растр

Но это глупый способ сделать что-то: он не может перекрывать базовый слой и будет гораздо эффективнее просто обслуживать векторные данные и стилизовать их на стороне клиента, возможно, используя что-то вроде mapbox.js. Но я не могу понять, как использовать прекрасный язык CartoCSS на стороне клиента для стилизации файлов GeoJSON. (Как это возможно?

вот как я стилизовал вышеуказанную карту

#tlines {
  line-width:1;
  line-color: #0b0;
}

#tpoints.points{
  marker-width: 6;
}


#tpoints.points[Place='Danger'] {
  marker-fill:#db0d0d;
}
#tpoints.points[Place='Home'] {
  marker-fill:#db0;
}

#tpoints.points[Severity='1']{
  marker-width: 4;}
#tpoints.points[Severity='2']{
  marker-width: 6;}
#tpoints.points[Severity='3']{
  marker-width: 10;}
Источник

3 ответа

Решение

Я не могу понять, как использовать прекрасный язык CartoCSS на стороне клиента для стилизации файлов GeoJSON. (Как это возможно?

Невозможно использовать CartoCSS для стилизации функций браузера.

Чтобы узнать, как стилизовать GeoJSON в Mapbox.js/Leaflet.js, взгляните на документы здесь:

Источник

Алекс справедливо отмечает, что векторный стиль в Leaflet/Mapbox.js отличается от стиля CartoCSS в стиле Tilemill или Mapbox Studio. Тем не менее, есть возможность стилизовать функции в браузере, используя CartoCSS; это просто требует одной из двух вещей:

  1. Другая платформа: CartoDB имеет отличную библиотеку JS для стилизации размещенных данных с помощью CartoCSS, основанную на листовке и полностью совместимую с базовыми картами Mapbox.
  2. Размещение собственного сервера листов, либо сервера CartoDB, либо комбинации инструментов, встроенных в Mapbox.
Источник

Если вы используете GeoJson в качестве источника данных, вы можете попробовать подключаемый модуль Leaflet.geojsonCSS для Leaflet.js. CSS Geojson предоставляет определение стиля для каждой функции в коллекции в формате, подобном CSS. Для этого необходимо заранее добавить определение стиля в геойсон.

Источник
Другие вопросы по тегам