vue+openlayer实现地图框选、多选
<template><div id="map"><el-button @click="addLayer()">添加图层</el-button><el-button @click="removeLayer()">移除图层</el-button><el-button @click="addInteraction()">
·
一,地图框选
效果图
添加交互时要按住Ctrl键,再拖动鼠标
在线预览:WebGIS之家WebGIS之家,openlayers示例源码,cesium示例源码,openlayers在线调试预览,cesium在线调试预览,webgis,数字地球,数字孪生https://www.webgishome.com/preview?id=90&example_name=dragBox_feature&title=dragBox%E6%A1%86%E9%80%89%E8%A6%81%E7%B4%A0
实现代码:
<template>
<div id="map">
<el-button @click="addLayer()">添加图层</el-button>
<el-button @click="removeLayer()">移除图层</el-button>
<el-button @click="addInteraction()">添加交互</el-button>
<el-button @click="removeInteraction()">移除交互</el-button>
</div>
</template>
<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector.js";
import { OSM, Vector as VectorSource } from "ol/source";
import { defaults as defaultControls } from "ol/control";
import ZoomSlider from "ol/control/ZoomSlider";
import GeoJSON from "ol/format/GeoJSON";
import Select from "ol/interaction/Select";
import DragBox from "ol/interaction/DragBox";
import { platformModifierKeyOnly } from "ol/events/condition";
export default {
name: "",
data() {
return {
map: null,
select: {},
dragBox: {},
vectorSource: {},
vectorLayer: {},
selectedFeatures: [],
};
},
mounted() {
this.initMap();
},
methods: {
addLayer() {
this.vectorLayer = new VectorLayer({
source: this.vectorSource,
zIndex: 2,
});
this.map.addLayer(this.vectorLayer);
},
removeLayer() {
this.map.removeLayer(this.vectorLayer);
},
addInteraction() {
this.select = new Select();
this.selectedFeatures = this.select.getFeatures();
this.dragBox = new DragBox({ condition: platformModifierKeyOnly });
this.map.addInteraction(this.select);
this.map.addInteraction(this.dragBox);
this.dragBox.on("boxend", () => {
let extent = this.dragBox.getGeometry().getExtent();
this.vectorSource.forEachFeatureIntersectingExtent(
extent,
(feature) => {
this.selectedFeatures.push(feature);
}
);
});
this.dragBox.on("boxstart", () => {
this.selectedFeatures.clear();
});
},
removeInteraction() {
this.selectedFeatures.clear();
this.map.removeInteraction(this.select);
this.map.removeInteraction(this.dragBox);
},
// 初始化地图
initMap() {
let view = new View({
projection: "EPSG:4326",
center: [115, 39],
zoom: 4,
});
let layer = new TileLayer({
source: new OSM(),
visible: true,
zIndex: 1,
name: "OSM",
});
let vectorSource = new VectorSource({
url: "sichuan.json",
format: new GeoJSON(),
});
this.vectorSource = vectorSource;
this.map = new Map({
layers: [layer],
target: "map",
view: view,
controls: defaultControls().extend([new ZoomSlider()]),
});
},
},
};
</script>
<style scoped>
#map {
height: 100vh;
width: 100vw;
}
</style>
记得在public文件夹中放一个sichuan.json的文件
千万要注意this的指向,在用箭头函数时,里面的this指向的是外层的vue实例
二,多选
控制多选:设置select对象的属性:
condition: click, //单击选择。点击空白处,会取消选择 toggleCondition: click,//点击空白处,不会取消选择
将示例1的代码更改如下即可:
import { click } from "ol/events/condition";
addInteraction() {
this.select = new Select({ condition: click, toggleCondition: click });
this.selectedFeatures = this.select.getFeatures();
this.map.addInteraction(this.select);
}
removeInteraction() {
this.selectedFeatures.clear();
this.map.removeInteraction(this.select);
},
所有代码如下所示:
<template>
<div id="map">
<el-button @click="addLayer()">添加图层</el-button>
<el-button @click="removeLayer()">移除图层</el-button>
<el-button @click="addInteraction()">添加交互</el-button>
<el-button @click="removeInteraction()">移除交互</el-button>
</div>
</template>
<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector.js";
import { OSM, Vector as VectorSource } from "ol/source";
import { defaults as defaultControls } from "ol/control";
import ZoomSlider from "ol/control/ZoomSlider";
import GeoJSON from "ol/format/GeoJSON";
import Select from "ol/interaction/Select";
import { click } from "ol/events/condition";
export default {
name: "",
data() {
return {
map: null,
select: {},
dragBox: {},
vectorSource: {},
vectorLayer: {},
selectedFeatures: [],
};
},
mounted() {
this.initMap();
},
methods: {
addLayer() {
this.vectorLayer = new VectorLayer({
source: this.vectorSource,
zIndex: 2,
});
this.map.addLayer(this.vectorLayer);
},
removeLayer() {
this.map.removeLayer(this.vectorLayer);
},
addInteraction() {
this.select = new Select({ condition: click, toggleCondition: click });
this.selectedFeatures = this.select.getFeatures();
this.map.addInteraction(this.select);
},
removeInteraction() {
this.selectedFeatures.clear();
this.map.removeInteraction(this.select);
},
// 初始化地图
initMap() {
let view = new View({
projection: "EPSG:4326",
center: [115, 39],
zoom: 4,
});
let layer = new TileLayer({
source: new OSM(),
visible: true,
zIndex: 1,
name: "OSM",
});
let vectorSource = new VectorSource({
url: "sichuan.json",
format: new GeoJSON(),
});
this.vectorSource = vectorSource;
this.map = new Map({
layers: [layer],
target: "map",
view: view,
controls: defaultControls().extend([new ZoomSlider()]),
});
},
},
};
</script>
<style scoped>
#map {
height: 100vh;
width: 100vw;
}
</style>
效果图:
参考:
更多推荐
已为社区贡献65条内容
所有评论(0)