admin管理员组文章数量:1589775
官网demo 地址：
Extent Interaction
在openlayers中可以使用ExtentInteraction添加交互事件，配合shiftKeyOnly实现按住shift键绘制边界区域。
const map = new Map({
layers: [
new TileLayer({
source: new OSM(),
}),
],
target: "map",
view: new View({
center: [0, 0],
zoom: 2,
}),
});
const extent = new ExtentInteraction({ condition: shiftKeyOnly });
map.addInteraction(extent);
按住shift绘制矩形，按住shift键点击图形删除。
监听extentchanged事件，记录绘制的矩形数据。
// 监听 extentchanged 事件，获取矩形选择范围
extent.on("extentchanged", (event) => {
this.extentData = event.extent;
});
getData() {
console.log("结果", this.extentData);
},完整代码：
<template>
<div class="box">
<h1>Extent Interaction</h1>
<div id="map"></div>
<el-button type="primary" @click="getData">获取数据</el-button>
</div>
</template>
<script>
import ExtentInteraction from "ol/interaction/Extent.js";
import Map from "ol/Map.js";
import OSM from "ol/source/OSM.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import { shiftKeyOnly } from "ol/events/condition.js";
export default {
name: "",
components: {},
data() {
return {
map: null,
extentData: "",
};
},
computed: {},
created() {},
mounted() {
const map = new Map({
layers: [
new TileLayer({
source: new OSM(),
}),
],
target: "map",
view: new View({
center: [0, 0],
zoom: 2,
}),
});
const extent = new ExtentInteraction({ condition: shiftKeyOnly });
map.addInteraction(extent);
// 监听 extentchanged 事件，获取矩形选择范围
extent.on("extentchanged", (event) => {
this.extentData = event.extent;
});
},
methods: {
getData() {
console.log("结果", this.extentData);
},
},
};
</script>
<style lang="scss" scoped>
#map {
width: 100%;
height: 500px;
}
.box {
height: 100%;
}
</style>
版权声明：本文标题：三十九、openlayers官网示例Extent Interaction解析——在地图上绘制范围并获取数据 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1728076060a1144487.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论