四、OpenLayer图层样式设置及图层控制

样式设置一般都是矢量图层vectorlayer。我喜欢用这种回调函数的方式设置，因为可以根据要素特定的值去灵活改变。当然也可以直接= 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]
              })
            ),
            })

图层样式设置参数的简单介绍：

1. fill（填充）：

   • fillColor：填充颜色，可以是十六进制颜色值或 RGBA 值。
   • fillOpacity：填充透明度，取值范围为 0 到 1。

2. stroke（边线）：

   • strokeColor：边线颜色，可以是十六进制颜色值或 RGBA 值。
   • strokeWidth：边线宽度，单位为像素。
   • strokeOpacity：边线透明度，取值范围为 0 到 1。
   • lineDash：虚线样式，可以是一个数字数组，表示虚线和实线的长度交替排列。

3. text（文本）：

   • text：文本内容。
   • font：文本字体样式，如 "bold 12px Arial"。
   • offsetX：文本在 x 方向上的偏移量。
   • offsetY：文本在 y 方向上的偏移量。
   • rotation：文本的旋转角度。

4. image（图像）：

   • src：图像的 URL。
   • scale：图像的缩放比例。
   • anchor：图像的定位点，可以是一个数组，表示在图像中的横向和纵向的偏移比例。
   • rotation：图像的旋转角度。

具体的大家可以去看api文档，跟css一样有很多丰富的样式。

图层控制的方法很简单，就一笔带过了。

yourLayer.setVisible(true)

注意的是直接设置图层属性是不管用的。