1. <body>
  2.     <div id="map"></div>
  3.     <script>
  4.         var map = new ol.Map({  //初始化map
  5.             target: 'map',
  6.             layers: [
  7.                 new ol.layer.Tile({
  8.                     source: new ol.source.OSM()
  9.                 })
  10.             ],
  11.             view: new ol.View({
  12.                 center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
  13.                 zoom: 4
  14.             })
  15.         });
  16.         var blur = document.getElementById('blur');
  17.         var radius = document.getElementById('radius');
  18.         var heatmap = new ol.layer.Heatmap({
  19.             source: new ol.source.Vector({
  20.                 url: 'data/kml/2012_Earthquakes_Mag5.kml',
  21.                 projection: 'EPSG:3857',
  22.                 format: new ol.format.KML({
  23.                     extractStyles: false
  24.                 })
  25.             }),
  26.             blur: 10,
  27.             radius: 10
  28.         });
  29.         map.addLayer(heatmap);
  30.      </script>
  31. </body>

Openlayers 3 热力图的更多相关文章

  1. Cesium热力图实现

    转自原文 Cesium热力图实现 生成热力图的算法我是用的一个热力图插件 heatmap.js.   heatmap中热力图生成原理: heatmap中首先会根据输入的渐进色参数,在内部生成一个0-2 ...

  2. Leaflet+heatmap实现离线地图加载和热力图应用

    本人博客主页:http://www.cnblogs.com/webbest/ 2017年春节已经过完,新一年的奋斗也刚刚开始.今年要经历的挑战也是大大的...不扯了. 年底前软件项目相对较多,恰巧在年 ...

  3. Leaflet绘制热力图【转】

    http://blog.csdn.net/giser_whu/article/details/51485871 时下用的最多的开源二维webgis引擎应该是openlayers与leaflet了,le ...

  4. 基于开源项目SharpMap的热力图(HeatLayer)实现。

    当前公司需要一个用时较少的热力图呈现方案,在避免较底层的GDI开发和比较了多家GIS产品的实际效果之后,团队决定用sharpMap的API来实现,由于之前框架采用的是另外一个开源项目GMap.net, ...

  5. HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用

    在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web  ...

  6. OpenLayers.2.10.Beginners.Guide---第一章

    从网上下载openlayers2,解压取得img theme 文件夹和openlayes.js文件.放在同一文件夹下用phpstorm打开. 创建index.html-------------每一行都 ...

  7. R语言绘制空间热力图

    先上图 R语言的REmap包拥有非常强大的空间热力图以及空间迁移图功能,里面内置了国内外诸多城市坐标数据,使用起来方便快捷. 开始 首先安装相关包 install_packages("dev ...

  8. OpenLayers的定制

    最近因为工作的需要,把主流的的一些GIS的javascript库看了一遍,主要是ArcGIS Server API for Javascript,Openlayers和Leaflet. 先说说ArcG ...

  9. OpenLayers工作原理

    1.数据组织 OpenLayers通过同层(Layer)进行组织渲染,然后通过数据源设置具体的地图数据来源.因此,Layer与Source是密切相关的对应关系,缺一不可.Layer可看做渲染地图的层容 ...

随机推荐

  1. 【2】Chrome - 快捷键

    记录一下 Chrome 常用的快捷键 温馨提示:点击快捷键回链接到对应的图文 快捷键汇总: 1. Ctrl + [ 或 Ctil + ]  ( Mac: Cmd + [ 或 Cmd + ] ): 移动 ...

  2. Fedora设置中文

    安装Fedora14时,界面语言是英语,结果忘了修改酿成大祸,hou后面qt怎么改 也显示不出来中文!哎,真是功亏一篑啊差点. 只好手动安装简体中文语言包: 1.打开终端,执行yum install ...

  3. AnimatorController动画融合树

    通过Unity动画状态机,能帮我们轻松处理转换各个动画片断,达到想要的效果,但是如果仅仅是一个个动画的硬生生的切换,那么看起来就非常突然,而不真实了,在质量要求比较高的游戏中,特别是动作游戏,我们就不 ...

  4. poj 1687 Buggy Sat 简单计算几何

    暑期集训出的第一道一血 感觉自己萌萌哒…… 这道题本身并没有坑点 仅仅是翻译巨坑…… 解大腿在做B 安学长在做E 我闲着也没事 就一个词一个词翻译F…… 最后感觉…… 题干大多数都看不懂…… 也都没啥 ...

  5. 2015 ACM/ICPC Asia Regional Shanghai Online

    1001 Puzzled Elena 1002 Antonidas 1003 Typewriter 1004 Count the Grid 1005 Code Formatting 1006 Ther ...

  6. F - 娜娜梦游仙境系列——多民族王国

    F - 娜娜梦游仙境系列——多民族王国 Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Othe ...

  7. 移动前端不得不了解的HTML5 head 头标签（中下篇）

    SEO 优化部分 页面标题<title>标签(head 头部必须)        <title>your title</title>    页面关键词 keywor ...

  8. C++侵入式链表

    C++标准模板库中的list是非侵入式的链表,当我们通过对象来删除容器中的对象时,需要从头到尾查找一次得到iterator,最后通过iterator来删除对象.这样删除容器中的对象时比较缓慢,所以就实 ...

  9. GRPC: set up..

    get the grpc source file.. git clone https://github.com/grpc/grpc git submodule update --init --recu ...

  10. HDU 5826 physics

    该问题和xi,di均无关,碰撞只会使得速度反向,大小不会变.因此只要计算速度. #pragma comment(linker, "/STACK:1024000000,1024000000&q ...