###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`
}
},
