Resumo da experiência na configuração do estilo gráfico de pontos, linhas e áreas do maptalks

Pessoalmente prefiro usar mapbox, mas não suporto multidão, então uso maptalks. Porém, o documento é muito comovente e faz as pessoas chorarem por milhares de quilômetros...

configurações de estilo gráfico do maptalks, por meio de configurações de símbolos

Para definir o símbolo, você pode configurá-lo diretamente nos gráficos (Marker LineString Polygon), Geometry e VectorLayer

Para estilizar um único gráfico:

Os formatos geoJSON de gráficos vetoriais maptalks incluem marcador (ponto)/LineString/Polígono, Geometria

Definido via option.symbol ao criar um novo

Se você criar um novo marcador, defina o parâmetro option.symbol

var marcador = novo marcador ([100, 0], { 
    'id': 'marker0', 
    'symbol': { 
        'markerFile': 'foo.png', 
        'markerWidth': 20, 
        'markerHeight': 20, 
    }, 
    'propriedades' : { 
        'foo' : 'valor' 
    } 
});

Definido pelo método setSymbol updateSymbol

marcador.setSymbol(símbolo)

lista de atributos de símbolo

O símbolo está na documentação oficial, mas não consigo encontrar os parâmetros relevantes de uma só vez, o que é uma farsa. Levei muito tempo para encontrar os atributos específicos do símbolo no GitHub.

Referência de símbolo · maptalks/maptalks.js Wiki · GitHub

Marcador	Texto	Polígonos e Linhas
marcadorOpacidade largura do marcador marcadorAltura marcadorDx marcadorDy marcadorHorizontalAlinhamento marcadorVerticalAlignment marcadorPlacement marcadorRotação marcadorArquivo marcadorTipo marcadorFill marcadorFillPatternFile marcadorFillOpacity marcadorLineColor marcadorLineWidth marcadorLineOpacity marcadorLineDasharray marcadorLinePatternFile marcadorCaminho marcadorPathWidth marcadorPathHeight	posicionamento de texto textoFaceName fonte de texto peso do texto estilo de texto Tamanho do texto preenchimento de texto textoOpacidade textoHaloFill textoHaloRadius textoHaloOpacity textWrapWidth textoWrapCharacter textLineSpacing textoHorizontalAlinhamento textoVerticalAlignment alinhamento de texto rotação de texto textoDx textoDy	cor da linha espessura da linha linhaDasharray linhaOpacidade linhaJoin linhaCap linePatternFile linhaDx linhaDy polígonoPreencher polígonoOpacidade polígonoPatternFile

Estas regras podem ser aplicadas a:

Categorias	Pode ser aplicado a
Marcador	Marcadores, polígonos, linhas
Texto	Marcadores, polígonos, linhas
Linha	Polígonos, Linhas
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 样式属性即可

camada.setStyle([ 
  { 
    'filtro': ['==', 'contagem', 100], 
    'símbolo': {'markerFile': 'foo1.png'} 
  }, 
  { 
    'filtro': ['==' , 'contagem', 200], 
    'símbolo': {'markerFile': 'foo2.png'} 
  } 
])

Eu uso mais esse modo

Reimprima o artigo " Resumo da experiência de configuração de estilo gráfico de ponto, linha e superfície maptalks - atributos e métodos de símbolo ",
indique a fonte: resumo da experiência de configuração de estilo gráfico de ponto, linha e superfície maptalks - atributos e métodos de símbolo - notas de preenchimento de poço maptalks - Site pessoal de Zhou Junjun