在vue2中，使用openlayers在图层上构建一个圆圈

最新推荐文章于 2024-05-29 22:38:25 发布

夏季的微风~

最新推荐文章于 2024-05-29 22:38:25 发布

阅读量568

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_56205895/article/details/131633434

版权

第一步：下载对应的openlayers.

import { Circle as CircleFeature } from "ol/geom";
import Feature from "ol/Feature";

var FenceSource = null;

FenceSource = new Vector({
    wrapX: false,
  });

FenceLayer.value = new VectorLayer({
    source: FenceSource,
    zIndex: 1,
    style: function (feature) {
      return FenceStyle(feature, "255, 0, 0");
    },
  });


function FenceStyle(f, r) {
  let fillColor, frameColor;
  if (f.get("fillColor") == undefined || f.get("fillColor") == "null") {
    fillColor = "rgba(" + r + ",0.1)";
  } else {
    fillColor = f.get("fillColor");
  }
  if (f.get("frameColor") == undefined || f.get("frameColor") == "null") {
    frameColor = "rgb(" + r + ")";
  } else {
    frameColor = f.get("frameColor");
  }

  return [
    new Style({
      fill: new Fill({
        color: fillColor,
      }),
      stroke: new Stroke({
        lineDash: [1, 2, 3, 4, 5, 6],
        color: frameColor,
        width: 2,
      }),
    }),
  ];
}

    initCircleFence(row) {
      let leaveFence = {
        geometry: {
          coordinates: [],
          type: "Polygon",
        },
        id: row.fenceInfo.idx,
        mark: row.fenceInfo.mark,
        properties: {
          fencetype: row.fenceInfo.fenceType,
          id: row.fenceInfo.idx,
          layerId: row.fenceInfo.layerId,
          name: row.fenceInfo.fenceName,
          fillColor: "rgba(128,128,128,0.1)",
          frameColor: "rgba(128,128,128,1)",
          type: "Fence",
        },
        type: "Feature",
      };

        const geometryData = leaveFence;
        const circleFeature = new Feature({
          geometry: new CircleFeature(
            _TransPixel(geometryData.geometry.coordinates[0][0]),
            this.drp * geometryData.geometry.coordinates[0][1]
          ),
        });
        circleFeature.setId(geometryData.id);
        circleFeature.properties = geometryData.properties;
        circleFeature.coorRadiu = geometryData.geometry.coordinates[0][1];
        circleFeature.dotOrigin = geometryData.geometry.coordinates[0][0];
        circleFeature.set("name", geometryData.properties.name);
        circleFeature.set("fillColor", geometryData.properties.fillColor);
        circleFeature.set("frameColor", geometryData.properties.frameColor);
        FenceSource.addFeature(circleFeature);
      
    },

最后的实现效果：