Resumen de la experiencia en la configuración del estilo gráfico de puntos, líneas y áreas de Maptalks

Personalmente prefiero usar mapbox, pero no soporto a la multitud, así que uso maptalks, pero el documento es muy conmovedor y hace llorar a la gente a miles de kilómetros ...

Configuración de estilo gráfico de MapTalks, a través de configuración de símbolos.

Para configurar el símbolo, puede configurarlo directamente en los gráficos (Marker LineString Polygon), Geometry y VectorLayer.

Para aplicar estilo a un solo gráfico:

Los formatos geoJSON de gráficos vectoriales de Maptalks incluyen marcador (punto)/cadena de línea/polígono, geometría.

Establecer a través de option.symbol al crear un nuevo

Si crea un nuevo marcador, configure el parámetro option.symbol

var marcador = nuevo marcador ([100, 0], { 
    'id': 'marcador0', 
    'símbolo': { 
        'archivomarcador': 'foo.png', 
        'anchomarcador': 20, 
        'alturamarcador': 20, 
    }, 
    'propiedades': { 
        'foo': 'valor' 
    } 
});

Establecido por el método setSymbol updateSymbol

marcador.setSymbol(símbolo)

lista de atributos de símbolo

El símbolo está en la documentación oficial, pero no puedo encontrar los parámetros relevantes a la vez, lo cual es una estafa. Me tomó mucho tiempo encontrar los atributos específicos del símbolo en GitHub.

Referencia de símbolos · maptalks/maptalks.js Wiki · GitHub

Marcador	Texto	Polígonos y líneas
marcadorOpacidad ancho del marcador marcadorAltura marcadorDx marcadorDy marcadorAlineación Horizontal marcadorAlineaciónVertical Colocación del marcador marcadorRotación marcadorarchivo tipo de marcador marcadorRellenar marcadorRellenoPatrónArchivo marcadorRellenoOpacidad marcadorLíneaColor marcadorLíneaAncho marcadorLíneaOpacidad marcadorLíneaDasharray marcadorLíneaPatrónArchivo marcadorRuta marcadorAnchoDeRuta marcadorRutaAltura	colocación de texto textocaranombre tipografía del texto textoPeso estilo de texto tamano del texto relleno de texto textoOpacidad textoHaloFill textoHaloRadius textoHaloOpacidad ancho de envoltura de texto carácter de envoltura de texto espacio entre líneas de texto textoAlineaciónHorizontal textoAlineaciónVertical texto alineado rotación de texto textoDx textoDy	color de linea ancho de línea líneaDasharray líneaOpacidad líneaUnirse líneaCap líneaPatrónArchivo líneaDx líneaDy polígonoRelleno polígonoOpacidad polígonoPatrónArchivo

Estas reglas se pueden aplicar a:

Categorías	Se puede aplicar a
Marcador	Marcadores, Polígonos, Líneas
Texto	Marcadores, Polígonos, Líneas
Línea	polígonos, líneas
Polygon	Polygons

支持的颜色格式

HTML-style hex values, rgb, rgba, hsl, and hsla. Predefined HTML colors names, like yellow and blue, are also permitted.

• lineColor: "#ff0",

• lineColor: "#ffff00",

• lineColor: "rgb(255, 255, 0)",

• lineColor: "rgba(255, 255, 0, 1)",

• lineColor: "hsl(100, 50%, 50%)",

• lineColor: "hsla(100, 50%, 50%, 1)",

• lineColor: "yellow"

渐变色设置和canvas设置一样

Gradient color, like it in Canvas, can be either linear gradient color or radial gradient color, the form of gradient color is a JSON object with type, places and color stops:

通过Geometry设置图形样式

批量设置样式

maptalks批量设置样式，一般把其归类，设置规律的集合属性即可

multi集合设置

MultiPoint、MultiLineString、MultiPolygon、MultiGeometry、GeometryCollection

Class: MultiGeometry

这是和单个设置其实一样的，不必赘述

通过VectorLayer设置

一般数据量多了，就通过分层 归集数据，这时候，设置VectorLayer 样式属性即可

capa.setStyle([ 
  { 
    'filtro': ['==', 'cuenta', 100], 
    'symbol': {'markerFile': 'foo1.png'} 
  }, 
  { 
    'filtro': ['==' , 'recuento', 200], 
    'símbolo': {'markerFile': 'foo2.png'} 
  } 
])

Yo uso este modo más

Vuelva a imprimir el artículo " Resumen de experiencia de configuración de estilo de gráficos de puntos, líneas y superficies de Maptalks: atributos y métodos de símbolos ",
indique la fuente: Resumen de experiencia de configuración de estilos de gráficos de puntos, líneas y superficies de Maptalks: atributos y métodos de símbolos - Notas sobre el llenado de pozos de Maptalks Sitio web personal de Zhou Junjun