openlayers3 ol3热力图 json
最近分配一个 gis地图的 任务，要我弄个热力图巨坑啊，当时就是没啥想，后来想想。
后面弄完 确实发现简单，为了方便广大网友 也方便自己写在博客
<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 raster = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'toner'
})
});
var map = new ol.Map({
layers: [raster],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var blur = document.getElementById('blur');
var radius = document.getElementById('radius');
//矢量图层 获取gejson数据
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(heatData,{
dataProjection : 'EPSG:4326',
featureProjection : 'EPSG:3857'
})
});
// Heatmap热力图
var vector = new ol.layer.Heatmap({
source: vectorSource,
blur: parseInt(blur.value, 10),
radius: parseInt(radius.value, 10),
});
map.addLayer(vector);
</script>
效果图
数据量太大目前丢在资源里 地址：
http://download.csdn.net/detail/u012374381/9885617
openlayers3 ol3热力图 json相关推荐
- 【OpenLayers】 ol3热力图的实现 Heatmap
先来看下效果图,由于保密原因,不能将项目的效果图往上放,我就直接截了张官方示例的图吧.顺便也把网址给你们. http://openlayers.org/en/v3.2.1/examples/ 接下来我 ...
- openlayers加载svg,如何在OpenLayers-3中将SVG图像用作地图标记？
I am trying to create map "pin-drops" (ie. map markers) in OpenLayers-3 (OL3) using SVG im ...
- 基于 HTML5 WebGL 的故宫人流量动态监控系统
前言 在当代社会,故宫已经成为一个具有多元意义的文化符号,在历史.艺术.文化等不同领域发挥着重要的作用,在国际上也成为能够代表中国文化甚至中国形象的国际符号.近几年故宫的观众接待量逐年递增,年接待量已 ...
- MapServer 之 发布网络覆盖数据服务（WCS-Web Coverage Service）
今天我们讲一下使用 mapserver 发布 OGC 的三大网络地图服务的最后一个 - WCS,wcs 主要是规定了通过网络提供访问 coverage 数据的标准,那么什么是 coverage 数据呢 ...
- OpenLayers3基础教程——OL3之Popup
概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...
- （转）OpenLayers3基础教程——OL3之Popup
http://blog.csdn.net/gisshixisheng/article/details/46794813 概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用O ...
- （转）OpenLayers3基础教程——OL3基本概念
http://blog.csdn.net/gisshixisheng/article/details/46756275 OpenLayers3基础教程--OL3基本概念 从本节开始,我会陆陆续续的更新 ...
- OpenLayers3基础教程——OL3 介绍control
概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 control比较: 相比较Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control: Ol2的c ...
- OpenLayers3基础教程——OL3基本概念
从本节开始,我会陆陆续续的更新有关OL3的相关文章--OpenLayers3基础教程,欢迎大家关注我的博客,同时也希望我的博客能够给大家带来一点帮助. 概述: OpenLayers 3对OpenLay ...
最新文章
- spyder清除控制台命令
- failed to get the task for process XXX(解决方案)
- 肌肉减少症导致的老人跌倒
- git对版本文件库的管理的工作目录
- 【渝粤题库】国家开放大学2021春1121健康教育与健康促进题目
- input不可编辑属性_谁不喜欢图文并茂呢：基于多模态信息的属性抽取
- C#LeetCode刷题之#933-最近的请求次数（Number of Recent Calls）
- AI如何驱动软件开发？华为云DevCloud 权威专家邀你探讨
- C++根据.h文件批量生成需要的函数框架
- 一步一步理解拖拽Drag（四）
- 含泪入坑 GMSSL
- CISSP考试心得分享
- iOS不能显示英文音标问题
- Java编程降序排序代码,Java选择排序（升序跟降序）
- 如何登录华为云服务器
- 初识CMake，如何编写一个CMake工程（下）
- eclipse theia_如何在Ubuntu 18.04上设置Eclipse Theia Cloud IDE平台[快速入门]
- Word功能-“多级列表”-用法笔记
- python初学者练习（二）斐波那契兔子问题
- mouseenter事件java_从子元素输入父元素时，不会触发MouseEnter事件