Openlayers 3 热力图

时间：2021-10-18 08:25:46
<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 热力图

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

  1. Cesium热力图实现

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

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

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

  3. Leaflet绘制热力图【转】

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

  4. 基于开源项目SharpMap的热力图&lpar;HeatLayer&rpar;实现。

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

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

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

  6. OpenLayers&period;2&period;10&period;Beginners&period;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. ArcEngine奇怪异常：HRESULT&colon;0x80040351

    错误如图 根据该博客,http://blog.csdn.net/u011609113/article/details/51155116, 显示该错误为Duplicate Field Names wit ...

  2. FragmentActivity与Fragment两者交互方法简介&lpar;转&rpar;

    FragmentActivity与Fragment两者交互方法简介 分类: Fragment 2014-07-07 18:17 88人阅读 评论(0) 收藏 举报 在Android4.0后很多时候我们 ...

  3. Java比较器

    导语 本节内容,比较器Comparable是核心内容. 主要内容 重新认识Arrays类 两种比较器的使用 具体内容 Arrays类 在之前一直使用的"java.util.Arrays.so ...

  4. Windows Server2008、IIS7启用CA认证及证书制作完整过程

    1         添加活动目录证书服务 1.1          打开服务器管理器,右键点击角色,选择“添加角色”,在“添加角色向导”窗口左侧面板选择“服务器角色”,然后勾选“Active Dire ...

  5. SEO--提高权重

    搜索引擎提交入口:将新网站提交收录 SEO优化三要素:标题 关键词 描述 外链(友情链接) 目的:提高权重 注意事项: 1.和内容相近的网站交换 2.链接交换形式多样 单向链接:别人指向我或我指向别人 ...

  6. vue二级联动select

    <div> <span>所在区域</span> <select name="" v-model="country"&g ...

  7. 京东Java面试题&lpar;二&rpar;

    1.set集合从原理上如何保证不重复 1)在往set中添加元素时,如果指定元素不存在,则添加成功.也就是说,如果set中不存在(e==null ? e1==null : e.queals(e1))的元 ...

  8. quick-cocos2dx 悬浮节点&lpar;NotificationNode&rpar;

    cocos2dx 开发游戏时,有时某些节点不需要随着场景的切换而销毁.但cocos2dx的机制只允许同时只有一个运行的场景,如果你的所有节点都是依附于这个场景的,那场景的切换必然带来节点的销毁. 比如 ...

  9. Composert 的命令

    (1) php artisan       ----查看所有的命令帮助 (2) php artisan make:controller StudentController      ----创建一个控 ...

  10. Error&colon;指向绑定函数的指针只能用于调用函数

    a1.determinant; 改为: a1.determinant(); Eigen::MatrixXd a1(,);//ImagePoint a1<<n1,p1,n2,p2; doub ...

相关文章