openlayers 绘图功能，绘制多边形，draw组件的使用，一个简单的需求引发的思考（一）

于 2024-06-11 19:05:28 发布
阅读量763 收藏 5
点赞数 6
分类专栏： openlayers vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_56624286/article/details/139606556
版权

1 需求

使用openlayers绘图功能绘制多边形

2 分析

主要是openlayers中draw功能的使用，感觉比较简单，祖传CV大法搞起来

3 实现

为了方便，就不加载底图了，直接使用绘制功能

2.1 简单实现

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

<script setup lang="ts">
import { Map, View } from 'ol';
import { get } from 'ol/proj';
import { Style } from 'ol/style';
import { Fill, Stroke } from 'ol/style.js';
import Draw from 'ol/interaction/Draw.js';
import { Vector as VectorSource } from 'ol/source.js';
import { Vector as VectorLayer } from 'ol/layer.js';

const projection = get('EPSG:4326');
const source = new VectorSource();
const map = ref();
const draw = ref();

onMounted(() => {
  initMap();
  initDraw();
});

const initMap = () => {
  map.value = new Map({
    target: 'map',
    view: new View({
      center: [116.406393, 39.909006],
      projection: projection,
      zoom: 5
    }),
    layers: [
      new VectorLayer({
        source: source,
        style: new Style({
          stroke: new Stroke({
            color: 'orange',
            width: 2
          }),
          fill: new Fill({
            color: [203, 150, 62, 0.5]
          })
        })
      })
    ]
  });
};

const initDraw = () => {
  draw.value = new Draw({
    source: source,
    type: 'Polygon'
  });
  draw.value.on('drawstart', e => {
    console.log('e', e);
  });
  draw.value.on('drawend', e => {
    console.log('coord', e.feature.getGeometry().getCoordinates());
  });
  map.value.addInteraction(draw.value);
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
  background: #000;
}
</style>

2.2 需求更新1

新需求：

  • 自定义绘制时的样式，没有绘制完成时，显示虚线，顶点增加Point
  • 绘制完成后每个顶点需要显示一个Point

分析：

这里主要是styleFunction的灵活使用

实现:

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

<script setup lang="ts">
import { Map, View } from 'ol';
import { get } from 'ol/proj';
import { Style } from 'ol/style';
import Draw from 'ol/interaction/Draw.js';
import { Vector as VectorSource } from 'ol/source.js';
import { Vector as VectorLayer } from 'ol/layer.js';
import { Circle, Fill, Stroke } from 'ol/style.js';
import {  Point } from 'ol/geom';

const projection = get('EPSG:4326');
const source = new VectorSource();
const map = ref();
const draw = ref();

onMounted(() => {
  initMap();
  initDraw();
});

const initMap = () => {
  map.value = new Map({
    target: 'map',
    view: new View({
      center: [116.406393, 39.909006],
      projection: projection,
      zoom: 5
    }),
    layers: [
      new VectorLayer({
        source: source,
				style: styleFunc
      })
    ]
  });
};

const initDraw = () => {
  draw.value = new Draw({
    source: source,
    type: 'Polygon',
    style: drawStyleFunc
  });
  draw.value.on('drawstart', e => {
    console.log('e', e);
  });
  draw.value.on('drawend', e => {
    console.log('coord', e.feature.getGeometry().getCoordinates());
  });
  map.value.addInteraction(draw.value);
};

const drawStyleFunc = (feature) => {
  const styles = [];
  const coord = feature.getGeometry().getCoordinates();
  for (let i = 0; i < coord.length - 1; i++) {
    styles.push(
      new Style({
        geometry: new Point(coord[i]),
        image: new Circle({
          radius: 4,
          fill: new Fill({
            color: '#ffff'
          }),
          stroke: new Stroke({
            color: 'orange',
            width: 2
          })
        })
      })
    );
  }
  styles.push(
    new Style({
      fill: new Fill({
        color: [255, 255, 255, 0.5]
      }),
      stroke: new Stroke({
        color: 'red',
        lineDash: [10],
        width: 2
      })
    })
  );
  return styles;
};

