OpenLayers 天地图 geoserver 多边形绘制获取面积

最新推荐文章于 2025-06-10 09:04:46 发布

原创

最新推荐文章于 2025-06-10 09:04:46 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

这篇博客详细介绍了如何在React应用中结合OpenLayers与Geoserver实现多边形的绘制操作，包括初始化地图、绘制多边形、撤销绘制、结束绘制、清除绘制以及回显已绘制的多边形等功能。

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

OpenLayers+React+GeoServer 地图开发记录

引入Openlayers

npm install ol -S

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {
   
    Circle as CircleStyle, Fill, Stroke, Style, Icon } from 'ol/style';
import {
   
    Draw, Snap} from 'ol/interaction';
import {
   
    Vector as VectorSource } from 'ol/source';
import {
   
    Tile as TileLayer, Vector as VectorLayer, Image } from 'ol/layer';
import ImageWMS from 'ol/source/ImageWMS';
import XYZ from 'ol/source/XYZ';
import {
   
    get} from 'ol/proj';
import Feature from 'ol/Feature';
import Polygon from 'ol/geom/Polygon';
import Overlay from 'ol/Overlay';
import {
   
    getArea } from 'ol/sphere';

初始化

    var projection = get('EPSG:4326');
    //geoserver卫星地图
    const myImageLoader = new Image({
   
   
      source: new ImageWMS({
   
   
        url: '',//地址WMS
        params: {
   
   
          LAYERS: '',//名称
          VERSION: '1.1.1',
          SERVICE: 'WMS',
          REQUEST: 'GetMap',
          FORMAT: 'image/jpeg',
          exceptions: 'application/vnd.ogc.se_inimage',
        },
        serverType: 'geoserver',
      }),
      extent: [minx, miny, maxx, maxy],//边界范围，展示范围，超出范围则不展示，不设置超出部分返回的是白色图片，会覆盖下方天地图图层。
      zIndex: 3,//图层等级
      title: '卫星',
    });
    //天地图影像地图
    var tian_di_tu_satellite_layer = new TileLayer({
   
   
      title: '天地图卫星影像',
      visible: true,
      source: new XYZ({
   
   
        url:
          'http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的key',
      }),
      zIndex: 2,