arcgis for jsapi 4.10绘制热力图

栏目: 编程工具 · 发布时间: 5年前

内容简介:版权声明:本文为博主原屙文章,喜欢你就担走。 https://blog.csdn.net/leftfist/article/details/87189002

版权声明:本文为博主原屙文章,喜欢你就担走。 https://blog.csdn.net/leftfist/article/details/87189002

arcgis for jsapi 从 3 变到 4 之后,变化巨大,原先网络上的许多例子,好像都过时了。比如echart与arcgis结合,都是for 3.x的,4时代就不行了。

热力图也一样。

现在俺给个例子,不依赖于arcgis服务器,直接渲染出来:

原理是绘制,绘制在FeatureLayer里。怎么绘制呢?原来热力图有个专门的渲染器:HeatmapRenderer,将样式赋给该渲染器,然后渲染器、点数据等参与FeatureLayer的构造,就可以了。

arcgis for jsapi 4.10绘制热力图

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
	<title>heatMap</title>
	<link rel="stylesheet" type="text/css" href="http://192.168.0.211/pubzy/arcgis_js_api/4.10/esri/css/main.css" />
	<style>
		html, body, #map {
		  height: 100%;
		  margin: 0;
		  padding: 0;
		}
	</style>
	<script src="http://192.168.0.211/pubzy/media/js/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script src="http://192.168.0.211/pubzy/arcgis_js_api/4.10/init.js"></script>
</head>

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

<script>
 require(["esri/map",
	"esri/views/MapView",
	"esri/Basemap",
	"esri/geometry/Extent",		  
	"esri/layers/TileLayer",
	"esri/layers/FeatureLayer",
	"esri/renderers/HeatmapRenderer", 
	"dojo/domReady!"], function (Map,
MapView,
BaseMap,
Extent,
TileLayer,  
FeatureLayer,
HeatmapRenderer) {
  
  	let map, view;
	(function () {//加载底图等
		map = new Map({
			basemap: getBaseMap({
				"title": "影像图",
				"thumbnailUrl": "images/map/影像图.gif",
				"type": "tile",
				"layer": "http://192.168.0.206:6080/arcgis/rest/services/HNJCZS/HNJCZSYXT/MapServer"
			  }),
		});
		view = new MapView({
			container: "map",
			map: map,
			extent: new Extent({
			  "xmin": 105,
			  "ymin": 18,
			  "xmax": 115,
			  "ymax": 20,
			  "spatialReference": { "wkid": 4326 }
			}),
		});
		view.ui._removeComponents(["attribution"]);
	})();	  
	function getBaseMap(basemapcof) {
		let baselayer = new TileLayer({
			url: basemapcof.layer,
		});
		return new BaseMap({
			baseLayers: baselayer,
			title: basemapcof.title,
			thumbnailUrl: "../" + basemapcof.thumbnailUrl,
		});
	}
	
    var heatmapRenderer = new HeatmapRenderer({//设置渲染器
      colorStops: [{ ratio: 0.4, color: "rgba(0, 255, 0, 0)" },
	    { ratio: 0.75, color: "rgba(255, 140, 0, 1)" },
		{ ratio: 0.9, color: "rgba(255, 0,   0, 1)" }],
		blurRadius: 8,
		maxPixelIntensity: 230,
		minPixelIntensity: 10
    });

    var heatDataUrl = "data/heatJson.json";
    $.getJSON(heatDataUrl,{},function(data,textStatus,jqXHR){//读取数据,设置点数据集
		var features = [];
		for (var i = 0; i < data.heatData.length; i++) {
			var x = data.heatData[i].lng;
			var y = data.heatData[i].lat;
			features.push({
				geometry: {
					type: "point",
					x: x,
					y: y
				},
				attributes: {
					ObjectID: i,//重要!!!
				}
			});
		}
	  
		var featureLayer = new FeatureLayer({
			  source: features,//点数据集
			  title: "热力图",
			  objectIdField: "ObjectID",//重要!!!
			  renderer: heatmapRenderer//渲染器
		});
		
		map.add(featureLayer);
    });

});
</script>
</html>

热力图有个专有的名词:HeatMap,可以用这个单词去搜。

参考资料:

arcgis js api:热力图

arcgis for jsapi官网上有两个例子,一个似乎是直接展示图层,一个是依赖于CSVLayer,好像挺复杂。

https://developers.arcgis.com/javascript/latest/sample-code/visualization-heatmap-scale/index.html

https://developers.arcgis.com/javascript/latest/sample-code/visualization-heatmap/index.html


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

智能革命

智能革命

李彦宏 等 / 中信出版集团 / 2017-5-1 / 68.00元

人类历史上的历次技术革命,都带来了人类感知和认知能力的不断提升,从而使人类知道更多,做到更多,体验更多。以此为标准,李彦宏在本书中将人工智能定义为堪比任何一次技术革命的伟大变革,并且明确提出,在技术与人的关系上,智能革命不同于前几次技术革命,不是人去适应机器,而是机器主动来学习和适应人类,并同人类一起学习和创新这个世界。“人工智能”正式写入2017年政府工作报告,折射出未来人工智能产业在我国经济发......一起来看看 《智能革命》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

SHA 加密
SHA 加密

SHA 加密工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试