Openlayers 3 热力图

<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>

时间: 2024-10-12 10:17:37

Openlayers 3 热力图的相关文章

Openlayers中热力图的实现

概述: 本文讲述结合heatmap.js,在Openlayers中如何实现热力图. heatmap.js简介: Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示.Heatmap.js 这个 JavaScript 库可以实现各种动态热力图的网页,帮助您研究和可视化用户的行为. 实现效果: 实现代码: <html> <head> <meta charset="UTF-8"

python_广州房价热力图

调用百度地图api,获取经纬度数据,然后在调用百度地图api,生成热力图 import pandas as pd import numpy as np data = pd.read_excel(r'D:\\新的安居客数据 (恢复的).xlsx') import requests import json import time def get_long(weizhi): url="http://restapi.amap.com/v3/geocode/geo?address={}&outpu

OpenLayers介绍和第一个例子(转载)

什么是OpenLayers? 作者:田念明出处:http://www.cnblogs.com/nianming/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. OpenLayers是用于制作交互式Web地图的开源客户端JavaScript类库,制作的地图几乎可以在所有的浏览器中查看.因为是客户端类库,它不需要特殊的服务器端软件或配置,甚至不用下载任何东西就可以使用它.OpenLayers最初由Metacarta

openlayers中的自定制工具栏,包含画点、线、面

先是在projectquantan-master这个项目中有一个EditingPanel这个工具条,也挺好的,功能挺全的,但是有一点就是只有画多边形的一个按钮,没有point和path俩个的,所以就想自己去加一个. 然后就发现统一的drawfeature的样式(olControlDrawFeatureItemInactive),没有分为point.path和polygon的,然后就去源代码中找控制这个样式点代码去修改他,但是始终没有找到,只能作罢. 又去网上搜索找到了openlayers自带的一

openlayers实现wfs属性查询和空间查询

概述: 一直在寻求openlayers中wfs加载和属性查询的相关操作,功夫不负有心人,蓦然回首,那人却在灯火阑珊处,找到了这篇博文:http://blog.csdn.net/longshengguoji/article/details/39377931,试了下,在IE8中正常运行,但是在chrom中涉及到跨域的问题,待后期接解决吧.本文讲解如何通过wfs实现属性的查询与展示. 效果: 初始化状态 属性查询结果 空间查询结果 数据表: 关键代码: 添加wfs图层 wfs = new OpenLa

基于openlayers实现聚类统计展示

概述: 在前面的博文中讲述过基于Arcgis for js如何实现聚类统计展示,在本文中讲述如何基于openlayers实现聚类统计的效果,Arcgis for js聚类统计的博文地址为: http://blog.csdn.net/gisshixisheng/article/details/40867989 效果: 实现关键点: 实现代码: 1.数据格式 2.设置显示样式 var style = new OpenLayers.Style({ fillColor: "#ffcc66",

openlayers实现多图显示

概述: 本文讲述在openlayers中如何实现多图联动. 思路: 1.判断鼠标在哪个地图上: 2.添加该地图的地图移动事件: 3.设置另外一个地图的bound为该地图的. 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>openlayers map</title> <link rel=&q

OpenLayers 之 图层(Layers) 详解

声明:文章为本人原创,转载或使用请注明作者和出处!!谢谢! 如果不是专业的地图工作者,看到地图,可能觉得地图就是一张将三维世界映射到二维空间,很多信息混杂在一起表示空间信息的动态可交互图片,其实这只是表面现象.实际上地图是由一个或多个图层组成的,使用不同的图层存储不同类型的地物,比如由存储道路的图层,有展示拥堵情况的图层,通常还有一个含有基础地理信息(比如政区划分)的底图图层. 在 OpenLayers 中,图层是使用 layer 对象表示的,主要有 热度图层(heatmaplayer).图片图

OpenLayers 如何管理多控件的激活

在使用OpenLayers的时候,常常需要使用多个控件,来实现像:绘制矢量要素(DrawFeature),查询要素属性(WMSGetFeatureInfo),等等.这样就需要在不同的控件之间进行切换,也就是激活控件.常用的方式是,在创建控件的时候,保存到一个数组中,并给予命名,例如: var infoControls = { click: new OpenLayers.Control.WMSGetFeatureInfo(), // 参数省略 hover: new OpenLayers.Contr