我刚开始学习传单热图,我想根据条件将值映射到不同的颜色。
我通过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);