openlayer3热力图资源-CSDN文库

共8个文件

js：3个

kml：1个

html：1个

需积分: 46 163 浏览量 2017-12-18 17:46:03 上传评论 1 收藏 729KB ZIP 举报

OpenLayers 3 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。它支持多种地图服务，包括WMS、WMTS等，并且能够处理各种地理空间数据。在这个"openlayer3 热力图"实例中，我们将探讨如何使用OpenLayers 3结合heatmap.js库来展示热力图，这是一种有效可视化高密度数据分布的方法。 `heatmap.html`是这个实例的主页面，它包含了HTML结构和必要的JavaScript代码。在HTML部分，通常会有一个`<div>`元素作为地图容器，以及可能的CSS样式来设置地图的大小和位置。在JavaScript部分，会初始化OpenLayers 3地图对象，并配置heatmap.js来渲染热力图。在`js`目录下，可能包含的是自定义的JavaScript文件，用于读取和处理数据，以及与OpenLayers 3和heatmap.js进行交互。这些文件可能包含了创建图层、设置地图视图、加载数据到heatmap.js实例的代码。例如，可能会有以下步骤： 1. **初始化地图**：使用`ol.Map`创建地图对象，指定地图容器和投影。 2. **创建图层**：创建一个`ol.layer.Heatmap`层，它需要一个源（`ol.source`），通常是从数据文件中加载的点数据。 3. **加载数据**：可以使用`fetch`或`XMLHttpRequest`从`map.geojson`、`3.json`等文件中获取数据。这些文件可能包含了地理坐标和对应的强度值。 4. **处理数据**：将数据转换为heatmap.js所需的格式，例如，将每个点表示为`(lon, lat, value)`的数组。 5. **设置heatmap.js实例**：创建一个heatmap.js实例，配置颜色梯度、透明度等参数。 6. **将数据添加到heatmap.js**：使用`addData`方法将处理好的数据添加到heatmap实例。 7. **将heatmap.js渲染到地图**：通过设置`ol.layer.Heatmap`的`source`属性，将其与heatmap.js实例关联，从而在OpenLayers地图上显示热力图。 `2012_Earthquakes_Mag5.kml`文件可能是一个KML（Keyhole Markup Language）文件，它是一种用于存储地理数据和元数据的标准格式，通常用于表示地震或其他地理位置事件。KML文件可以被OpenLayers 3解析并显示在地图上。如果这个实例也展示了如何加载和处理KML数据，那么这部分的代码可能会解析KML文件，提取出点数据，然后将它们转换为适合heatmap.js的格式。这个实例为我们提供了学习如何在OpenLayers 3地图上使用heatmap.js绘制热力图的宝贵资源。它涵盖了从数据加载、处理到地图呈现的全过程，对于理解和实现地理数据的可视化非常有帮助。通过研究这个实例，开发者可以掌握在Web应用中创建动态、交互式热力图的技能，这对于展示高密度分布数据，如人口密度、交通流量、灾害发生频率等场景特别有用。

资源推荐

资源详情

资源评论

收起资源包目录

归档.zip （8个子文件）

2012_Earthquakes_Mag5.kml 463KB

map.geojson 219KB

ol-debug.js 2.46MB

ol.js 503KB

jquery.js 94KB

ol.css 4KB

heatmap.html 292KB

3.json 208KB

<!DOCTYPE html> <html> <head> <title>Earthquakes heatmap</title> <script src="js/jquery.js"></script> <link rel="js/ol.css" type="text/css"> <script src="js/ol-debug.js"></script> </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> </div> <div class="span4"> <form> <label>radius size</label> <input id="radius" type="range" min="1" max="50" step="1" value="5"/> <label>blur size</label> <input id="blur" type="range" min="1" max="50" step="1" value="15"/> </form> </div> </div> </div> <script> var heatData = { type: "FeatureCollection", features: [ { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -2.966700, 56.466702 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -4.856786, 55.736744 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 14.716700, 55.116699 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 69.216698, 54.883301 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -1.166700, 54.599998 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 18.549999, 54.533298 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 11.416700, 53.633301 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 8.583300, 53.549999 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 4.133300, 51.950001 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 2.350000, 51.049999 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -1.400000, 50.899998 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -1.333300, 50.816700 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 106.199997, 50.250000 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 82.599998, 50.000000 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 106.176331, 49.902462 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -1.633300, 49.650002 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 21.250000, 48.700001 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -4.500000, 48.383301 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -100.783302, 46.799999 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 96.239334, 46.327366 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 14.433300, 45.333302 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -65.967369, 45.242485 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -100.349998, 44.366699 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -116.216698, 43.616699 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 104.500000, 43.450001 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 20.433300, 41.683300 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 25.416700, 41.133301 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 16.866699, 41.099998 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -74.011223, 40.663960 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 20.683300, 40.333302 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -75.369164, 39.869167 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 69.000000, 39.750000 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 23.688377, 37.956287 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -122.271477, 37.810452 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -25.692211, 37.746300 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -2.965954, 35.316483 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 70.466698, 34.433300 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 35.416698, 33.583302 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 35.450001, 33.383301 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 68.416702, 32.849998 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 35.000000, 32.766701 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 35.283298, 32.700001 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 36.233299, 32.283298 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 36.066700, 32.083302 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 34.866699, 31.916700 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 37.333302, 31.333300 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 34.799999, 31.250000 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 33.799999, 31.133301 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 41.033298, 30.983299 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 35.599998, 30.833334 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -88.116699, 30.683300 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 40.133301, 30.000000 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -94.783302, 29.316700 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 82.216698, 29.250000 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 33.223736, 28.807247 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -16.250000, 28.466700 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 36.599998, 28.383301 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 33.616699, 28.233299 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -15.416700, 28.150000 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 41.750000, 27.466700 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 44.133301, 26.333300 ] } } , { "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 50.083302, 26.333300 ] } } , { "type": "Feature", "propertie

评论收藏

内容反馈