javascript - 绘制形状时设置 OpenLayers 3 光标样式
问题描述
我有一个功能允许用户在 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);
};
推荐阅读
- pandas - matplotlib pandas:根据另一列值更改数据点之间的宽度
- php - $_POST 请求适用于邮递员,但不适用于 android 应用程序
- popup - 将 Diagflow 与网站集成为弹出窗口
- javascript - 如何在生产 webpack 构建中获取原始函数参数名称
- javascript - 为什么 babel+gulp 包含 polyphils 和 require 方法?
- javascript - JavaScript Chart.JS - 自定义工具提示以在悬停时添加特定数据点的描述
- rest - 使用多个不记名访问令牌的最佳实践
- javascript - 如何处理极高的数字Javascript
- php - 使用 PHP Yii2 为 froala 所见即所得编辑器添加音频插件时出错?
- mysql - 连接表中不存在记录时 SQL 不显示行