Tilemill Estilizando Múltiples Características Superpuestas Algunos Datos

Question

Por favor, vea la siguiente imagen. Estoy utilizando una sola capa de características para la carretera. Ahora estoy usando el siguiente código

    #roads {
  [ROAD_TYPE = 1] {line-width:8; line-color:#194536;}
  [ROAD_TYPE = 2] {line-width:8; line-color:#456321;}
  [ROAD_TYPE = 3] {line-width:8; line-color:#785632;}
  [ROAD_TYPE = 4] {line-width:8; line-color:#236485;}
  [ROAD_TYPE = 5] {line-width:8; line-color:#FFFFFF;}
  [ROAD_TYPE = 6] {line-width:8; line-color:#194536;}
  line-join: round;
  line-cap: round;
  line-smooth: 0.1;
  }

El problema está en los círculos negros donde el blanco se coloca debajo de la capa verde de la carretera. Pero en el círculo rojo, la capa blanca se superpone a la verde y a otras capas importantes. ¿Cómo puedo resolverlo y hacerlo un estilo muy bonito como el mapa de Google o OSM?

Answer 1

El orden en el que se escriben tus road_types en Carto afecta el orden en que se dibujan. No estoy 100% seguro, pero estoy bastante seguro de que los primeros se dibujan primero y los siguientes se dibujan después, lo que significa que se dibujan sobre los que ya existen.

Sin embargo, esta comprensión no coincide con tu imagen y tus reglas. ¿Estás seguro de que esas reglas se guardaron antes? Necesitas guardar tu estilo, haciendo clic en guardar en la esquina derecha de TileMill, para mostrar cualquier cambio que hayas hecho con el código Carto.

Si quieres el color marrón arriba de todo, debes hacer lo siguiente:

#roads {
  [ROAD_TYPE = 5] {line-width:8; line-color:#FFFFFF;}
  [ROAD_TYPE = 1] {line-width:8; line-color:#194536;}
  [ROAD_TYPE = 6] {line-width:8; line-color:#194536;}
  [ROAD_TYPE = 4] {line-width:8; line-color:#236485;}
  [ROAD_TYPE = 2] {line-width:8; line-color:#456321;}
  [ROAD_TYPE = 3] {line-width:8; line-color:#785632;}
  line-join: round;
  line-cap: round;
  line-smooth: 0.1;
}

Answer 2

El orden de dibujo se determina por el orden de los 'symbolizers', que se renderizan en el orden en que se encuentran en tu CartoCSS. Si tu ejemplo está en el orden correcto, entonces podría hacerse de esta manera:

#roads {
::roadtype1 {
  [ROAD_TYPE = 1] {line-width:8; line-color:#194536;}
}
::roadtype2 {
  [ROAD_TYPE = 2] {line-width:8; line-color:#456321;}
}
::roadtype3 {
  [ROAD_TYPE = 3] {line-width:8; line-color:#785632;}
}
::roadtype4 {
  [ROAD_TYPE = 4] {line-width:8; line-color:#236485;}
}
...
}

No recuerdo, pero creo que tendrás que poner tus atributos (line-cap, etc.) en cada symbolizer.

Answer 3

Apenas encontré esto mientras buscaba una respuesta a una pregunta similar.

Si ninguno de los anteriores funciona, podrías intentar el enfoque algo incómodo de dividir la capa en dos capas separadas en Arc o qGIS, importar ambas a TileMill, y asegurarte de que la capa con caminos blancos [Road_Type = 6] esté debajo de la otra capa en la lista de capas. Eso asegurará que todos los caminos blancos estén por debajo de los otros tipos de caminos.

Aunque me sorprende que la respuesta de Scro no haya funcionado. Para ser claro, para hacer que [Road_Type = 6] se muestre debajo de los otros caminos usando su método, el código carto se vería algo así:

#roads {
::roadtype6 {
  [ROAD_TYPE = 6] {line-width:8; line-color:#FFFFFF;}
}
::roadtype2 {
  [ROAD_TYPE = 2] {line-width:8; line-color:#456321;}
}
::roadtype3 {
  [ROAD_TYPE = 3] {line-width:8; line-color:#785632;}
} etc.

con el selector que contiene [ROAD_TYPE = 6] apareciendo como el primer selector en la capa.

Espero que esto ayude.