reactjs - Openlayers ol.interaction.Draw 描边样式
问题描述
我有这个jsfiddle,它能够在完美的地图上绘制多边形。我想不通的是如何设置 .Draw 交互的样式。
目前,我有一条虚线表示用户已经绘制的多边形部分,另一条虚线将第一个绘制点连接到最后一个绘制点。
当我编写样式时,它似乎会影响两条线。
我需要的是一条黑色虚线连接用户已经绘制的点,并且没有线(完全透明)用于将最后一个绘制点连接回第一个绘制点的线。
这是我当前的样式对象:
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 3
}),
image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] }),
stroke: new ol.style.Stroke({
color: [0, 0, 0, 0.5],
width: 1
}),
radius: 4
})
})
我尝试添加颜色和样式数组,但似乎无法正常工作。
有没有人遇到过这个并找到了解决方法?
解决方案
好的,我已经破解了这个,我不得不潜入图书馆的源代码以找出答案,所以我将在这里发布答案,希望它对未来的其他人有所帮助,所以这里是:
我可以看到源代码是,当您使用ol.interaction.Draw
绘制多边形时,会使用多个几何图形。有底层Polygon
,这是具有笔触和填充并显示连接线的位(基于它的笔触样式)。有LineString
一条线显示用户仅绘制的点(没有填充和连接线)。还有一个点,它附着在鼠标指针上。我在 jsfiddle 中留下了一个“console.log()”来显示所有这些。
我创建了这个工作jsfiddle。我所做的是,ol.interaction.Draw
我没有直接在里面设置样式,而是使用了 a styleFunction
(见下面的代码)。我按类型检测每个几何图形并为其设置特定样式。
const styleFunction = feature => {
var geometry = feature.getGeometry();
console.log('geometry', geometry.getType());
if (geometry.getType() === 'LineString') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 1)',
width: 3
})
})
];
return styles;
}
if (geometry.getType() === 'Polygon') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 0)',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 102, 0, 0.3)'
})
})
];
return styles;
}
return false;
};
希望这可以帮助
推荐阅读
- r - Plotly R:使用颜色和转换线图
- sql - Postgres索引字节数组列与varchar
- c++ - 如何将 char 变量添加到字符串?
- reporting-services - 根据我表中的某个值计算百分比
- c++ - 如何根据 .first 值从 std::pair 的 std::vector 中删除元素?
- sql - 带有和不带有聚合的 sql 查询
- r - 我可以将具有两列的向量乘以具有三列和 3939 行的数据库吗?
- php - 使用 IPv6 代理的 curl 不起作用。错误:网络不可达
- python - 不存储函数返回值的 multiprocessing.map 的替代方案
- ios - 我将如何使插入分组的 UITavleView 显示为这样?