openlayer提供了Draw类来实现地图绘制点、线、面、圆等功能。
//定义绘制图层
var lineLayer = new VectorLayer({
properties: { name: "lineLayer", isClick: false },
source: new VectorSource(),
style: new Style({
fill: new Fill({
color: "#ffffffcc",
}),
stroke: new Stroke({
color: "#0099ff",
size: 1,
}),
//image是设置点的样式
image: new Circle({
radius: 7,
fill: new Fill({
color: "#ffffffcc",
}),
stroke: new Stroke({
color: "#0099ff",
width: 2,
}),
}),
}),
});
this.map.addLayer(lineLayer);
//定义绘制类
this.lineDraw = new Draw({
type: "Polygon", // 默认支持:Point(点)、LineString(线)、Polygon(面)和Circle(圆)。
source: lineLayer.getSource(),
style: new Style({
fill: new Fill({
color: "#ffffffcc",
}),
stroke: new Stroke({
color: "#0099ff",
width: 2,
}),
image: new Circle({
radius: 7,
fill: new Fill({
color: "#0099ff",
}),
}),
}),
// maxPoints: 4 // 限制不超过4个点
});
// 监听线绘制结束事件,获取坐标
this.lineDraw.on("drawstart", (event) => {
this.overTipLayer.getElement().innerHTML = "提示:右击结束绘制"; //定义的绘制提示框,
lineLayer.getSource().clear();
});
this.lineDraw.on("drawend", (event) => {
const geometry = event.feature.getGeometry();
this.map.selectFeature(geometry); //高亮
// event.feature 就是当前绘制完成的线的Feature
//构建查询
const region = this.getSupermapRegion(geometry);
this.executeSpatialQuery(dataUrl, region, false).then((query) => {
const result = query.result.features;
callback(result);
});
this.lineDraw.abortDrawing(); //销毁工具
this.lineDraw.setActive(false); //设置状态
this.map.removeInteraction(this.lineDraw); //清除绘制监听
this.removeLineLayer();
this.overTipLayer.getElement().innerHTML = "";
});
//右键事件 此事件主要关闭右击弹窗
this.map.on("contextmenu", (e) => {
e.preventDefault();
});
this.map.addInteraction(this.lineDraw);
自定义绘制矩形方法
drawRectangle() {
//设置maxPoints及geometryFunction
var maxPoints, geometryFunction;
maxPoints = 2;
geometryFunction = function (coordinates, geometry) {
//设置起始点及终止点
var start = coordinates[0];
var end = coordinates[1];
if (!geometry) {
var lonLatArr = [
[start, [start[0], end[1]], end, [end[0], start[1]], start], //特别注意,长方形终止点与起始点重合
];
geometry = new Polygon(lonLatArr);
}
geometry.setCoordinates([
[start, [start[0], end[1]], end, [end[0], start[1]], start], //特别注意,长方形终止点与起始点重合
]);
return geometry;
};
// 添加一个绘制的线使用的layer
var lineLayer = new VectorLayer({
source: new VectorSource(),
properties: { name: "lineLayer", isClick: false },
style: new Style({
fill: new Fill({
color: "#ffffffcc",
}),
stroke: new Stroke({
color: "#0099ff",
size: 1,
}),
//image是设置点的样式
image: new Circle({
radius: 7,
fill: new Fill({
color: "#ffffffcc",
}),
stroke: new Stroke({
color: "#0099ff",
width: 2,
}),
}),
}),
});
this.map.addLayer(lineLayer);
this.lineDraw = new Draw({
source: lineLayer.getSource(),
style: new Style({
fill: new Fill({
color: "#ffffffcc",
}),
stroke: new Stroke({
color: "#0099ff",
width: 2,
}),
image: new Circle({
radius: 7,
fill: new Fill({
color: "#0099ff",
}),
}),
}),
type: "LineString",
geometryFunction: geometryFunction,
maxPoints: maxPoints,
});
// 监听线绘制结束事件,获取坐标
this.lineDraw.on("drawstart", (event) => {
this.overTipLayer.getElement().innerHTML = "提示:右击结束绘制";
lineLayer.getSource().clear();
});
this.lineDraw.on("drawend", (event) => {
const geometry = event.feature.getGeometry();
this.map.selectFeature(geometry); //高亮
// event.feature 就是当前绘制完成的线的Feature
//构建查询
const region = this.getSupermapRegion(geometry);
this.executeGeojson(region);
this.lineDraw.abortDrawing();
this.lineDraw.setActive(false);
this.map.removeInteraction(this.lineDraw);
this.map.removeLayer(lineLayer);
this.overTipLayer.getElement().innerHTML = "";
});
//右键事件
this.map.on("contextmenu", (e) => {
e.preventDefault();
});
//将layer和interaction添加到地图中
this.map.addLayer(lineLayer);
this.map.addInteraction(this.lineDraw);
},
鼠标提示条方法
//鼠标移动提示条
addTooltip() {
let elment = document.createElement("div");
elment.className = "tipClass";
this.overTipLayer = new Overlay({
element: elment,
positioning: "center-left", //弹窗位置
stopEvent: false,
});
this.map.addOverlay(this.overTipLayer);
//地图中鼠标悬浮移动事件
this.map.on("pointermove", (evt) => {
if (this.overTipLayer) {
// this.overlayLayer.getElement().innerHTML = '指示弹窗里的内容'
this.overTipLayer.setPosition(evt.coordinate);
}
});
},