随笔分类 -  OpenLayers

openlayers学习笔记（十三）— 异步调用JSON数据画点、文字标注与连线
摘要：使用Openlayers 3实现调用本地json数据在地图上添加点、文字标注以及连线。 使用Openlayers 3实现调用本地json数据在地图上添加点、文字标注以及连线。 生成底图地图 生成底图地图 首先得有一个地图作为底图，代码如下： let vectorSource = new ol.sou 阅读全文
posted @ 2019-09-02 16:41 狐狸家的鱼 阅读(1039) 评论(0) 推荐(0)
OpenLayers学习笔记（十二）— 飞机速度矢量线预测（二）
摘要：根据计算公式实现预测线 作者：狐狸家的鱼 GitHub：八至 之前有一篇博客简单写了一个模拟demo，根据物体当前的速度和方向预测多少时间后所在的位置，具体计算是参考《(译)计算距离、方位以及更多经纬度之间的点》，现在重新用计算公式实现，代码如下： let from, to; 在更新数据的位置调用该 阅读全文
posted @ 2019-05-22 10:44 狐狸家的鱼 阅读(601) 评论(0) 推荐(0)
OpenLayers API整理
摘要：整理的Openlayers 的知识笔记，随着运用不断加深理解，也会不断更新。 本文链接：Openlayers API整理 作者：狐狸家的鱼 GitHub：八至 一、创建地图 1、地图Map 创建地图底图：需要用new ol.Map({}) 地图map是由图层layers、一个可视化视图view、用于 阅读全文
posted @ 2019-05-07 10:10 狐狸家的鱼 阅读(13376) 评论(0) 推荐(9)
OpenLayers学习笔记（十一）— 飞机速度矢量线预测
摘要：在机场使用的空管系统中，飞机的速度矢量线差不多是这样的： 模拟飞机飞行时的速度矢量线，这里就大概做个类似效果： 什么叫速度矢量线呢，个人理解就是根据飞机当前速度和航向预测它在未来一段时间内的飞机轨迹，以此来监测飞机是否偏离。 如何运行代码已经在上一篇博客《动态加载JSON数据模拟航迹线》讲过了。 在 阅读全文
posted @ 2019-04-03 16:40 狐狸家的鱼 阅读(1851) 评论(2) 推荐(1)
OpenLayers学习笔记（十）— 动态加载JSON数据模拟航迹线
摘要：在openlayers 3 上，加载本地json数据，动态绘制航迹线，以飞机当前位置为地图中心，此例子是模拟DEMO 本文链接：动态加载JSON数据模拟航迹线 作者：狐狸家的鱼 GitHub：八至 前提需求 需要以JSON数据动态加载绘制飞机轨迹线，飞机图标以加载的坐标为当前实时位置，经过的坐标追加 阅读全文
posted @ 2019-04-02 13:32 狐狸家的鱼 阅读(3501) 评论(1) 推荐(3)
（译）计算距离、方位和更多经纬度之间的点
摘要：计算距离、方位和更多经纬度之间的点。最近在研究预测未来坐标和速度、时间之间的关系，希望这篇文章对地图应用有所帮助。 作者：狐狸家的鱼 本文链接：计算距离、方位和更多经纬度之间的点 原文链接：Calculate distance, bearing and more between Latitude/L 阅读全文
posted @ 2019-03-12 15:16 狐狸家的鱼 阅读(1556) 评论(0) 推荐(0)
OpenLayers学习笔记（九）— 限制地图显示范围
摘要：openlayers 3 地图上限制地图显示及拖动范围，坐标系是4326转3857，中心经纬度精确到小数点后六位，减少误差 GitHub:八至 作者：狐狸家的鱼 本文链接：ol3-限制地图显示及拖动范围 查看extent参数可以知道： 所以可以这样进行设置范围： 并且需要考虑地图投影，比如在WGS8 阅读全文
posted @ 2019-02-14 13:05 狐狸家的鱼 阅读(4876) 评论(1) 推荐(0)
OpenLayers学习笔记（八）— 类似比例尺的距离环（二）
摘要：openlayers 3 地图上创建一个距离环，始终以地图中心为中心，每个环之间的距离类似比例尺，随地图缩放而变化。 添加具有覆盖整个范围的特征的虚拟层，其可以被设置为围绕地图中心的环。 这篇是上一篇距离环文章的拓展和完善 GitHub:八至 作者：狐狸家的鱼 在线预览 这是模仿openlayers 阅读全文
posted @ 2019-01-21 09:56 狐狸家的鱼 阅读(696) 评论(0) 推荐(0)
OpenLayers学习笔记（七）— 类似比例尺的距离环（一）
摘要：openlayers 3 地图上创建一个距离环，始终以地图中心为中心，每个环之间的距离类似比例尺，随地图缩放而变化。 添加具有覆盖整个范围的特征的虚拟层，其可以被设置为围绕地图中心的环。注意，根据地图投影，当真实地图比例发生变化时，环尺寸（甚至形状）可能会根据位置而变化，例如，如果从格陵兰岛移动到非 阅读全文
posted @ 2019-01-07 10:12 狐狸家的鱼 阅读(1182) 评论(2) 推荐(0)
OpenLayers学习笔记（六）— 拖拽叠加层overlayer
摘要：是在官网例子基础上增加的拖拽功能 GitHub:八至 作者：狐狸家的鱼 本文链接：拖拽叠加层overlayer 全部代码 阅读全文
posted @ 2018-12-28 17:16 狐狸家的鱼 阅读(3713) 评论(0) 推荐(0)
OpenLayers学习笔记（五）— 拖拽Feature图层
摘要：参考文档的例子可以知道如何拖动矢量图层feature GitHub: 八至 作者：狐狸家的鱼 本文链接：拖拽Feature图层 全部代码 JSFiddle 阅读全文
posted @ 2018-12-28 17:04 狐狸家的鱼 阅读(3187) 评论(0) 推荐(0)
OpenLayers学习笔记（四）— QML显示html中openlayers地图的坐标
摘要：GitHub:八至 作者：狐狸家的鱼 本文链接：实现QML中显示html中地图的坐标 如何QML与HTML通信已经在这篇文章 QML与HTML通信之画图 详细讲述了 1.HTML 2.QML （1）WebChannel中 （2）label.qml中 阅读全文
posted @ 2018-12-20 17:20 狐狸家的鱼 阅读(1095) 评论(0) 推荐(0)
OpenLayers学习笔记（三）— QML与HTML通信之 地图上点击添加自由文本
摘要：实现在地图随意点击，弹出文本输入框，输入任意文字，完成自由文本添加的功能 作者： 狐狸家的鱼 GitHub:八至 本文链接：地图上点击添加自由文本 关于如何QML与HTML通信已经在上一篇文章 QML与HTML通信之画图 详细讲述了。 1.html 2.QML 在WebChannel添加信号 添加文 阅读全文
posted @ 2018-12-20 17:10 狐狸家的鱼 阅读(846) 评论(0) 推荐(0)
OpenLayers学习笔记（二）— QML与HTML通信之画图
摘要：作者： 狐狸家的鱼 Github： 八至 本文链接：QML与 HTML通信—实现QML中点击功能按钮在地图上画图 一、HTML-map 二、QML 1.创建WebChannel WebControl.qml，此qml页面为创建webchannel 2.将ID分配给WebEngineView，并在该通 阅读全文
posted @ 2018-12-20 16:06 狐狸家的鱼 阅读(1590) 评论(0) 推荐(0)
OpenLayers学习笔记（一）—在线加载谷歌影像地图&离线加载本地瓦片地图
摘要：实现根据在线离线判断加载地图， 在线加载谷歌影响地图， 离线加载本地瓦片地图 作者： 狐狸家的鱼 Github： 八至 实现根据在线离线判断加载地图， 在线加载谷歌影响地图， 离线加载本地瓦片地图 作者： 狐狸家的鱼 Github： 八至 html代码 tabindex="0"是为了启动键盘事件。 阅读全文
posted @ 2018-11-30 17:08 狐狸家的鱼 阅读(4196) 评论(4) 推荐(2)