十.geom（Circle）

1.自定义命中检测渲染

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>

<script>
export default {
  mounted() {
    let {
      Feature,
      geom: { Circle },
      Map,
      View,
      layer: { Tile: TileLayer, Vector: VectorLayer },
      source: { OSM, Vector: VectorSource },
      style: { Style },
      proj: { fromLonLat },
    } = ol;
    const columbusCircleCoords = fromLonLat([-73.98189, 40.76805]);
    const labelTextStroke = "rgba(120, 120, 120, 1)";
    const labelText = "Columbus Circle";
    let pointerOverFeature = null;
    const renderLabelText = (ctx, x, y, stroke) => {
      ctx.fillStyle = "rgba(255,0,0,1)";
      ctx.strokeStyle = stroke;
      ctx.lineWidth = 1;
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.font = `bold 30px verdana`;
      ctx.filter = "drop-shadow(7px 7px 2px #e81)";
      ctx.fillText(labelText, x, y);
      ctx.strokeText(labelText, x, y);
    };
    const circleFeature = new Feature({
      geometry: new Circle(columbusCircleCoords, 50),
    });
    circleFeature.set("label-color", labelTextStroke);
    circleFeature.setStyle(
      new Style({
        renderer(coordinates, state) {
          const [[x, y], [x1, y1]] = coordinates;
          const ctx = state.context;
          const dx = x1 - x;
          const dy = y1 - y;
          const radius = Math.sqrt(dx * dx + dy * dy);
          const innerRadius = 0;
          const outerRadius = radius * 1.4;
          const gradient = ctx.createRadialGradient(
            x,
            y,
            innerRadius,
            x,
            y,
            outerRadius
          );
          gradient.addColorStop(0, "rgba(255,0,0,0)");
          gradient.addColorStop(0.6, "rgba(255,0,0,0.2)");
          gradient.addColorStop(1, "rgba(255,0,0,0.8)");
          ctx.beginPath();
          ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
          ctx.fillStyle = gradient;
          ctx.fill();
          ctx.strokeStyle = "rgba(255,0,0,1)";
          ctx.stroke();
          renderLabelText(ctx, x, y, circleFeature.get("label-color"));
        },
        hitDetectionRenderer(coordinates, state) {
          const [x, y] = coordinates[0];
          const ctx = state.context;
          renderLabelText(ctx, x, y, circleFeature.get("label-color"));
        },
      })
    );
    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
          visible: true,
        }),
        new VectorLayer({
          source: new VectorSource({
            features: [circleFeature],
          }),
        }),
      ],
      target: this.$refs.map,
      view: new View({
        center: columbusCircleCoords,
        zoom: 19,
      }),
    });
    map.on("pointermove", (evt) => {
      const featureOver = map.forEachFeatureAtPixel(evt.pixel, (feature) => {
        feature.set("label-color", "rgba(255,255,255,1)");
        return feature;
      });
      if (pointerOverFeature && pointerOverFeature != featureOver) {
        pointerOverFeature.set("label-color", labelTextStroke);
      }
      pointerOverFeature = featureOver;
    });
  },
};
</script>

2.Proj4js 的单个图像 WMS

为坐标变换集成 Proj4js

查看代码详情

<template>
    <div ref="map" class="map"></div>
  </template>
  
  <script>
  export default {
    mounted() {
      let {
        Feature,
        geom: { Circle },
        Map,
        View,
        layer: { Tile: TileLayer, Image: ImageLayer },
        source: { OSM, ImageWMS },
        control: { ScaleLine, defaults: defaultControls },
        proj: {
          Projection,
          fromLonLat,
          proj4: { register },
        },
      } = ol
      this.$proj4.defs(
        "EPSG:21781",
        "+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 " +
          "+x_0=600000 +y_0=200000 +ellps=bessel " +
          "+towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs"
      )
      register(this.$proj4)
      const projection = new Projection({
        code: "EPSG:21781",
        extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
      })
      const extent = [420000, 30000, 900000, 350000]
      const layers = [
        new ImageLayer({
          extent: extent,
          source: new ImageWMS({
            url: "https://wms.geo.admin.ch/",
            crossOrigin: "anonymous",
            attributions:
              '© <a href="https://shop.swisstopo.admin.ch/en/products/maps/national/lk1000"' +
              'target="_blank">Pixelmap 1:1000000 / geo.admin.ch</a>',
            params: {
              LAYERS: "ch.swisstopo.pixelkarte-farbe-pk1000.noscale",
              FORMAT: "image/jpeg",
            },
            serverType: "mapserver",
          }),
        }),
        new ImageLayer({
          extent: extent,
          source: new ImageWMS({
            url: "https://wms.geo.admin.ch/",
            crossOrigin: "anonymous",
            attributions:
              '© <a href="https://www.hydrodaten.admin.ch/en/notes-on-the-flood-alert-maps.html"' +
              'target="_blank">Flood Alert / geo.admin.ch</a>',
            params: { LAYERS: "ch.bafu.hydroweb-warnkarte_national" },
            serverType: "mapserver",
          }),
        }),
      ]
      const map = new Map({
        controls: defaultControls().extend([new ScaleLine()]),
        layers: layers,
        target: this.$refs.map,
        view: new View({
          projection: projection,
          center: fromLonLat([8.23, 46.86], projection),
          extent: extent,
          zoom: 2,
        }),
      })
    },
  }
  </script>