点击画笔按钮
开始框画
取当前的裁剪图层为后面的图层
恢复画笔
这里提前引入了Draw

javascript">import Draw, { createRegularPolygon, createBox } from "ol/interaction/Draw";

代码如下

javascript">
<template><div class="container"><div id="vue-openlayers" class="map-x"></div><divid="info-box"class="info-box"style="width: 100px; height: 100px"></div><div id="canv" style="width: 100px; height: 100px"></div><div class="btn"><el-button type="primary" @click="drawLine"> 画塘口</el-button><el-button type="primary" @click="huanyuan"> 还原 </el-button></div></div>
</template>
<script>
import "ol/ol.css";
import { Map, View, style, Feature, geom, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { Vector as VectorSource } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import { Point, LineString } from "ol/geom";
import { Style, Icon, Stroke, Text, Fill } from "ol/style";
import logo from "@/assets/logo.png";
import * as ol from "ol";
import "ol-ext/dist/ol-ext.css";import Draw, { createRegularPolygon, createBox } from "ol/interaction/Draw";
export default {name: "FirstMap",data() {return {map: null,draw: null,maskLayer: null,logo,layers: [],};},methods: {initMap() {let that = this;// 将图标样式应用到点要素const features = [];const point = new Point([108.56, 34.15]); // 修改坐标格式const feature = new Feature({geometry: point,custom: { data: "123", type: "icon" },type: "icon",});feature.setStyle([new Style({image: new Icon({crossOrigin: "anonymous",src: this.logo,// size: [40, 40],scale: 0.2, // 图标缩放比例}),}),]);features.push(feature);//设置地图的数据源const source = new VectorSource({features,});let markLayerPoints = new VectorLayer({source: source,});let map = new Map({target: "vue-openlayers",layers: [new TileLayer({source: new XYZ({url: "https://gdtc.shipxy.com/tile.g?l=en&m=d&z={z}&x={x}&y={y}",}),}),markLayerPoints, // 确保图层顺序正确// vectorLayers,],view: new View({projection: "EPSG:4326",center: [108.56, 34.15], // 修改中心坐标格式zoom: 6,}),});this.map = map;},// 变成画笔drawLine() {let that = this;const draw = new Draw({source: new VectorSource(),type: "Polygon",name: "huizong",});that.map.addInteraction(draw);that.draw = draw;that.draw.on("drawend", function (event) {const polygon = event.feature.getGeometry();that.clipMap(polygon);});},// 取当前地图的裁剪图层为下一次的图层clipMap(polygon) {console.log(polygon,'polygon');const extent = polygon.getExtent();console.log(extent,'extentextentextent');// 设置图层的可见范围const layer = this.map.getLayers().item(0); // 获取第一个图层console.log(layer, "layerlayerlayer");layer.setExtent(extent);// 更新地图视图以适应绘制的区域this.map.getView().fit(extent, { padding: [50, 50, 50, 50], duration: 500 });this.map.updateSize();this.cancelDraw();},// 还原画笔cancelDraw() {let that = this;// 从地图中移除绘制交互that.map.removeInteraction(that.draw);// 如果需要，可以清除源中的所有要素// that.draw.getSource().clear(true);},huanyuan() {console.log(this.map.getLayers().getArray(), "layerlayerlayer");const layer = this.map.getLayers().item(0); // 获取第一个图层layer.setExtent(this.map.getView().getProjection().getExtent());},
},mounted() {this.initMap();},
};
</script>
<style scoped lang="scss">
.input {position: fixed;top: 10px;right: 10px;border-radius: 10px;background: #fff;display: flex;flex-direction: column;padding: 5px;padding-bottom: 10px;> * {margin-top: 10px;display: flex;align-items: center;}
}
</style><style scoped lang="scss">
.container {position: relative;.btn {position: absolute;left: 4%;top: 1%;}
}#vue-openlayers {width: 100vw;height: 100vh;
}h3 {line-height: 40px;
}/* 隐藏信息盒子的初始样式 */
#info-box {display: none;position: absolute;background: white;border: 1px solid black;padding: 10px;border-radius: 5px;font-size: 14px;pointer-events: none; /* 防止信息盒子影响鼠标事件 */
}
</style>