惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

S
Secure Thoughts
罗磊的独立博客
T
The Blog of Author Tim Ferriss
人人都是产品经理
人人都是产品经理
博客园 - 叶小钗
Last Week in AI
Last Week in AI
美团技术团队
Google Online Security Blog
Google Online Security Blog
Application and Cybersecurity Blog
Application and Cybersecurity Blog
D
Docker
G
Google Developers Blog
大猫的无限游戏
大猫的无限游戏
酷 壳 – CoolShell
酷 壳 – CoolShell
小众软件
小众软件
月光博客
月光博客
L
LINUX DO - 最新话题
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
W
WeLiveSecurity
H
Heimdal Security Blog
Vercel News
Vercel News
SecWiki News
SecWiki News
Forbes - Security
Forbes - Security
Blog — PlanetScale
Blog — PlanetScale
Google DeepMind News
Google DeepMind News
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
www.infosecurity-magazine.com
www.infosecurity-magazine.com
TaoSecurity Blog
TaoSecurity Blog
T
Troy Hunt's Blog
A
About on SuperTechFans
C
Check Point Blog
S
Security Affairs
Hacker News - Newest:
Hacker News - Newest: "LLM"
AI
AI
WordPress大学
WordPress大学
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
Help Net Security
Help Net Security
博客园_首页
The Last Watchdog
The Last Watchdog
S
SegmentFault 最新的问题
Hugging Face - Blog
Hugging Face - Blog
Security Archives - TechRepublic
Security Archives - TechRepublic
Engineering at Meta
Engineering at Meta
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
I
Intezer
K
Kaspersky official blog
M
MIT News - Artificial intelligence
J
Java Code Geeks
G
GRAHAM CLULEY
P
Palo Alto Networks Blog

博客园 - 莫小龙

uniapp之plus.downloader.createDownload下载文件传参 谷歌之将网页保存为图片 elementui之table中相同数据的单元格合并 krpano之使用教程 threejs之灯光不跟随OrbitControls控制器旋转 threejs之将张纹理图片组成材质组 canvas之修改Base64图片中不透明部分的颜色 threejs之将PlaneGeometry转换为BufferGeometry threejs之利用shape通过线绘制面和体 threejs之添加渐变背景 threejs之创建发光墙体 paperjs之fitBounds适应区域前后屏幕坐标和输入坐标的转换 arcmap之通过点数据获取等值线 uniapp之安卓APP打开百度地图、高德地图APP geoserver之图片图标样式 SHP转WKT文件工具 openlayers之geoserver的wms图层mysql数据源数据修改后更新问题 通过日照时数计算每天RAD(太阳辐射)值 Uniapp之安卓签名证书(.keystore)生成
openlayer之添加带箭头的线
莫小龙 · 2025-04-16 · via 博客园 - 莫小龙

openlayer之添加带箭头的线

样式代码:

resolution参数用于控制箭头之间的间距
var styles = function(resolution) {
                    var geometry = this.getGeometry();
                    var length = geometry.getLength(); //获取线段长度
                    var radio = (25 * resolution) / length;
                    var dradio = 1; //投影坐标系,如3857等,在EPSG:4326下可以设置dradio=10000
                    var styles = [
                        new ol.style.Style({
                            stroke: new ol.style.Stroke({
                                color: "green",
                                width: 10,
                            })
                        })
                    ];
                    for (var i = 0; i <= 1; i += radio) {
                        var arrowLocation = geometry.getCoordinateAt(i);
                        geometry.forEachSegment(function(start, end) {
                            if (start[0] == end[0] || start[1] == end[1]) return;
                            var dx1 = end[0] - arrowLocation[0];
                            var dy1 = end[1] - arrowLocation[1];
                            var dx2 = arrowLocation[0] - start[0];
                            var dy2 = arrowLocation[1] - start[1];
                            if (dx1 != dx2 && dy1 != dy2) {
                                if (Math.abs(dradio * dx1 * dy2 - dradio * dx2 * dy1) < 0.001) {
                                    var dx = end[0] - start[0];
                                    var dy = end[1] - start[1];
                                    var rotation = Math.atan2(dy, dx);
                                    styles.push(new ol.style.Style({
                                        geometry: new ol.geom.Point(arrowLocation),
                                        image: new ol.style.Icon({
                                            src: 'static/icon/routearrow.png',
                                            anchor: [0.5, 0.5],
                                            scale: 0.075,
                                            rotateWithView: false,
                                            rotation: -rotation + 0.5* Math.PI
                                        })
                                    }));
                                }
                            }
                        });
                    }
                    return styles;
                }

样式调用:

图片文件:

效果:

钻研不易,转载请注明出处。。。。。。