openlayers4+中高德导航路径的实现
2023-04-18 12:31:21 时间
概述
许久未更新了,今天特此更新一篇,以示我还在,我也会一直在。今天的更新比较简单,就是在openlayers4+中实现类似于高德导航路径的样式。
效果
实现思路
- 用
ol.layer.Vector
的styleFunction
,返回一个styleCollection
; ol.geom.LineString
的getCoordinateAt
接口实现线上等距的箭头展示;- 箭头方向通过
rotation
参数来控制,其计算公式是const angle = (Math.atan2(point0[0] - point[0], point0[1] - point[1])) - Math.PI / 2
实现代码
function styleFunc(feat) {
let styles = []
styles.push(new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#089519',
width: 6
}),
image: new ol.style.Icon({
src:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADFklEQVRYR8WXS2gTURSG/zPt3BQF8bHx0UwixmZSH1AVVNqFVDeKC134Qhd1JbVuRBFBwQqKIIobFV2pYPHRhS5ENyouxAf4ALFNakWTadWV2lVp7tg5Mm0jSTqZV4vN8t7z/+ebc8+5lxCm+EdTnB8TAvhcG0nYH5Doz38O+yGBALKxafOG+M9BMJaCsBrA7LHEv8B4DcLHGqq+EM8N/vAL5BvgkxbZbIGvApjvYf5dAe2rM/IP/ED4Akhrop2AE34MCzEEtCcNedJL4wnQG1MbhpneeRk57VcRr1icM9+7aV0BvsYxU1riOQNLHEw6mPmxvU5EGwDsLo8hoEsosmlhFgOVIFwB0lH1HBEdchBv1w3ZWbye0cQ2AHfLY5n5fKrPPBwKIKOpTwBqLhYzeFXKMN86GaY1dSWB3pTu8VPdMNeHBBC/AcwsEnfqhtzudqYZTdhVsKtR+A3ohpwVGKAnLnS2kC4WEnNbss+87AbQE1X3M9GlEp2CVDIrM066ij3QFZ8+t8oySy4UZt6b6jOvuwGko2oLEV0rjlGrldiiL0NGIAA7OKOJFwDWFgk7dEPu8TiCm2UT0asbsi7wEdiCtCaOEnCmTDxuAgr7zpNAV3Qj3xoKoDuurlEsejlutBwmwXkCAAa3pAzzRiiAsWOwG1F3MOgk5mf2OhOtK+v8f+EmoX5ZTpY0c0mDup3nCEBUHAPhlFdchf07uiF3umm934IEZgxL8QpAKiBEvhrcmKhwaRW8PAFGq6C2gsh1/sfBEU7rOXncC9oXwGgvRJ4D3OhlaO/bj9CgIpsaXB6hQBWwg7ujYodCuO0HwM+FFRhgpAoxcQ+MLa4QhPt6Tm71AzpWLb+hQKZWLIeCpwDmVFD9hIVmvV9+8OvquwcKht2xSJvCfNEpgUV0oD6XL3mIvEACA9iGPTFxixkl802E28mc3OWVsHw/FMDXOGrylrD/CywYM/wWUWRiYRZD/wVgtAqRjcz8cKSRiDYlc/lHQZMHbsLyBBlNnLXXdEMeCZN8wgBhkxbrQvXAZCQOdRFNZuKC119mavcheswzygAAAABJRU5ErkJggg=='
})
}))
const geometry = feat.get('geometry')
if(geometry.getType().toLowerCase() === 'linestring') {
const coords = geometry.getCoordinates()
const length = geometry.getLength()
const res = map.getView().getResolution() * 80
const count = Math.ceil(length / res)
// 添加间断点
for(let i = 1;i < count; i++) {
const frag = i / count
const point = geometry.getCoordinateAt(frag)
const point0 = geometry.getCoordinateAt(frag + frag * 0.05)
const angle = (Math.atan2(point0[0] - point[0], point0[1] - point[1])) - Math.PI / 2
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(point),
image: new ol.style.Icon({
scale: 0.5,
rotation: angle,
snapToPixel: true,
src:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAnElEQVQ4T63TsQ0CMQyF4f/NgMQQ0CBR0FIx190cFIiWhhFoKdgEiRUeSoF0gO8cjkub+Evs2OLPpc9422dgBRwlNZn/BtjeApdOUJsh0QuuwKYWiYAFcAKWHaSR1EbpfAHlkO0ICdMJgV+QXmAAmUu6v9IZA8wkPVKgtg7TF7H25t4UbN+A9ahGmqqVD8AO2GdzUF45+I3ZJJb9JxbwRhEhB66xAAAAAElFTkSuQmCC'
})
}))
}
// 添加起始点
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(coords[0]),
image: new ol.style.Circle({
radius: 12,
fill: new ol.style.Fill({
color: '#1677d8'
})
}),
text: new ol.style.Text({
offsetX: 0,
offsetY: 0,
textAlign: 'center',
textBaseline: 'middle',
text: '起',
font: '12px sans-serif',
fill: new ol.style.Fill({
color: 'white'
})
})
}))
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(coords[coords.length - 1]),
image: new ol.style.Circle({
radius: 12,
fill: new ol.style.Fill({
color: '#bb1422'
})
}),
text: new ol.style.Text({
offsetX: 0,
offsetY: 0,
textAlign: 'center',
textBaseline: 'middle',
text: '终',
font: '12px sans-serif',
fill: new ol.style.Fill({
color: 'white'
})
})
}))
}
return styles
}
相关文章
- 【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下
- CLB运维&运营最佳实践 ---访问日志大洞察
- vnc方式登陆服务器
- 轻松学排序算法:眼睛直观感受几种常用排序算法
- 十二个经典的大数据项目
- 为什么使用 CDN 内容分发网络?
- 大数据——大数据默认端口号列表
- Weld 1.1.5.Final,JSR-299 的框架
- JavaFX 2012:彻底开源
- 提升as3程序性能的十大要点
- 通过凸面几何学进行独立于边际的在线多类学习
- 利用行动影响的规律性和部分已知的模型进行离线强化学习
- ModelLight:基于模型的交通信号控制的元强化学习
- 浅谈Visual Source Safe项目分支
- 基于先验知识的递归卡尔曼滤波的代理人联合状态和输入估计
- 结合网络结构和非线性恢复来提高声誉评估的性能
- 最佳实践丨云开发CloudBase多环境管理实践
- TimeVAE:用于生成多变量时间序列的变异自动编码器
- 具有线性阈值激活的神经网络:结构和算法
- 内网渗透之横向移动 -- 从域外向域内进行密码喷洒攻击