openlayers绘制图形添加至地图

`###Map为初始化地图`

import 'ol/ol.css';

import { Feature } from "ol";

import { Circle as CircleStyle, Fill, Stroke, Style, Icon } from 'ol/style';

import { Draw, Modify, Snap } from 'ol/interaction';

import { Vector as VectorSource } from 'ol/source';

import { Vector as VectorLayer } from 'ol/layer';

import GeoJSON from "ol/format/GeoJSON";

import { boundingExtent } from 'ol/extent';

import { Point } from 'ol/geom'

`// 初始化

init (type) {

`//type为绘制类型``

`const _that = this`

//清除次图层

if (_that.iconLayer) {

`_that.iconLayer.getSource().clear()`

}

// 移除绘制方法

Map.removeInteraction(_that.draw);

Map.removeInteraction(_that.snap);

// 创建矢量容器

_that.source = new VectorSource();

//创建矢量层

_that.iconLayer = new VectorLayer({

`source: _that.source,`

`style: this.styleFunction`

});

//创建绘制修改工具

const modify = new Modify({ source: _that.source });

//添加

Map.addInteraction(modify);

//绑定修改绘制图形触发事件

modify.on('modifyend', this.ModifyIconEnd);

//添加绘制工具

_that.addInteractions();

_that.draw = new Draw({

`source: _that.source,` //对应矢量容器

`type: _that.type,` /绘制类型

});

// 此方法用于保存拓扑关系

_that.snap = new Snap({ source: _that.source });

// 添加

Map.addInteraction(_that.draw);

Map.addInteraction(_that.snap);

// 监听绘制结束事件

_that.draw.on("drawend", (evt) => {

// 获取绘制图形，其余同修改时处理数据

let featureGeoJson = new GeoJSON().writeFeature(evt.feature);

});

//图层添加至地图

Map.addLayer(_that.iconLayer)

},

//样式函数

styleFunction (feature) {

const styles = [

`new Style({`

 `fill: new Fill({`

  `color: 'rgba(255, 255, 255, 0.2)',`

 `}),`

 `stroke: new Stroke({`

  `color: 'red',`

  `width: 2,`

 `}),`

 `image: new CircleStyle({`

  `radius: 7,`

  `fill: new Fill({`

   `color: '#ffcc33',`

  `}),`

 `}),`

`}),`

];

// 此处添加箭头样式，绘制线绘制箭头

if (this.type == 'LineString' && this.operate == 'arrow') {

`geometry.forEachSegment(function (start, end) {`

 `const dx = end[0] - start[0];`

 `const dy = end[1] - start[1];`

 `const rotation = Math.atan2(dy, dx);`

 `styles.push(`

  `new Style({`

   `geometry: new Point(end),`

   `image: new Icon({`

    `src: 'e6Images/ship/direction.png',`

    `anchor: [0.75, 0.5],`

    `rotateWithView: true,`

    `rotation: -rotation,`

   `}),`

  `})`

 `);`

`});`

}

//返回样式

return styles;

},

// 修改图形

ModifyIconEnd (evt) {

const _that = this

// 获取修改后的图形，并保存

let featureGeoJson = new GeoJSON().writeFeature(evt.features.array_[0]);

this.featureData = featureGeoJson

//绘制为圆时，无法通过geoJson回显，获取半径和中点回显

if (_that.type == 'Circle') {

`let centerLogLat, radius;`

// 圆的半径换算

`let metersPerUnit =Map.getView().getProjection().getMetersPerUnit();`

`let circle = evt.features.array_[0].getGeometry();`

`centerLogLat = circle.getCenter()`

`radius = circle.getRadius() * metersPerUnit;`

}

//绘制线段取绘制次序中点备用

else if (_that.type == 'LineString') {

`const data = JSON.parse(featureGeoJson)`

`const num = Math.floor(data.geometry.coordinates.length / 2)`

`_that.centerLogLat = data.geometry.coordinates[num]`

}

//绘制区域时获取其中点

else if (_that.type == 'Polygon') {

`let extent = evt.features.array_[0].getGeometry().getCoordinates()[0];`

//获取边界值

`var coor_bound = boundingExtent(extent);`

`var coor_date_x_min = coor_bound[0];`

`var coor_x_dis = (coor_bound[2] - coor_bound[0]) / 2;`

`var coor_date_y_min = coor_bound[1];`

`var coor_y_dis = (coor_bound[3] - coor_bound[1]) / 2;`

`var coor_num = [coor_date_x_min + coor_x_dis, coor_date_y_min + coor_y_dis];`

`_that.centerLogLat = coor_num`

}

},

openlayers绘制图形添加至地图

###Map为初始化地图

推荐阅读更多精彩内容

`###Map为初始化地图`