[英]Style OpenLayers 3 cursor when drawing shapes
我有一個功能,允許用戶在OpenLayers地圖上繪制正方形或矩形。 我想更改光標的樣式。 默認情況下,光標為藍色圓圈。 我想將其更改為正方形,以便符號系統與用戶可能創建的形狀匹配。
該解決方案涉及添加樣式屬性。 我需要有關如何為非圖像游標實現樣式屬性的細節,該游標類似於默認的藍色圓圈,而是一個正方形。 謝謝!
$scope.drawBoundingBox = () => {
const bbVector = new ol.source.Vector({ wrapX: false });
const vector = new ol.layer.Vector({
source: bbVector
});
bbVector.on("addfeature", evt => {
$scope.coords = evt.feature.getGeometry().getCoordinates();
});
const style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: "#FFF",
width: 3
}),
fill: new ol.style.Fill({
color: [255, 255, 255, 0]
})
});
const geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
draw = new ol.interaction.Draw({
source: bbVector,
type: "Circle",
geometryFunction
});
vector.set("name", "boundingBox");
vector.setStyle(style);
map.addLayer(vector);
map.addInteraction(draw);
};
這是一個有效的解決方案,它將默認的藍色圓圈光標更改為正方形,並允許用戶在地圖上創建正方形或矩形。
$scope.drawBoundingBox = () => {
const bbVector = new ol.source.Vector({ wrapX: false });
const vector = new ol.layer.Vector({
source: bbVector
});
bbVector.on("addfeature", evt => {
$scope.coords = evt.feature.getGeometry().getCoordinates();
});
const geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
draw = new ol.interaction.Draw({
source: bbVector,
type: "Circle",
geometryFunction: geometryFunction,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: "#FFF",
width: 3
}),
fill: new ol.style.Fill({
color: [255, 255, 255, 0]
}),
geometryFunction,
image: new ol.style.RegularShape({
fill: new ol.style.Fill({
color: '#FFF'
}),
stroke: new ol.style.Stroke({
color: "blue",
width: 3
}),
points: 4,
radius: 10,
angle: Math.PI / 4
}),
}),
});
vector.set("name", "boundingBox");
map.addLayer(vector);
map.addInteraction(draw);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.