React+Openlayers的方法

最新推荐文章于 2024-06-21 10:36:22 发布

Jiesengbb

最新推荐文章于 2024-06-21 10:36:22 发布

阅读量558

点赞数

分类专栏： React+Openlayers React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/LYX_Jiesengbb/article/details/121996621

版权

这篇博客介绍了如何在React应用中结合OpenLayers库进行区域的绘制，包括实现测量面积的功能以及进行查询操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

区域绘制

import {
    Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom';
import WKT from 'ol/format/WKT';
import Draw from 'ol/interaction/Draw';
import Overlay from 'ol/Overlay';
import LinearRing from 'ol/geom/LinearRing';
import {
    drawSource, bufferSource } from '../Components/MyMap/MapLayers/MapLayers';
import './index.less';

let drawOption = {
   };

let drawFeature;

let tooltipElement;

let tooltip;

const endPolygonMsg = '双击结束区域绘制';

const endLineMsg = '双击结束折线绘制';

const handleDrawingHelp = evt => {
   
  if (evt.dragging) {
   
    return;
  }
  let helpMsg = '点击开始绘制';

  if (drawFeature) {
   
    const geom = drawFeature.getGeometry();
    if (geom instanceof Polygon) {
   
      helpMsg = endPolygonMsg;
    } else if (geom instanceof LineString) {
   
      helpMsg = endLineMsg;
    }
  }

  tooltipElement.innerHTML = helpMsg;
  tooltip.setPosition(evt.coordinate);

  tooltipElement.classList.remove('hidden');
};

const createTooltip = map => {
   
  if (tooltipElement) {
   
    tooltipElement.parentNode.removeChild(tooltipElement);
  }
  tooltipElement = document.createElement('div');
  tooltipElement.className = 'ol-tooltip hidden';
  tooltip = new Overlay({
   
    element: tooltipElement,
    offset: [15, 0],
    positioning: 'center-left',
  });
  if (map && Object.keys(map)) {
   
    map.addOverlay(tooltip);
  }
};

// 添加绘制图形交互
export const addInteraction = (map, type, radius, handlerGetMapBuffer) => {
   
  const draw = new Draw({
   
    source: drawSource,
    type, // type: Point、LineString、Polygon、Circle、None
    // maxPoints: 5,
    stopClick: true,
  });
  drawOption = draw;

  // 添加互动
  map.addInteraction(draw);
  createTooltip(map);
  map.renderSync();
  // drawstart
  draw.on('drawstart', e => {
   
    map.renderSync();
    drawSource.clear();
    bufferSource.clear();
    drawFeature = e.feature;
  });
  map.renderSync();
  // drawend
  draw.on('drawend', evt => {
   
    map.renderSync();
    const {
    feature } = evt;
    drawFeature = null;

    if (type !== 'Polygon') {
   
      // jsts已经在document.ejs中引入
      // eslint-disable-next-line no-undef
      const parser = new jsts.io.OL3Parser();
      parser.inject(
        Point,
        LineString,
        LinearRing,
        Polygon,
        MultiPoint,
        MultiLineString,
        MultiPolygon,
      );
      feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
      // convert the OpenLayers geometry to a JSTS geometry
      const jstsGeom = parser.read(feature.getGeometry());

      // create a buffer of 'radius' meters around each line
      const buffered = jstsGeom.buffer(radius);

      // convert back from JSTS and replace the geometry on the feature
      feature.setGeometry(parser.write(buffered));

      feature.getGeometry().transform('EPSG:3857', 'EPSG:4326'

最低0.47元/天解锁文章