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

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

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

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

mb растр

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

p.s. вот как я стилизовал карту выше

#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;}

person RobinLovelace    schedule 06.03.2014    source источник


Ответы (3)


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

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

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

person Alex Barth    schedule 07.03.2014
comment
Привет, спасибо за это, Алекс. Но, пожалуйста, будьте более конкретными: я пытаюсь интерпретировать стиль: function (feature) { return {color: feature.properties.color}; }, и я не уверен, как сделать так, чтобы цвет точек зависел от переменных - пожалуйста, предоставьте воспроизводимый пример, например. с данными, которые я предоставил, или разветвите это: massatleeds.github.io/maps/2014/03/08/leaflet-map-eg.html - person RobinLovelace; 08.03.2014

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

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

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

person Haoliang Yu    schedule 13.03.2016