openLayers设置随比例尺而改变的样式

javascript 复制代码

this.#circleLayer = new VectorLayer({
    source: source,
    zIndex: 100,
    name: "seaFishingCircleLayer",
    style: function (feature, resolution) {
      const { fillColor, strokeColor, name, factorImg } = feature.getProperties();
      let featureStyle = [];
      if (factorImg.length > 0) {
         factorImg.forEach((factor, index) => {
           console.log(factor);
           featureStyle.push(
             new Style({
               image: new Icon({
                 src: "./static/shipArea/" + factor + "Factor.png",
                 anchorOrigin: "top-left",
                 size: [32, 32],
                 offset: [-18 * index, -22],
               }),
               geometry: (feature) => {
                 const geometry = feature.getGeometry();
                 const center = that.getCoordinatesByGeometry(geometry);
                 const coordinate = fromLonLat(center);
                 return new Point(coordinate);
               },
             })
           );
        );
      }
      featureStyle.push(
        new Style({
          fill: new Fill({
             color: fillColor,
          }),
          stroke: new Stroke({
            color: strokeColor,
            width: 1,
           }),
           text: new Text({
             text: resolution < 500 ? name : "",
             font: "500 12px MiSans",
             fill: new Fill({
               color: "#fff",
             }),
             stroke: new Stroke({
               color: "rgba(0,0,0,0.8)",
               width: 2,
             }),
             overflow: true,
           }),
         })
       );
       return featureStyle;
     },
   });
this.#map.addLayer(this.#circleLayer);

但是中间出了一个问题，那就是在设置offset[]属性的时候，由于本人设置Icon大小为14px,当我设置size为[14, 14]时,大概由于有两个Icon,盒子放不下导致两个Icon都没有显示。把size扩大到双倍Icon的宽即可。另外offset的设置也有要求，所以本人在想有没有像下面这个overflow的属性一样，可以设置元素超出图形仍然显示

javascript 复制代码

new Style({
  fill: new Fill({
    color: fillColor,
  }),
  stroke: new Stroke({
    color: strokeColor,
    width: 1,
  }),
  text: new Text({
    text: resolution < 500 ? name : "",
    font: "500 12px MiSans",
    fill: new Fill({
      color: "#fff",
    }),
    stroke: new Stroke({
      color: "rgba(0,0,0,0.8)",
      width: 2,
    }),
    overflow: true,
  }),
})

另附一段getCoordinatesByGeomotry()的代码。作用在于获取一个geometry的中心点

javascript 复制代码

getCoordinatesByGeometry(geometry) {
    const type = geometry.getType();
    let coordinates = null;
    if (type === "Polygon") {
      coordinates = geometry.getInteriorPoint().getCoordinates();
    } else {
      coordinates = geometry.getCoordinates();
    }
    // 部分coordinates会有第三个数组元素。
    return toLonLat([coordinates[0], coordinates[1]]);
  }