- 博客(6)
- 收藏
- 关注
RSS订阅原创 使用openlayers绘制带方向箭头导航线（五）
使用openlayers绘制带方向箭头导航线（五） 前言 之前博客中与大家分享了使用数据去绘制导航线的思路及实现，有朋友私信问能否让绘制的导航线的箭头在线上流动起来，接下来就提将思路与大家分享; 实现思路 还是延续之前的思路绘制线与箭头，计算箭头的位置及方向，这边就不再赘述，假如有需要的可以翻看前几篇博文; 监听 ol.layer.vector 的 postrender 事件，即图层渲染结束事件; 当渲染结束事件触发的时候，重新计算下一帧动画中的箭头位置及方向，然后渲染图层; 关键代码分解 通
2021-08-24 16:12:44
1616
3
原创 使用openlayers绘制带方向箭头导航线（四）
使用openlayers绘制带方向箭头导航线（四） 前言 之前博客中与大家分享了使用数据去绘制导航线的思路及实现，本文带来的是使用ol.interaction.Draw在地图上绘制带方向箭头导航线; 实现思路 整体思路先绘制线，然后通过设置线的样式; 计算对应的箭头点的位置及方向; 使用ol.style.Style中的geometry来实现添加箭头点; 关键代码分解 通过注释将关键代码每一步分解; 初始化 //创建图层 this.olSource_line = new VectorSou
2021-07-07 15:26:22
2906
原创 使用openlayers绘制带方向箭头导航线（三）
使用openlayers绘制带方向箭头导航线（三） 前言 前两博客中与大家分享了使用增加了一个点图层绘制导航线的思路及实现，本文将采用另外一种实现方式，设置样式的方式来实现，基本思路与前面两篇中的一致，只是实现方式不同； 该方式的优点在于不用我们使用代码去监控是否重新计算箭头点，而是在style回调函数中去自动触发计算； 实现思路 还是使用上一章的方法，计算每条线上的标记点及旋转方向； 使用ol.style.Style中的geometry来实现添加箭头点； 关键代码分解 通过注释将关键代码每一
2021-07-06 17:50:47
2624
原创 使用openlayers绘制类似高德的带方向箭头导航线（二）
使用openlayers绘制类似高德的带方向箭头导航线（二） 前言 上一篇博客中将绘制导航线的思路及实现与大家分享，然后留了个性能的问题，在这篇文章中解决;首先我们得知道性能问题的根源，是因为随着级别的放大，要计算线上的所有标记点的，这个数量是成几何倍数增加的，因此我们可以从只计算屏幕范围内的点这个思路触发解决。 前期准备 这次我们引入一个新的三方库，熟悉gis的朋友应该都使用过 turf.js ，turf.js是一个非常强大的处理空间数据的框架，有兴趣的朋友可以自己了解下，地址：http://tur
2021-06-25 15:50:55
1105
原创 使用openlayers绘制类似高德的带方向箭头导航线（一）
使用openlayers绘制类似高德的带方向箭头导航线（一） 前言 很久之前写过一个使用openlayers实现绘制类似于高德带方向箭头的导航线的demo，这两天闲来无事，把思路跟代码贴出来分享给大家。 实现思路 首先根据给出的线的经纬度绘制线; 然后通过ol.map带的API getPixelFromCoordinate，获取线的顶点在屏幕的像素位置; 然后获取线上每隔一定间隔像素位置的像素，再通过ol.map带的API getCoordinateFromPixel，获取点的位置; 然后根据计算的
2021-06-25 15:07:35
2405
5
原创 vue项目中使用openlayers创建地图
vue项目中使用openlayers创建地图 前期准备 安装node环境 安装cnpm 安装vue-cli 以上步骤网上都有很多教程 搭建vue项目 vue create vue-ol 按照提示一步步搭建vue项目 cd vue-ol npm run serve 浏览器打开 http://localhost:8080/ 就可以看到初始化的vue项目页面 vue项目安装openlayers cnpm i ol -s main.js中引入ol.css import 'ol/ol.css';
2021-06-18 14:24:20
1099
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人