<body>

    <div id="map"></div>

    <script>

        var map = new ol.Map({  //初始化map

            target: 'map',

            layers: [

                new ol.layer.Tile({

                    source: new ol.source.OSM()

                })

            ],

            view: new ol.View({

                center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),

                zoom: 4

            })

        });

        var blur = document.getElementById('blur');

        var radius = document.getElementById('radius');

        var heatmap = new ol.layer.Heatmap({

            source: new ol.source.Vector({

                url: 'data/kml/2012_Earthquakes_Mag5.kml',

                projection: 'EPSG:3857',

                format: new ol.format.KML({

                    extractStyles: false

                })

            }),

            blur: 10,

            radius: 10

        });

        map.addLayer(heatmap);

     </script>

</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. Java 反射 Class类

    Java 反射 Class类 @author ixenos 摘要:Class类在反射中的地位.构造Class对象的三种方式.Class对象构造对应类型对象的三种方式 Class类在反射中的地位 位于j ...

  2. [ An Ac a Day ^_^ ] CodeForces 586C Gennady the Dentist 模拟

    题意: n个小朋友去拔牙 每个小朋友在拔牙的时候会哭 哭声是vi分贝 距离门口vi远的小朋友听到了哭声会害怕 他们的勇气值p会减少d 如果勇气值p小于等于零 他们就会在门外哭并立即离开拔牙队列(回家找 ...

  3. VS2010编译以前版本工程时 ERROR CVT1100:duplicate resource,type:MANIFEST解决办法

    1.将 Resource Files 里面的 *.exe.manifest 文件删除 2.右键选择 *.rc 文件,选择 view code,查找并删除所有引用 *.exe.manifest 文件的代 ...

  4. NOIP2010-普及组复赛-第四题-三国游戏

    题目描述 Description 小涵很喜欢电脑游戏,这些天他正在玩一个叫做<三国>的游戏.  在游戏中,小涵和计算机各执一方,组建各自的军队进行对战.游戏中共有 N 位武将(N为偶数且不 ...

  5. Scala Tuple类型

    Tuple可以作为集合存储不同类型的数据,初始化实例如下: val tuple = (1,3,3.14,"aa") val third = tuple._3 Tuple 下标访问从 ...

  6. Python 学习笔记6

    做人要有目标感! 继续学习Python哦.

  7. CentOS 7 多网卡绑定

    根据官方文档Red_Hat_Enterprise_Linux-7-Networking_Guide-en-US用nmcli做起来还是相当容易的.下面把俺的步骤贴下. 1.查看目前网卡的名称和状态.#n ...

  8. MFC下对文件及文件夹的操作(复制、剪切、删除、创建文件夹，写文件)

    一.文件夹的创建 void CFileOperationDlg::OnButtonMakeFolder() { // TODO: Add your control notification handl ...

  9. DHCP 协议的 8 种消息类型及功能服务器

    1) 主机发送 DHCP Discover 广播包在网络上寻找 DHCP 服务器: 单播数据包, 地址. 2) DHCP 服务器向主机发送 DHCP Offer 单播数据包,包含 IP 地址.MAC ...

  10. js预编译

    先来做三个测试 eg1: var a; a = 1; function a() {}; console.log(a); eg2: var a; function a() {}; console.log ...