十一.Vector

1.导出 PDF

查看代码详情

<template>
  <div>
    <div class="row-fluid">
      <div class="span12">
        <div ref="map" class="map"></div>
      </div>
    </div>
    <form class="form">
      <label for="format">Page size </label>
      <select id="format">
        <option value="a0">A0 (slow)</option>
        <option value="a1">A1</option>
        <option value="a2">A2</option>
        <option value="a3">A3</option>
        <option value="a4" selected>A4</option>
        <option value="a5">A5 (fast)</option>
      </select>
      <label for="resolution">Resolution </label>
      <select id="resolution">
        <option value="72">72 dpi (fast)</option>
        <option value="150">150 dpi</option>
        <option value="300">300 dpi (slow)</option>
      </select>
      <button id="export-pdf">导出 PDF</button>
    </form>
  </div>
</template>
  
  <script>
export default {
  mounted() {
    let {
      format: { WKT },
      Map,
      View,
      layer: { Tile: TileLayer, Vector: VectorLayer },
      source: { OSM, Vector: VectorSource },
    } = ol;
    const format = new WKT();
    const feature = format.readFeature(
      "POLYGON((10.689697265625 -25.0927734375, 34.595947265625 " +
        "-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 " +
        "-39.1552734375, 10.689697265625 -25.0927734375))"
    );
    feature.getGeometry().transform("EPSG:4326", "EPSG:3857");

    const vector = new VectorLayer({
      source: new VectorSource({
        features: [feature],
      }),
      opacity: 0.5,
    });

    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
        vector,
      ],
      target: this.$refs.map,
      view: new View({
        center: [12579156, 3274244],
        zoom: 2,
      }),
    });

    const dims = {
      a0: [1189, 841],
      a1: [841, 594],
      a2: [594, 420],
      a3: [420, 297],
      a4: [297, 210],
      a5: [210, 148],
    };

    const exportButton = document.getElementById("export-pdf");

    exportButton.addEventListener(
      "click",
      function () {
        exportButton.disabled = true;
        document.body.style.cursor = "progress";

        const format = document.getElementById("format").value;
        const resolution = document.getElementById("resolution").value;
        const dim = dims[format];
        const width = Math.round((dim[0] * resolution) / 25.4);
        const height = Math.round((dim[1] * resolution) / 25.4);
        const size = map.getSize();
        const viewResolution = map.getView().getResolution();

        map.once("rendercomplete", function () {
          const mapCanvas = document.createElement("canvas");
          mapCanvas.width = width;
          mapCanvas.height = height;
          const mapContext = mapCanvas.getContext("2d");
          Array.prototype.forEach.call(
            document.querySelectorAll(".ol-layer canvas"),
            function (canvas) {
              if (canvas.width > 0) {
                const opacity = canvas.parentNode.style.opacity;
                mapContext.globalAlpha = opacity === "" ? 1 : Number(opacity);
                const transform = canvas.style.transform;
                const matrix = transform
                  .match(/^matrix\(([^\(]*)\)$/)[1]
                  .split(",")
                  .map(Number);
                CanvasRenderingContext2D.prototype.setTransform.apply(
                  mapContext,
                  matrix
                );
                mapContext.drawImage(canvas, 0, 0);
              }
            }
          );
          mapContext.globalAlpha = 1;
          const pdf = new jspdf.jsPDF("landscape", undefined, format);
          pdf.addImage(
            mapCanvas.toDataURL("image/jpeg"),
            "JPEG",
            0,
            0,
            dim[0],
            dim[1]
          );
          pdf.save("map.pdf");
          map.setSize(size);
          map.getView().setResolution(viewResolution);
          exportButton.disabled = false;
          document.body.style.cursor = "auto";
        });
        const printSize = [width, height];
        map.setSize(printSize);
        const scaling = Math.min(width / size[0], height / size[1]);
        map.getView().setResolution(viewResolution / scaling);
      },
      false
    );
  },
};
</script>

2.选择要素

图层	layer	source	备注
layer1	Tile	XYZ	"https://server.arcgisonline.com/ArcGIS/rest/services/" +"World_Topo_Map/MapServer/tile/{z}/{y}/{x}"

使用 DragBox 交互来选择特征。所选特征被添加到选择交互 ( ol/interaction/Select) 的特征叠加中以突出显示

使用 Ctrl+Drag(Command+Drag 在 Mac 上) 绘制框

查看代码详情

<template>
  <div>
    <div ref="map" class="map"></div>
    <div>Selected regions: <span ref="info">None</span></div>
  </div>
</template>

<script>
export default {
  mounted() {
    let {
      format: { GeoJSON },
      Map,
      View,
      layer: { Vector: VectorLayer },
      source: { Vector: VectorSource },
      interaction: { DragBox, Select },
      style: { Fill, Stroke, Style },
      events: { condition: platformModifierKeyOnly },
    } = ol;
    const style = new Style({
      fill: new Fill({
        color: "#eeeeee",
      }),
    });
    const map = new Map({
      layers: [
        new VectorLayer({
          source: new VectorSource({
            url: "https://openlayers.org/data/vector/ecoregions.json",
            format: new GeoJSON(),
          }),
          background: "#1a2b39",
          style: function (feature) {
            const color = feature.get("COLOR_BIO") || "#eeeeee";
            style.getFill().setColor(color);
            return style;
          },
        }),
      ],
      target: this.$refs.map,
      view: new View({
        center: [12579156, 3274244],
        zoom: 2,
        constrainRotation: 16,
      }),
    });
    const selectedStyle = new Style({
      fill: new Fill({
        color: "rgba(255, 255, 255, 0.6)",
      }),
      stroke: new Stroke({
        color: "rgba(255, 255, 255, 0.7)",
        width: 2,
      }),
    });
    const select = new Select({
      style: function (feature) {
        const color = feature.get("COLOR_BIO") || "#eeeeee";
        selectedStyle.getFill().setColor(color);
        return selectedStyle;
      },
    });
    map.addInteraction(select);
    const selectedFeatures = select.getFeatures();
    const dragBox = new DragBox({
      condition: platformModifierKeyOnly,
    });
    map.addInteraction(dragBox);
    dragBox.on("boxend", function () {
      const extent = dragBox.getGeometry().getExtent();
      const boxFeatures = vectorSource
        .getFeaturesInExtent(extent)
        .filter((feature) => feature.getGeometry().intersectsExtent(extent));
      const rotation = map.getView().getRotation();
      const oblique = rotation % (Math.PI / 2) !== 0;
      if (oblique) {
        const anchor = [0, 0];
        const geometry = dragBox.getGeometry().clone();
        geometry.rotate(-rotation, anchor);
        const extent = geometry.getExtent();
        boxFeatures.forEach(function (feature) {
          const geometry = feature.getGeometry().clone();
          geometry.rotate(-rotation, anchor);
          if (geometry.intersectsExtent(extent)) {
            selectedFeatures.push(feature);
          }
        });
      } else {
        selectedFeatures.extend(boxFeatures);
      }
    });
    dragBox.on("boxstart", function () {
      selectedFeatures.clear();
    });
    const infoBox = this.$refs.info;
    selectedFeatures.on(["add", "remove"], function () {
      const names = selectedFeatures.getArray().map(function (feature) {
        return feature.get("ECO_NAME");
      });
      if (names.length > 0) {
        infoBox.innerHTML = names.join(", ");
      } else {
        infoBox.innerHTML = "None";
      }
    });
  },
};
</script>