点击画笔按钮
开始框画
取当前的裁剪图层为后面的图层
恢复画笔
这里提前引入了Draw
import Draw, { createRegularPolygon, createBox } from "ol/interaction/Draw";
代码如下
<template>
<div class="container">
<div id="vue-openlayers" class="map-x"></div>
<div
id="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>