leaflets + heatmap 加载地图

为什么80%的码农都做不了架构师？>>>

leaflets + heatmap 加载地图

leaflets
- 简单友好轻量级的互动地图，开源的 JavaScript 库
- 官网：http://leafletjs.com/
- 源码下载：http://leafletjs.com/download.html
Heatmap
- heatmap.js是一个轻量级的，易于使用的JavaScript库来帮助你可视化你的三维数据，有一个和leaflets 搭配的插件 leaflets heatmap.js
- 官网： https://www.patrick-wied.at/static/heatmapjs/
- 源码下载：https://github.com/Leaflet/Leaflet.heat

简单的热力图实现实现

直接上代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>leaflet</title><link rel="stylesheet" href="/static/map/css/leaflet.css" type="text/css"><style>html,body,#map{<!--指定地图的高宽-->height: 100%;width: 100%;}</style>
</head>
<body><div id = 'map'></div><script type="text/javascript" src="/static/map/js/leaflet-src.js"></script><script type="text/javascript" src="/static/map/js/leaflet.js"></script><script type="text/javascript" src="/static/map/js/heatmap.min.js"></script><script type="text/javascript" src="/static/map/js/leaflet-heatmap.js"></script><script type="text/javascript" src="/static/map/js/mapConfig.js"></script>
</body>
</html>

配置

var url = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
//z表示地图的缩放级别
//x表示地图瓦片的横向坐标
//y表示地图瓦片的纵向坐标
//其中的路径就是保存地图瓦片的的路径
var tilemap = new L.TileLayer(url);
//加载地图的底层对象
var mapcenter = new L.latLng(26.65, 106.65);
//地图的中心点的对象
map = new L.Map("map", {    //"map"为需要插入地图的div的id//CRS:'Simple',   //离线地图加载规则center:mapcenter,   //地图中心点zoom: 11,           //默认展示的缩放级别layers: [tilemap],  //插入的地图的图层minZoom: 0,         //最小缩放级别maxZoom: 18,        //最大缩放级别opacity: 0.1,       //图层的不透明度maxBounds: [        //地图的东西南北最大边界，//在缩放级别和是的情况下，地图只会展示在当前的区域内//south west[26.4, 106.4],//north east[26.9, 106.98]]});
var heatmapLayer = null;// 热力图层
function setHeatMap(){/*** 创建热力图的方法* 传一个参数，从后台获取到的热力图的点的数据* 数据结构*/$.getJSON("./getDevice",function(data){// alert(heatmapData[0].fields.device_desc);var heatmapData= {max: 4,data: data};if(heatmapLayer != null){/*这个方法是在每一次刷新热力图之前把前一次创建的热力图对象清除,*如果不对这个对象进行重置，会在每一刷新的时候给这个对象添加数据上去，*会导致这个对象内存增长*/map.removeLayer(heatmapLayer);}var config = {//热力图的配置项// radius: 'radius',       //设置每一个热力点的半径radius: 0.002,       //设置每一个热力点的半径maxOpacity: 0.6,        //设置最大的不透明度// minOpacity: 0.3,     //设置最小的不透明度scaleRadius: true,      //设置热力点是否平滑过渡blur: 0.95,             //系数越高，渐变越平滑，默认是0.85,//滤镜系数将应用于所有热点数据。useLocalExtrema: true,  //使用局部极值// latField: 'latitude',   //维度// lngField: 'lngField',  //经度// valueField: 'count',    //热力点的值latField: 'fields.baidu_y',   //维度  106.lngField: 'fields.baidu_x',  //经度   26.valueField: 'fields.direction',    //热力点的值gradient: {//过渡，颜色过渡和过渡比例,范例："0.99": "rgba(255,0,0,1)","0.75": "rgba(255,255,0,1)","0.5": "rgba(0,255,0,1)","0.25": "rgba(0,255,255,1)","0": "rgba(0,0,255,1)"}// backgroundColor: 'rgba(27,34,44,0.5)'    //热力图Canvas背景};heatmapLayer = null;                        //重置热力图对象为nullheatmapLayer = new HeatmapOverlay(config);  //重新创建热力图对象$(".leaflet-overlay-pane").empty();         //清空热力图的空间map.addLayer(heatmapLayer);                 //将热力图图层添加在地图map对象上heatmapLayer.setData(heatmapData);          //设置热力图的的数据});
}
setHeatMap();

转载于:https://my.oschina.net/dwqdwd/blog/1795866

leaflets + heatmap 加载地图相关推荐

autoware加载地图数据与使用rosbag包建图（三）
autoware加载地图数据(三) 介绍如何为autoware加载地图数据启动autoware $ cd ~/autoware.ai $ source install/setup.bash $ ro ...
百度地图-省市县联动加载地图
2019独角兽企业重金招聘Python工程师标准>>> 在平常项目中,我们会遇到这样的业务场景: 客户希望把自己的门店绘制在百度地图上,通过省.市.区的选择,然后加载不同区域下的店铺 ...
arcengine 加载地图不显示_用LSV下载城市地图、全省地图教程
在LSV里,可以下载各种的城市地图.也可以下载DEM数据.近日,有粉丝私信给我,如何下载令人满意的城市地图/全省地图. 首先,在LSV里下载地图. 以一个地级市为例,如何下载某个地级市的行政区划+道路 ...
ArcEngine实现动态加载地图
动态加载地图说一下主要思想:通过判断相关点是否在视图范围,并且达到某一地图比例尺时加载相应范围的地图(需要有相应基础才能看懂本文章). 1.首先得到关键点的图层 m_Map= axMapContro ...
arcengine 加载地图不显示_ArcEngine加载地图
对于ArcEngine开发者来说,万事第一步,就是要先加载地图数据,不过我们下面要讲的加载地图的方法不是用ArcEngine自带的控件或命令来实现的,而是以代码方式实现的.加载地图的方式主要分为两种: ...
如何使用Robostudio加载地图？
由于slamcore没有保存地图的功能,在构建完地图以后,需要从上位机加载地图到slamcore里面,以便地图的复用.构建地图的过程请参考:如何构建一张满足导航需求的地图? 本文解释了关于加载地图的操 ...
STK加载地图与高清影像图
在STK软件中,其3D/2D窗口中地球(其它行星类似)的地图图片是通过特定格式(带经纬度信息)的图片直接加载而成.选择合适的地图图片,除了可以显示不同形式的地理坐标外,还可提升视景仿真动画的逼真效果. ...
html卡死手机,手机页面加载地图，双手操作放大，APP卡死
测试手机:小米5 现象:手机页面加载地图,双手操作放大,APP卡死,APP卡住后,点击物理返回键是能返回的,但页面全部不能点击. 页面代码: initMap() ; function initMap( ...
Echarts3实例加载地图
前言 Echarts加载GeoJson数据生成canvas地图,可以实现地图简单的展示,获取GeoJson数据的方法见:https://blog.csdn.net/idomyway/article/d ...

leaflets + heatmap 加载地图

leaflets + heatmap 加载地图相关推荐

最新文章

热门文章