openlayer+虚线、实线_openlayer 虚线-CSDN博客

本文链接：https://blog.csdn.net/qq_41619796/article/details/118958858

本文介绍了如何使用OpenLayers库在地图上动态切换线段的显示样式，包括从实线到虚线的效果转换。通过设置 Stroke 对象的 lineDash 属性，可以轻松创建各种虚线效果。同时，提供了实线样式的实现方法。通过在页面上添加按钮，用户可以点击切换图层以展示不同的线条类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

openlayer实现虚线、实线效果的不同切换

实现效果：

实现步骤：

1、虚线的方法：

lineDash数组可以任意长度，它的奇数代表线的长度，偶数代表间隙长度。通过这个规则，就可以画出各种规则的虚线，如以下效果：
在这里插入图片描述
再举个例子：lineDash: [20, 10, 40, 20]

具体代码：

//虚线
var styleFunction2 = function (feature) {
    var styles = [
        new ol.style.Style({ // 线串的样式
            stroke: new ol.style.Stroke({
                color: '#0509f0',
                width: 2,
                lineDash: [20, 10, 20, 10],
            })
        })
    ];
    // 对线段的每一个子线段都设置箭头样式
    return styles;
};

2、实线的方法：

//实线
var styleFunction1 = function (feature) {
    var styles = [
        new ol.style.Style({ // 线串的样式
            stroke: new ol.style.Stroke({
                color: '#0509f0',
                width: 2
            })
        })
    ];
    // 对线段的每一个子线段都设置箭头样式
    return styles;
};

3、相关所有的代码：

//------------------------定义样式------------------------
//实线
var styleFunction1 = function (feature) {
    var styles = [
        new ol.style.Style({ // 线串的样式
            stroke: new ol.style.Stroke({
                color: '#0509f0',
                width: 2
            })
        })
    ];
    // 对线段的每一个子线段都设置箭头样式
    return styles;
};
//虚线
var styleFunction2 = function (feature) {
    var styles = [
        new ol.style.Style({ // 线串的样式
            stroke: new ol.style.Stroke({
                color: '#0509f0',
                width: 2,
                lineDash: [20, 10, 20, 10],
            })
        })
    ];
    // 对线段的每一个子线段都设置箭头样式
    return styles;
};

//------------------------定义图层------------------------
var zhuanti_tuxing_source = new ol.source.Vector();


//------------------------定义具体图层------------------------
var zhuanti_tuxing_layer_dasher = new ol.layer.Vector({
    source: zhuanti_tuxing_source,
    style: styleFunction2
});
var zhuanti_tuxing_layer_solid = new ol.layer.Vector({
    source: zhuanti_tuxing_source,
    style: styleFunction1
});





//------------------------页面上button------------------------
<button class="nav_li_btn" id="nav_btn1" onclick="changeLineType(0)">实线</button>
<button class="nav_li_btn" id="nav_btn2" onclick="changeLineType(1)">虚线</button>



//------------------------页面上button按钮点击方法------------------------
var changeLineType = function (type) {

    //清理图层的其他效果，试具体需要换成你自己的
    zhuanti_tuxing_layer.getSource().clear();
    map.removeLayer(zhuanti_tuxing_layer);
    map.removeInteraction(zhuanti_tuxing_draw);


    //核心方法，根据你的按钮，选择你的图层
    if(type === 1){
        zhuanti_tuxing_layer = zhuanti_tuxing_layer_dasher
    }else{
        zhuanti_tuxing_layer = zhuanti_tuxing_layer_solid
    }
    
    //地图上添加你的图层
    map.addLayer(zhuanti_tuxing_layer);
}