logo标签列表

OpenLayers 3：偏移描边样式

javascriptopenlayers-3
3

我有一些仅使用单色笔画样式绘制的LineString要素。其中一些要素表示两个物体，因此除了初始笔画颜色外，我希望在其旁边有一条不同颜色的平行线。如果 ol/style/Stroke 有像 ol/style/Image 那样的偏移属性，这将是易如反掌的，但可悲的是它没有。如果我为这些要素创建偏移几何体，则在缩小的级别下它们将不可见。我的选择是什么？

2个回答
4
您可以根据分辨率偏移几何图形。 

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>

交叉测试可以防止尖角处出现这样的效果。

enter image description here

对于要素几何的每个部分，样式函数会计算平行线段集，使其相距4像素，不考虑分辨率（在这种情况下，线宽和间距相同），用于围绕原始线段居中的样式几何体（例如，如果有三种颜色，则中心样式线将遵循原始线段，外侧样式线偏移+/-4；如果有两种颜色，则每条线都偏移+/-2）。最初，平行线段与原始线段长度相同，但需要在外角增加或在内角缩短，因此使用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>

“var intersection = math.intersect” 中的“math”是什么？我想您不是指“Math”，因为没有“Math.intersect”。 - Ace
没有那个if代码块也可以正常工作，非常好。你能解释一下整段代码的方法学吗？再次感谢。 - Ace
谢谢您解释if块的编辑，但您能否详细说明主要部分的数学计算过程？ - Ace
0

我有一个可以工作的版本 - 但是当我缩放图表时就不行了。

缩放时线条分离

我在图表上绘制线条（来自数据库），并使用我们的函数来绘制这些线条。

我尝试在此处插入代码，但我的JavaScript函数没有运行。如何在代码片段中使用函数？

function print_my_string( my_string )
{

   console.log( my_string );

}
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>

//  How do I use the java-script (Include before called...

<script>print_my_string( "Hello" );</script>

为什么你要把 print_my_string( "Hello" ); 函数调用放在 HTML 的 <script> 块中，而不是编辑器的代码部分？ - Thomas
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接