实现步骤：

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

openlayer+虚线、实线相关推荐

【计算机图形学】六面体旋转并实时切换虚线实线 - 代码实现
第一章作业背景 1.1 作业要求编程实现一个多面体的旋转.在多面体的旋转过程中,对于不可见的线,用虚线表示:对于可见的线,用实线表示. 1.2 开发技术本次作业采用前端技术实现,主要有: ...
java uml类图虚线实线_终于明白六大类UML类图关系了
UML,全称Unified Modeling Language,统一建模语言.而UML图分为用例图.类图.对象图.状态图.活动图.时序图.协作图.构件图.部署图等9种图. 在面向对象语言中,我们经常看 ...
matlab虚线分格线,虚线实线网格线……一分钟看懂路面标志线，不再被扣分！
黄色实线黄色实线用来区分不同方向的车道,一般画在马路正中间,车道多的路面上就是双黄线,车道少的路面上则用单黄线.而无论单黄线还是双黄线,均严格禁止车辆跨越,因此压线行驶.超车或者掉头等都是不允许的. ...
vue eacharts折线图实线加虚线实线区域渐变色添加虚线
<div id="myChart"></div>this.drawLine();drawLine() {// 基于准备好的dom,初始化echarts实例l ...
Echarts折线图虚线实线合并
配置: option = {xAxis: {},yAxis: {},series: [{// 每个点得横纵坐标data: [[1, 1],[2, 2],[3, 3]],type: 'line',col ...
android进度条动画圆环虚线,实线和虚线进度条控件 Android CircleProgressBar
软件介绍 CircleProgressBar继承ProgressBar, 是包含实心和线条两种风格的圆环进度条. 此外, 进度值可以随意定制. 如果你对酷炫的进度条比较感兴趣, 或许你更喜欢 Load ...
html div虚线背景,关于CSS（DIV属性，背景，连接，边框，虚线，实线，布局与命名）...
div属性 div属性 color : #999999 文字颜色 font-family : 宋体文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 ...
echarts折线图实线与虚线拼接及提示框浮层内容格式的设置
echarts折线图实线与虚线拼接及提示框浮层内容格式的设置想要实现实线与虚线的结合,后端返回的数据是动态的,根据状态的不同展示实线与虚线. 例子1: 数据是固定的 series: [{name:' ...
html 一行显示边框线,HTML 网页中要显示出来一个虚线的边框就是一行字在边框里面，那个边框是显示出来的，程式码应该怎么写？...
HTML 网页中要显示出来一个虚线的边框就是一行字在边框里面,那个边框是显示出来的,程式码应该怎么写?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内 ...

openlayer+虚线、实线

前言：

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

实现效果：

实现步骤：

1、虚线的方法：

具体代码：

2、实线的方法：

3、相关所有的代码：

openlayer+虚线、实线相关推荐

最新文章

热门文章