根据不同条件将值附加到传单热图中的颜色

时间:2017-09-20 11:39:56

标签: javascript leaflet heatmap

我刚开始学习传单热图,我想根据条件将值映射到不同的颜色。

我通过ajax调用获取变量地址点中的数据点(x,y,值)列表,我希望以这样的方式映射这些值:每种颜色都有一个范围,并且根据该值下降在该范围内,并附加到颜色。

我已经使用geoJSON对象阅读了 fillColor:属性。但是,我不知道如何在传单热图中实现它,因为文档中没有 fillColor 属性。

此外,通过改变热图中 max 属性的值可以看到哪些变化。

function initializeMap(x, y) {
		map.setView([ y / 2, x / 2 ], 0);
		loadmap(x, y);
		// map.setZoom(-3);
		// map.panTo(0,0);

		prevZoom = map.getZoom();

	}

	function loadmap(x, y) {
		var imgDimensions = {
			width : x,
			height : y
		};
    
		var num;
		var imageBounds = [ [ imgDimensions.height, 0 ],
				[ 0, imgDimensions.width ] ];

		L.imageOverlay(imageUrl, imageBounds).addTo(map);

		/*
		 * L.tileLayer.zoomify(imageUrl,{ width: 5472, height: 3648, tolerance:
		 * 0.8, attribution: 'Photo: Keerthi' }).addTo(map);
		 * 
		 * /*L.tileLayer.zoomify('http://thematicmapping.org/playground/zoomify/books/', {
		 * width: 5472, height: 3648, tolerance: 0.8, attribution: 'Photo:
		 * Bjørn Sandvik' }).addTo(map);
		 */

		hr = height / imgDimensions.height;
		wr = width / imgDimensions.width;

		// Hardcoded

		// addressPoints = [ [ 100, 100, 1 ], [ 100, 50, 0.5 ] ];
		console.log(addressPoints);
		addressPoints = addressPoints.map(function(p) {
			p0 = p[0] / wr;
			p1 = p[1] / hr;
			var latlong = map.layerPointToLatLng(L.point(p0, p1));

			return [ latlong.lat, latlong.lng, p[2] ];
		});

		// Leaflet-heat Plug-in Code..
			
		heat = L.heatLayer(addressPoints, {
			// minOpacity : 1.0,
			max : 50,
			maxZoom : -3,
			// scale_dimming: 1.5,

			radius : rad,

			// radius_scale: 2,
			// zoom_scale : 25,
			// radius: 100,
			gradient : {
				'0.1' : '#80FF00',
				'0.2' : '#74DF00',
				'0.3' : '#00ff00',
				'0.4' : '#FFBF00',
				'0.5' : '#DBA901',
				'0.6' : '#DF3A01',
				'0.7' : '#B40404',
				'0.8' : '#8A0808',
				'0.9' : '#610B0B',
				'1.0' : '#3B0B0B'
			}
		});
		map.addLayer(heat);

0 个答案:

没有答案