const styleFunc = (feature) => {
  const styles = [];
  const coord = feature.getGeometry().getCoordinates();
 
    for (let i = 0; i < coord[0].length - 1; i++) {
      styles.push(
        new Style({
          geometry: new Point(coord[0][i]),
          image: new Circle({
            radius: 4,
            fill: new Fill({
              color: '#ffff'
            }),
            stroke: new Stroke({
              color: 'orange',
              width: 2
            })
          })
        })
      );
    }
  styles.push(
    new Style({
      fill: new Fill({
        color: [128, 128, 255, 0.5]
      }),
      stroke: new Stroke({
        color: 'blue',
        width: 2
      })
    })
  );
  return styles;
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
  background: #000;
}
</style>

2.2 需求更新2

新需求：

  • 确定的两个顶点之间变为实线
  • 取消跟随鼠标的Point，影响定位
  • 取消绘制时的填充

分析：

这里主要是styleFunction的灵活使用

实现：

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

<script setup lang="ts">
import { Map, View } from 'ol';
import { get } from 'ol/proj';
import { Style } from 'ol/style';
import Draw from 'ol/interaction/Draw.js';
import { Vector as VectorSource } from 'ol/source.js';
import { Vector as VectorLayer } from 'ol/layer.js';
import { Circle, Fill, Stroke } from 'ol/style.js';
import {  LineString, Point } from 'ol/geom';

const projection = get('EPSG:4326');
const source = new VectorSource();
const map = ref();
const draw = ref();

onMounted(() => {
  initMap();
  initDraw();
});

const initMap = () => {
  map.value = new Map({
    target: 'map',
    view: new View({
      center: [116.406393, 39.909006],
      projection: projection,
      zoom: 5
    }),
    layers: [
      new VectorLayer({
        source: source,
				style: styleFunc
      })
    ]
  });
};

const initDraw = () => {
  draw.value = new Draw({
    source: source,
    type: 'Polygon',
    style: drawStyleFunc
  });
  draw.value.on('drawstart', e => {
    console.log('e', e);
  });
  draw.value.on('drawend', e => {
    console.log('coord', e.feature.getGeometry().getCoordinates());
  });
  map.value.addInteraction(draw.value);
};

const drawStyleFunc = (feature) => {
  const styles = [];
	const type = feature.getGeometry().getType();
  const coord = feature.getGeometry().getCoordinates();
  for (let i = 0; i < coord.length - 1; i++) {
    styles.push(
      new Style({
        geometry: new Point(coord[i]),
        image: new Circle({
          radius: 4,
          fill: new Fill({
            color: '#ffff'
          }),
          stroke: new Stroke({
            color: 'orange',
            width: 2
          })
        })
      })
    );
  }
  if (type === 'LineString') {
    for (let i = 0; i < coord.length - 1; i++) {
      styles.push(
        new Style({
          geometry: new LineString([coord[i], coord[i + 1]]),
          stroke: new Stroke({
            color: 'orange',
            lineDash: coord.length > 2 && i < coord.length - 2 ? [] : [10],
            width: 2
          })
        })
      );
    }
  }
  return styles;
};

const styleFunc = (feature) => {
  const styles = [];
  const coord = feature.getGeometry().getCoordinates();
 
    for (let i = 0; i < coord[0].length - 1; i++) {
      styles.push(
        new Style({
          geometry: new Point(coord[0][i]),
          image: new Circle({
            radius: 4,
            fill: new Fill({
              color: '#ffff'
            }),
            stroke: new Stroke({
              color: 'orange',
              width: 2
            })
          })
        })
      );
    }
  styles.push(
    new Style({
      fill: new Fill({
        color: [128, 128, 255, 0.5]
      }),
      stroke: new Stroke({
        color: 'blue',
        width: 2
      })
    })
  );
  return styles;
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
  background: #000;
}
</style>

存在问题：

  • 在点击鼠标后并且鼠标有移动时，前一段虚线才会变成实线，并且顶点加上Point，因为只有鼠标移动才会有新的坐标点加入到绘制，因为openlayers没有提供绘制过程中的钩子函数，所以只能是当前效果
  • 有需要时drawStyleFunction可以和styleFuntion合并成一个
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值