openlayers画虚线 (十四)

我就是我 2022-12-24 02:53 775阅读 0赞

在openlayers中画虚线主要是通过设置Style对象中Stroke里的lineDash属性来实现，lineDash在官网文档描述中很模糊，只说了它是一个数组，再尝试后发现规律过来记录一下这个属性。

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

代码如下：

// 创建线因素
    const wireFeature = new Feature({ 
      geometry: new LineString([
        transform([121.501842, 31.239204], 'EPSG:4326', 'EPSG:3857'),
        transform([121.506337, 31.238305], 'EPSG:4326', 'EPSG:3857'),
        transform([121.506606, 31.235846], 'EPSG:4326', 'EPSG:3857'),
        transform([121.500243, 31.236103], 'EPSG:4326', 'EPSG:3857'),
      ]),
    })
    // 创建线样式
    const wireStyle = new Style({ 
      stroke: new Stroke({ 
        width: 2,
        color: '#000000',
        lineDash: [20, 10, 40, 20], // 重点在这
      }),
    })
    // 样式添加进因素中
    wireFeature.setStyle(wireStyle)
    // 在地图中显示
    this.map.addLayer(new VectorLayer({ 
      source: new VectorSource({ 
        features: [wireFeature],
      }),
    }))

[20201126160611665.png_pic_left]: /images/20221120/69d74de879eb48a2be3666e9711fc55f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70_pic_left]: /images/20221120/fa92ec6f820c4cd9b1be57e3995d7231.png

发表评论取消回复

表情：

评论列表（有 0 条评论，775人围观）

还没有评论，来说两句吧...

相关阅读

相关 openlayers 入门教程（十四）：第三方插件

Openlayers第三方插件的开发和维护状态经常更新，直接提供每个插件的详细网址和介绍可能会过时。不过，我可以引导你如何找到这些信息，并提供一些已知的、有影响力的第三方...

电玩女神/ 2024年05月09日 16:29/ 0 赞/ 57 阅读

相关 php虚线园的代码,canvas画虚线圆

本文要实现的图形 ![bVFVJg?w=121&h=122][bVFVJg_w_121_h_122] 一个简单的占比统计。。实现的方案是html js合成首先是简单

本是古典何须时尚/ 2023年01月17日 04:55/ 0 赞/ 264 阅读

相关 openlayers画虚线 (十四)

在openlayers中画虚线主要是通过设置Style对象中Stroke里的lineDash属性来实现，lineDash在官网文档描述中很模糊，只说了它是一个数组，再尝试后发现

我就是我/ 2022年12月24日 02:53/ 0 赞/ 776 阅读

相关 html5画一个圆点,HTML5 Canvas绘制圆点虚线实例

HTML5 Canvas 提供了很多图形绘制的函数，但是很可惜，Canvas API只提供了画实线的函数(lineTo)，却并未提供画虚线的方法。这样的设计有时会带来很大的不便

ゝ一世哀愁。/ 2022年10月05日 12:46/ 0 赞/ 215 阅读

相关超链接 a标签虚线框虚线去除虚线框

当一个链接得到焦点时，默认会有个虚线框。如图： ![链接虚线框][hide-link-outline.gif] 在 Firefox 里可以用 -moz-outline:no

短命女/ 2022年09月30日 03:54/ 0 赞/ 221 阅读

相关 React-Native中非常贱的画虚线的方式

React-Native中非常贱的画虚线的方式在使用react-native中的时候,使用css画虚线的时候,警告提示不支持,提示信息如下所示: ![70][] 然后

小鱼儿/ 2022年05月04日 09:27/ 0 赞/ 351 阅读

相关 Android画虚线攻略

一般我们在Android画虚线有两种方式 1.布局里面画虚线：在drawable里面创建一个dotted\_line\_view.xml文件，里面内容如下： <?x

àì夳堔傛蜴生んèń/ 2022年04月27日 19:04/ 0 赞/ 2162 阅读

相关 openlayes3在地图上画点线

地图是由图层组成的，而图层又分为ol.layer.Tile和ol.layer.Vector,ol.layer.Tile可以构建底图，ol.layer.Vector指定矢量图层，

悠悠/ 2022年04月22日 02:08/ 0 赞/ 405 阅读

相关小程序canvas画虚线圆

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

约定不等于承诺〃/ 2021年12月11日 13:13/ 0 赞/ 431 阅读

相关用HTML5的canvas标签画虚线

原生代码 function drawDashLine(ctx, x1, y1, x2, y2, dashLength){ //ctx 声明的

深藏阁楼爱情的钟/ 2021年09月14日 09:26/ 0 赞/ 638 阅读