4. Configuração de estilo de camada OpenLayer e controle de camada

As configurações de estilo geralmente são camadas vetoriais. Gosto de usar essa configuração de função de retorno de chamada porque ela pode ser alterada de forma flexível de acordo com valores específicos do recurso. Claro, você também pode diretamente = new Style()

      var styleFunction = (feature) => {
        const entityName = feature.get("");

        return new Style({
          stroke: new Stroke({
            color: "rgba(75, 196, 208)", 
            width: 1,
            opacity: 1,
          }),
          fill: new Fill({
            color: "rgba(75, 196, 208)", 
          }),
          text: new OlText({
            text: "",
            font: "14px bold sans-serif",
            fill: new Fill({"rgba(101,102,104)"}),
            offsetY: 0,
            offsetX: -15,
            stroke: new Stroke({
              color: "rgba(8, 138, 255,0.3)",
              width: 1,
            }),
            backgroundFill: new Fill({
              color: "rgba(255, 255, 255,0)",
            }),
          }),
        });
      };

          const iconStyle = new Style({
            image: new Icon(
              ({
                anchor: [0.5, 20],
                anchorOrigin: 'center',
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                offsetOrigin: 'top-right',
                opacity: 1,
                //图标的url
                src: centerIcon,
                offset: [0.5, 1]
              })
            ),
            })

Uma breve introdução aos parâmetros de configuração de estilo de camada:

1. fill(enchimento):

   • fillColor: cor de preenchimento, que pode ser um valor de cor hexadecimal ou um valor RGBA.
   • fillOpacity: Transparência de preenchimento, a faixa de valores é de 0 a 1.

2. stroke(linha lateral):

   • strokeColor: cor da borda, que pode ser um valor de cor hexadecimal ou um valor RGBA.
   • strokeWidth: Largura da borda, a unidade é pixels.
   • strokeOpacity: Transparência da borda, o intervalo de valores é de 0 a 1.
   • lineDash: estilo de linha tracejada, que pode ser uma matriz numérica, indicando que os comprimentos das linhas tracejadas e das linhas sólidas são organizados alternadamente.

3. text(texto):

   • text:Conteúdo de texto.
   • font: estilo de fonte do texto, como "bold 12px Arial".
   • offsetX: O deslocamento do texto na direção x.
   • offsetY: O deslocamento do texto na direção y.
   • rotation: O ângulo de rotação do texto.

4. image(imagem):

   • src: URL da imagem.
   • scale: A proporção de escala da imagem.
   • anchor: O ponto de ancoragem da imagem, que pode ser uma matriz, indicando a proporção de deslocamento horizontal e vertical na imagem.
   • rotation: O ângulo de rotação da imagem.

Para obter detalhes, você pode verificar a documentação da API, que possui muitos estilos ricos, assim como CSS.

O método de controle de camadas é muito simples e pode ser explicado de uma só vez.

yourLayer.setVisible(true)

Observe que definir as propriedades da camada diretamente não funciona.