7. OpenLayer-Berechnungsfunktion

Openlayer kapselt keine direkt verfügbare Messschnittstelle. Sie müssen selbst Liniensegmente und Flächen zeichnen und dann die Länge oder Fläche ermitteln. Der vollständige Code ist unten aufgeführt:

    
    //量算工具 typeSelect = 1、面积  2、长度
    initMeasureGrawTool(typeSelect) {
      let _this = this;
      if (this.lineDraw) {
        this.lineDraw.abortDrawing();
        this.map.removeInteraction(this.lineDraw);
        this.removeLineLayer();
        this.map.removeOverlay(this.measureTooltip);
        this.map.getOverlays().clear();
      }
      let map = this.map;
      // 添加一个绘制的线使用的layer
      var lineLayer = new VectorLayer({
        properties: { name: "lineLayer" },
        source: new VectorSource(),
        zIndex: 500,
        style: new Style({
          fill: new Fill({
            color: "#ffffffcc",
          }),
          stroke: new Stroke({
            color: "#0099ff",
            size: 1,
          }),
          //image是设置点的样式
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: "#ffffffcc",
            }),
            stroke: new Stroke({
              color: "#0099ff",
              width: 2,
            }),
          }),
        }),
      });
      this.map.addLayer(lineLayer);
      //const source = new VectorSource();

      let sketch;
      let helpTooltipElement;
      let helpTooltip;

      let measureTooltipElement;
      let measureTooltip;

      const continuePolygonMsg = "点击绘制面";
      const continueLineMsg = "点击绘制线";
      const pointerMoveHandler = function (evt) {
        if (evt.dragging) {
          return;
        }
        let helpMsg = "点击开始绘制";

        if (sketch) {
          const geom = sketch.getGeometry();
          if (geom instanceof Polygon) {
            helpMsg = continuePolygonMsg;
          } else if (geom instanceof LineString) {
            helpMsg = continueLineMsg;
          }
        }

        helpTooltipElement.innerHTML = helpMsg;
        helpTooltip.setPosition(evt.coordinate);

        helpTooltipElement.classList.remove("hidden");
      };

      map.on("pointermove", pointerMoveHandler);

      map.getViewport().addEventListener("mouseout", function () {
        helpTooltipElement.classList.add("hidden");
      });

      //let draw; // global so we can remove it later

      const formatLength = function (line) {
        // const length = getLength(line);
        var sourceProj = "EPSG:4326";
        var length = getLength(line, {
          radius: 6378137,
          projection: sourceProj,
        });
        let output;
        if (length > 10000) {
          output = Math.round((length / 1000) * 100) / 100 + " " + "km";
        } else {
          output = Math.round(length * 100) / 100 + " " + "m";
        }
        return output;
      };

      const formatArea = function (polygon) {
        // const area = getArea(polygon);
        var sourceProj = "EPSG:4326";
        var area = getArea(polygon, {
          radius: 6378137,
          projection: sourceProj,
        });
        let output;
        if (area > 10000000) {
          output =
            Math.round((area / 1000000) * 100) / 100 + " " + "km<sup>2</sup>";
        } else {
          output = Math.round(area * 100) / 100 + " " + "m<sup>2</sup>";
        }
        return output;
      };

      function addInteraction(typeSelect) {
        const type = typeSelect == 2 ? "Polygon" : "LineString";
        _this.lineDraw = new Draw({
          source: lineLayer.getSource(),
          type: type,
          style: new Style({
            fill: new Fill({
              color: "rgba(255, 255, 255, 0.2)",
            }),
            stroke: new Stroke({
              color: "rgba(0, 0, 0, 0.5)",
              lineDash: [10, 10],
              width: 2,
            }),
            image: new Circle({
              radius: 5,
              stroke: new Stroke({
                color: "rgba(0, 0, 0, 0.7)",
              }),
              fill: new Fill({
                color: "rgba(255, 255, 255, 0.2)",
              }),
            }),
          }),
        });
        map.addInteraction(_this.lineDraw);

        createMeasureTooltip();
        createHelpTooltip();

        let listener;
        _this.lineDraw.on("drawstart", function (evt) {
          // set sketch
          sketch = evt.feature;

          /** @type {import("../src/ol/coordinate.js").Coordinate|undefined} */
          let tooltipCoord = evt.coordinate;

          listener = sketch.getGeometry().on("change", function (evt) {
            const geom = evt.target;
            let output;
            if (geom instanceof Polygon) {
              output = formatArea(geom);
              tooltipCoord = geom.getInteriorPoint().getCoordinates();
            } else if (geom instanceof LineString) {
              output = formatLength(geom);
              tooltipCoord = geom.getLastCoordinate();
            }
            measureTooltipElement.innerHTML = output;
            measureTooltip.setPosition(tooltipCoord);
          });
        });

        _this.lineDraw.on("drawend", function () {
          measureTooltipElement.className = "ol-tooltip ol-tooltip-static";
          measureTooltip.setOffset([0, -7]);
          // unset sketch
          sketch = null;
          // unset tooltip so that a new one can be created
          measureTooltipElement = null;
          _this.measureTooltip = createMeasureTooltip();
          _this.lineDraw.abortDrawing();
          _this.lineDraw.setActive(false);
          _this.map.removeInteraction(this.lineDraw);
          _this.map.removeLayer(lineLayer);
          helpTooltipElement.innerHTML = "";
          helpTooltipElement.parentNode.removeChild(helpTooltipElement);
          // unByKey(listener);
        });

        //右键事件
        _this.map.on("contextmenu", (e) => {
          e.preventDefault();
        });
      }

      /**
       * 创建鼠标移动过程中的提示条
       */
      function createHelpTooltip() {
        if (helpTooltipElement) {
          helpTooltipElement.parentNode.removeChild(helpTooltipElement);
        }
        helpTooltipElement = document.createElement("div");
        helpTooltipElement.className = "ol-tooltip hidden";
        helpTooltip = new Overlay({
          element: helpTooltipElement,
          offset: [15, 0],
          positioning: "center-left",
        });
        map.addOverlay(helpTooltip);
      }

      /**
       * 创建量算后文字标注的元素
       */
      function createMeasureTooltip() {
        if (measureTooltipElement) {
          measureTooltipElement.parentNode.removeChild(measureTooltipElement);
        }
        measureTooltipElement = document.createElement("div");
        measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";
        measureTooltip = new Overlay({
          element: measureTooltipElement,
          offset: [0, -15],
          positioning: "bottom-center",
          stopEvent: false,
          insertFirst: false,
        });
        map.addOverlay(measureTooltip);
        return measureTooltip;
      }

      addInteraction(typeSelect);
    },