- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的 LineString 特征由一个笔划设置了样式。其中一些特征代表两件事,所以除了初始笔划颜色之外,我还想在它旁边有一条不同颜色的平行线。如果 ol/style/Stroke
具有像 ol/style/Image
那样的偏移属性,这将是一个明智的选择,但遗憾的是,它没有。如果我为这些特征创建了偏移几何体,它们将不会在缩小的水平上可见。我有哪些选择?
最佳答案
您可以根据分辨率偏移几何图形
var style = function(feature, resolution) {
var colors = ['green', 'yellow', 'red'];
var width = 4;
var styles = [];
for (var line = 0; line < colors.length; line++) {
var dist = width * resolution * (line - (colors.length-1)/2);
var geom = feature.getGeometry();
var coords = [];
var counter = 0;
geom.forEachSegment(function(from, to) {
var angle = Math.atan2(to[1] - from[1], to[0] - from[0]);
var newFrom = [
Math.sin(angle) * dist + from[0],
-Math.cos(angle) * dist + from[1]
];
var newTo = [
Math.sin(angle) * dist + to[0],
-Math.cos(angle) * dist + to[1]
];
coords.push(newFrom);
coords.push(newTo);
if (coords.length > 2) {
var intersection = math.intersect(coords[counter], coords[counter+1], coords[counter+2], coords[counter+3]);
coords[counter+1] = (intersection) ? intersection : coords[counter+1];
coords[counter+2] = (intersection) ? intersection : coords[counter+2];
counter += 2;
}
});
styles.push(
new ol.style.Style({
geometry: new ol.geom.LineString(coords),
stroke: new ol.style.Stroke({
color: colors[line],
width: width
})
})
);
}
return styles;
};
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source,
style: style
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});
map.addInteraction(new ol.interaction.Draw({
source: source,
type: 'LineString'
}));
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.1/math.min.js"></script>
<div id="map" class="map"></div>
相交测试可以防止像这样的锐 Angular 效果
对于特征几何的每个段,样式函数计算平行段设置为 4 个像素,无论分辨率如何(在这种情况下,线宽和间距相同)以原始段为中心的样式几何(例如,如果三种颜色,中心样式线将跟随原始样式线,外部样式线偏移 +/- 4,如果两种颜色,每条线将偏移 +/- 2) 最初,平行线段与原始线段的长度相同,但是需要增加外 Angular 或减少内 Angular ,因此 math.intersect
用于找到它们应该连接以形成连续线的点。最后,对于每种颜色,完整的线串用作颜色样式的几何图形,并返回包含每种样式的数组。
这是第二个示例,其中每条偏移线都有自己的宽度和笔划图案,而不是简单的颜色和固定宽度。
var white = [255, 255, 255, 1];
var blue = [0, 153, 255, 1];
var width = 3;
var pointStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: width * 2,
fill: new ol.style.Fill({
color: blue
}),
stroke: new ol.style.Stroke({
color: white,
width: width / 2
})
}),
zIndex: Infinity
});
var style = function(feature, resolution) {
var widths = [10, 10];
var strokes = [
[
{
width: 4,
color: '#7af500'
}, {
width: 4,
color: '#55aa00',
lineDash: [7,9]
}
], [
{
width: 2,
color: 'black'
}, {
width: 8,
color: 'black',
lineDash: [2,14],
lineCap: 'butt'
}
]
];
var styles = [pointStyle];
var totalWidth = 0
for (var line = 0; line < widths.length; line++) {
totalWidth += widths[line];
}
var width = 0;
for (var line = 0; line < widths.length; line++) {
var dist = (width + widths[line]/2 - totalWidth/2) * resolution;
width += widths[line];
var geom = feature.getGeometry();
if (geom.forEachSegment) {
var coords = [];
var counter = 0;
geom.forEachSegment(function(from, to) {
var angle = Math.atan2(to[1] - from[1], to[0] - from[0]);
var newFrom = [
Math.sin(angle) * dist + from[0],
-Math.cos(angle) * dist + from[1]
];
var newTo = [
Math.sin(angle) * dist + to[0],
-Math.cos(angle) * dist + to[1]
];
coords.push(newFrom);
coords.push(newTo);
if (coords.length > 2) {
var intersection = math.intersect(coords[counter], coords[counter+1], coords[counter+2], coords[counter+3]);
coords[counter+1] = (intersection) ? intersection : coords[counter+1];
coords[counter+2] = (intersection) ? intersection : coords[counter+2];
counter += 2;
}
});
strokes[line].forEach( function(stroke) {
styles.push(
new ol.style.Style({
geometry: new ol.geom.LineString(coords),
stroke: new ol.style.Stroke(stroke)
})
);
});
}
}
return styles;
};
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source,
style: style
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});
map.addInteraction(new ol.interaction.Draw({
source: source,
style: style,
type: 'LineString'
}));
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.1/math.min.js"></script>
<div id="map" class="map"></div>
关于javascript - 开放层 3 : Offset stroke style,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57421223/
看来 OFFSET由于性能低下,不建议在处理大记录时使用类似 WHERE id < x LIMIT y 的东西. 如果是这种情况,为什么 OFFSET 存在,它还有其他用途吗? 最佳答案 从概念上讲,
我用过 objdump -M intel -d test 和 objdump -d test 使用 gcc 686-elf 交叉编译器反汇编一个非常简单的 for 循环。在这两种情况下,我都会得到以下
我正在尝试遵循本指南: https://spark.apache.org/docs/latest/structured-streaming-kafka-integration.html但我不明白为什么
我正在尝试遵循本指南: https://spark.apache.org/docs/latest/structured-streaming-kafka-integration.html但我不明白为什么
这个问题已经有答案了: MySQL Data - Best way to implement paging? (9 个回答) 已关闭 3 年前。 我是 SQL 世界的新手。 现在,我有以下查询: SE
托管我的db 的服务器位于美国。当我向 db 添加项目时,我希望使用 Australia/Sydney 时间存储时间。无论用户在哪个国家/地区,如果他们检索此记录,都应使用 Australia/Syd
我有一个 周边其中也有一些图像,和一段文字。 都是inline-block .每当 H2 延伸到两行时,下一个 是抵消。以下是屏幕截图。 HTML:
我正在尝试使用时区偏移量和 UTC 时间戳来调整时间。 我正在运行以下代码: var date = { utc: '2013-10-16T21:31:51', offset: -480
我不应该在我的应用程序中使用 jQuery,但我有一个场景,我需要元素的偏移量,而不是使用 $(element).offset() 我已经使用了 angular.element(element).of
我有一个包含 ID、NAME、PRICE 和 DATE 列的表。 我正在尝试编写一个分页式导航,因为表中有很多条目,所以查看整个 SELECT 的输出变得不舒服。 我写了以下请求: SELECT id
我现在已经多次看到提到的这段代码,执行 Max(a+1, a-1) 有什么意义?一开始我以为可能是为了防止下溢,但是在那种情况下不防止下溢真的没有意义。 最佳答案 谷歌搜索让我怀疑这可能是由某些(可能
我正在尝试创建一种将时间从一个时区转换为另一个时区的小方法。我认为这很简单,但是当我部署它时我得到了这个错误 The UTC Offset of the local dateTime paramete
我有一个相当复杂的 SQL 查询,涉及从大量连接返回大约 20 列,用于在 UI 中填充结果网格。它还使用几个 CTE 来预过滤结果。我在下面包含了查询的近似值(我已经注释掉了修复性能的行) 随着数据
所以我试图减去 datetime 对象。我使用 dateutil.parser 获得了一个,另一个来自 datetime.now()。我不断得到一个 TypeError: can't subtract
所以我试图减去 datetime 对象。我使用 dateutil.parser 获得了一个,另一个来自 datetime.now()。我不断得到一个 TypeError: can't subtract
我有一个 Pandas 数据框: name my_timestamp ------------------------------------------ 0 a1 201
我只是 Bootstrap 4 的初学者。 我最近才开始学习它,很遗憾,我已经遇到了问题。我修改了 Bootstrap 4 手册本身的一些代码。然而,它惨遭失败,偏移量无法正常工作。代码非常简单,但不
我尝试使用 R 进行回归。我有以下代码,导入 CSV 文件没有问题 dat <- read.csv('http://pastebin.com/raw.php?i=EWsLjKNN',sep="
假设我有 search.php 和 edit.php。在 search.php 中,他们可以删除和更新一些记录。如果用户单击“更新”按钮,系统会将用户重定向到另一个名为 edit.php 的页面。我成
我正在使用流行的 css hack 在 Internet Explorer 8 中启用边框半径,可在此处找到:( Curved-corner-border-radius-cross-browser)。
我是一名优秀的程序员,十分优秀!