leaflet地图原理_使用Leaflet创建地图拓扑图
之前我们采用过 Openlayers+Qunee的方案,实现地图拓扑图,鉴于Openlayers是一个古老项目,略显臃肿,对于现代的前端地图应用,显得笨重,在客户的介绍下,我们找到了leaflet - 基于HTML5的轻量地图客户端方案,结合Qunee使用,以及第三方插件,实现更加轻快的地图拓扑图应用 Leaflet介绍 leaflet是一个开源软件,作者在乌克兰,在移动设备上的有良好的体验,比较新和现代的地图客户端,类库压缩后只有33k,非常小巧,这一点让qunee都相形见绌,先看一个leaflet的入门示例
官方示例
首先引入leaflet相关js和css
然后构建地图,并添加openStreetMap
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.
Easily customizable.')
.openPopup();
运行效果如下:
结合Qunee拓扑图 Leaflet地图上可以添加点线面基本图形,如果需要展示更复杂的图形或者链接关系,显得力不足,可以结合Qunee组件使用,下面我们让地图和拓扑图叠加起来,在地图上显示拓扑元素,并整合两者的交互
图层叠加 在地图的DIV容器中添加一个孩子div,作为拓扑图的画布,并设置相应的css,然后调用超类的构造函数,取消默认的双击和滚轮操作,已被后面地图与拓扑图的交互同步
var MapGraph = function (map) {
var container = map._container;
var canvas = document.createElement("div");
canvas.style.width = "100%";
canvas.style.height = "100%";
container.appendChild(canvas);
Q.doSuperConstructor(this, MapGraph, [canvas]);
this.enableWheelZoom = false;
this.enableDoubleClickToOverview = false;
this.originAtCenter = false;
this.setMap(map);
...
}
关联地图 下面实现拓扑图与地图的绑定,在#setMap(map)函数中,监听了地图的zoomstart和zoomend事件,根据经纬度动态的调整图元的屏幕位置,同样在节点被拖动后,也需要设置新的经纬度
MapGraph.prototype = {
map: null,
mapShowing: true,
enableInertia: false,
createNodeByLonLat: function (name, lon, lat) {
var l = this.toLonLat(lon, lat);
var p = this.getPixelFromLonLat(l);
var node = graph.createNode(name, p.x, p.y);
node.lonLat = l;
return node;
},
toLonLat: function (lon, lat) {
return new L.latLng(lat, lon);
},
getPixelFromLonLat: function (lonLat) {
return this.map.latLngToContainerPoint(lonLat, this.map._zoom);
},
getLonLatFromPixel: function (x, y) {
return this.map.containerPointToLatLng([x, y]);
},
setMap: function (map) {
this.map = map;
this.map.on("zoomstart", this.hideGraph, this);
this.map.on("zoomend", this.updateNodes, this);
this.html.ondblclick = createEventFunction(this, function (evt) {
if (this.getElementByMouseEvent(evt)) {
Q.stopEvent(evt);
}
});
this.interactionDispatcher.addListener(function (evt) {
if (evt.kind == Q.InteractionEvent.ELEMENT_MOVE_END) {
var datas = evt.datas;
Q.forEach(datas, function (data) {
var pixel = this.toCanvas(data.location.x, data.location.y);
data.lonLat = this.getLonLatFromPixel(pixel.x, pixel.y);
}, this);
}
}, this)
},
hideGraph: function(){
this.html.style.visibility = "hidden";
},
showGraph: function(){
this.html.style.visibility = "";
},
translate: function (tx, ty) {
Q.doSuper(this, MapGraph, "translate", arguments);
this.map.panBy([-tx, -ty], {animate: false});
},
resetVisibility: function () {
this.forEach(function (e) {
if (e.invalidateVisibility) {
e.invalidateVisibility(true);
}
});
},
updateNodes: function () {
this.translateTo(0, 0, 1, true);
this.resetVisibility();
this.forEach(function (d) {
if (d instanceof Q.Node) {
var l = d.lonLat;
var p = this.getPixelFromLonLat(l);
d.location = p;
}
}, this);
this.showGraph();
}
}
Q.extend(MapGraph, Q.Graph); 此外还可以通过可见过滤器实现,不同比例尺显示不同的节点
运行效果
leaflet地图原理_使用Leaflet创建地图拓扑图相关推荐
- leaflet地图原理_基于 leaflet 的标注绘图
标注功能的背景 现在我们需要做一个标注工具,在一个视频上面绘制选框,把某个区域标记下来,接下来,把我们选框的内容坐标数据存储下来,这样作为一个分析的数据源,结合视频文件去分析选框区域内的内容情况. 结 ...
- js室内地图开发_入门指南-室内地图 JS API | 高德地图API
快速入门将带您迅速了解高德地图室内JS API的基本使用,学习如何创建和设置地图,是您在最短时间内成为JS API的开发者. 第1步 准备页面 在正式开始开发地图应用之前,您需要做如下几步: 申请JS ...
- python下载谷歌地图瓦片_使用 Python 合并地图瓦片
前文提到了合并瓦片图,而瓦片图应用比较多的则是瓦片地图.对地图本就感兴趣的我,也想试试合并互联网地图的某个范围内的地图图层. 随着技术的发展,国内的地图服务商相继将地图瓦片更新为矢量瓦片[1],这下想 ...
- python地图实例_利用pyecharts实现地图可视化的例子
pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 JS 库.用 Echarts 生成的图可视化效果非常棒,pyecharts 是为了与 Pyt ...
- Android基于mAppWidget实现手绘地图(五)--如何创建地图资源
地图资源可以通过Slicing Tool工具生成,教程如下: 1.打开Eclipse标准版4.3.2,以Java项目形式导入"slicingtool"项目,运行.(必须是eclip ...
- 如何用python实现地图定位_基于 PyQt5 实现地图中定位相片拍摄位置
项目简介:本次项目主要学习了如何查找相片中的 Exif 信息,并通过 Exif 信息中的 GPS 数据在百度地图中进行定位标点,以确定相片的拍摄地点.本次实验的目的旨在通过包含 GPS 信息的相片进行 ...
- 传说之下地图素材_【开阔眼界】地图上的史记——名著轻松读
购买链接:https://j.youzan.com/Zns-38 我读了无数次<史记>,每次都是读了开头没几页就放弃,文言文看不懂,翻译的白话文内容又太枯燥,现在居然有图画版的史记,还附有 ...
- 地图旋转_如何使用万能地图下载器计算七参数
1. 概述 在测绘行业里,坐标转换始终是饶不开的问题,经常会遇到,而坐标转换有相同椭球之间的转换,也有不同椭球之间的转换.如果是不同的椭球体之间的转换,就需要用到七参数,七参数可以通过控制点计算得到, ...
- 腾讯地图标注_在腾讯地图上标注店铺,只需要简单几步就搞定
第一步,打开腾讯地图,进入页面如下图 第二步,右上角有个"上报"栏,点击进入,页面如下 第三步,右下角有个"新增"栏,点击出现下图 第四步,点击新增地点,进入页 ...
最新文章
- 48本3D视觉领域学习书籍,请自取
- 设计模式之Dynamic Proxy-动态代理
- 51CTO 新人报道
- android分享图片功能实现原理,Android:简单实现并理解图片三级缓存
- Core Data 和 sqlite3的性能对比【图】3gs,iPhone4,4s,5的性能测试。
- 灯塔上线网络电影日分账票房数据,网络电影进入票房日更时代
- QT 创建鼠标右键菜单
- 从M个数中随机等可能的取出N个的问题
- Commons-FileUpload上传组件
- Moscow Pre-Finals Workshop 2020 - Legilimens+Coffee Chicken Contest (XX Open Cup, Grand Prix of Nanj
- 用chrome 观看youtube视频显示中文字幕
- 联想服务器光驱安装win7系统,联想光盘安装win7系统教程
- 雷电模拟器修改本地IP
- 英语数字表达方式大全
- 金蝶KIS标准迷你版专业版 K3 引出报表提示保存文件失败,原因:Automation错误
- python 三维地球_python的matplotlib的模拟太阳-地球-月亮运动
- PUE 1.2,总投资达36.4亿,17600个机柜!天和防务拟建陕西最大数据中心
- 如何在CentOS 7上安装指定版本的PHP
- 通用的web系统数据导出功能设计实现(导出excel2003/2007 word pdf zip等)
- 网络安全保障之“三同步”