openlayers
关注
分享
扫一扫
DebJane
做人嘛，最重要的是开心
展开
-
OpenLayers学习笔记（一）—在线加载谷歌影像地图&离线加载本地瓦片地图
OpenLayers学习笔记（一）—在线加载谷歌影像地图&离线加载本地瓦片地图实现根据在线离线判断加载地图， 在线加载谷歌影响地图， 离线加载本地瓦片地图 作者： 狐狸家的鱼 Github： 八至html代码<div id="map" tabindex="0" class="map"></div>tabindex="0"是为原创 2018-11-30 17:08:00 · 2875 阅读 · 0 评论 -
OpenLayers学习笔记（十二）— 飞机速度矢量线预测（二）
之前有一篇博客简单写了一个模拟demo，根据物体当前的速度和方向预测多少时间后所在的位置，具体计算是参考《(译)计算距离、方位以及更多经纬度之间的点》，现在重新用计算公式实现，代码如下： let from, to;let createVelLine = obj => { const DEG2RAD = Math.PI / 180; const RAD2DEG = 1...原创 2019-05-22 10:44:55 · 512 阅读 · 0 评论 -
Openlayers API整理
一、创建地图1、地图Map创建地图底图：需要用new ol.Map({})地图map是由图层layers、一个可视化视图view、用于修改地图内容的交互interaction以及使用UI组件的控件control组成的。（1）、创建基本地图let map = new ol.Map({ target: 'map',//对象指向 layers: [//图层 new ...原创 2019-05-09 10:04:01 · 1938 阅读 · 1 评论 -
OpenLayers学习笔记（十）— 动态加载JSON数据模拟航迹线
在openlayers 3 上，加载本地json数据，动态绘制航迹线，以飞机当前位置为地图中心，此例子是模拟DEMO本文链接：动态加载JSON数据模拟航迹线作者：狐狸家的鱼GitHub：八至前提需求需要以JSON数据动态加载绘制飞机轨迹线，飞机图标以加载的坐标为当前实时位置，经过的坐标追加到轨迹线上，标牌始终跟随飞机移动。简单搭建本地服务器因为要加载本地J...原创 2019-04-03 09:46:33 · 1107 阅读 · 0 评论 -
OpenLayers学习笔记（十一）— 飞机速度矢量线预测
在机场使用的空管系统中，飞机的速度矢量线差不多是这样的：模拟飞机飞行时的速度矢量线，这里就大概做个类似效果：什么叫速度矢量线呢，个人理解就是根据飞机当前速度和航向预测它在未来一段时间内的飞机轨迹，以此来监测飞机是否偏离。如何运行代码已经在上一篇博客《动态加载JSON数据模拟航迹线》讲过了。在这个模拟DEMO中，主要存在四个图层，分别为地图底图、航迹线图层、...原创 2019-04-08 08:58:13 · 1201 阅读 · 5 评论 -
（译）计算距离、方位和更多经纬度之间的点
（译）计算距离、方位和更多经纬度之间的点计算距离、方位和更多经纬度之间的点。最近在研究预测未来坐标和速度、时间之间的关系，希望这篇文章对地图应用有所帮助。作者：狐狸家的鱼本文链接：计算距离、方位和更多经纬度之间的点原文链接：Calculate distance, bearing and more between Latitude/Longitude pointsGitHub：...原创 2019-03-26 09:21:56 · 2434 阅读 · 0 评论 -
OpenLayers学习笔记（九）— 限制地图显示范围
OpenLayers学习笔记（九）— 限制地图显示范围openlayers 3 地图上限制地图显示及拖动范围，坐标系是4326转3857，中心经纬度精确到小数点后六位，减少误差GitHub:八至作者：狐狸家的鱼本文链接：ol3-限制地图显示及拖动范围查看extent参数可以知道：所以可以这样进行设置范围：var view = new ol.View({ ...原创 2019-02-14 13:05:00 · 3277 阅读 · 2 评论 -
OpenLayers学习笔记（八）— 类似比例尺的距离环（二）
OpenLayers学习笔记（八）— 类似比例尺的距离环（二）openlayers 3 地图上创建一个距离环，始终以地图中心为中心，每个环之间的距离类似比例尺，随地图缩放而变化。添加具有覆盖整个范围的特征的虚拟层，其可以被设置为围绕地图中心的环。这篇是上一篇距离环文章的拓展和完善GitHub:八至作者：狐狸家的鱼在线预览这是模仿openlayers插件库ol-e...原创 2019-01-21 09:56:00 · 627 阅读 · 0 评论 -
OpenLayers学习笔记（六）— 拖拽叠加层overlayer
OpenLayers学习笔记（六）— 拖拽叠加层overlayer是在官网例子基础上增加的拖拽功能GitHub:八至作者：狐狸家的鱼本文链接：拖拽叠加层overlayer全部代码<!DOCTYPE html><html> <head> <title>Icon Symbolizer</title&g...原创 2018-12-28 17:16:00 · 2559 阅读 · 0 评论 -
OpenLayers学习笔记（五）— 拖拽Feature图层
OpenLayers学习笔记（五）— 拖拽Feature图层参考文档的例子可以知道如何拖动矢量图层featureGitHub: 八至作者：狐狸家的鱼本文链接：拖拽Feature图层全部代码<!DOCTYPE html><html> <head> <title>Icon Symbolizer</ti...原创 2018-12-28 17:04:00 · 1486 阅读 · 0 评论 -
OpenLayers学习笔记（七）— 类似比例尺的距离环
OpenLayers学习笔记（七）— 类似比例尺的距离环openlayers 3 地图上创建一个距离环，始终以地图中心为中心，每个环之间的距离类似比例尺，随地图缩放而变化。添加具有覆盖整个范围的特征的虚拟层，其可以被设置为围绕地图中心的环。注意，根据地图投影，当真实地图比例发生变化时，环尺寸（甚至形状）可能会根据位置而变化，例如，如果从格陵兰岛移动到非洲，这些距离将为50公里，200公里...原创 2019-01-07 10:12:00 · 1036 阅读 · 0 评论 -
OpenLayers学习笔记（四）— QML显示html中openlayers地图的坐标
OpenLayers学习笔记（四）— QML显示html中openlayers地图的坐标GitHub:八至作者：狐狸家的鱼本文链接：实现QML中显示html中地图的坐标如何QML与HTML通信已经在这篇文章 QML与HTML通信之画图 详细讲述了1.HTMLvar coord;map.on('singleclick',(evt)=>{ coord...原创 2018-12-20 17:20:00 · 616 阅读 · 0 评论 -
OpenLayers学习笔记（三）— QML与HTML通信之 地图上点击添加自由文本
OpenLayers学习笔记（三）— QML与HTML通信之 地图上点击添加自由文本实现在地图随意点击，弹出文本输入框，输入任意文字，完成自由文本添加的功能作者： 狐狸家的鱼GitHub:八至本文链接：地图上点击添加自由文本 关于如何QML与HTML通信已经在上一篇文章 QML与HTML通信之画图 详细讲述了。1.html//添加文本 var ad...原创 2018-12-20 17:10:00 · 541 阅读 · 0 评论 -
openlayers学习笔记（十三）—异步调用JSON数据画点、文字标注与连线
使用Openlayers 3实现调用本地json数据在地图上添加点、文字标注以及连线。生成底图地图首先得有一个地图作为底图，代码如下：let vectorSource = new ol.source.Vector({ wrapX: false });const rootLayer = new ol.layer.Tile({ source:...原创 2019-09-02 16:36:53 · 741 阅读 · 0 评论