定制热图手册插件

in index.html我想添加两个Heatmaps用户可以通过菜单右上角的复选框看到。菜单显示其他的东西通过这样的代码定制热图手册插件

layerControl.addOverlay(geojson, "H2OpenMap");

在页面的该部分

（线383到线397）

$.getJSON('api.php', {'wells': '1'}, function(remoteData){ 
    var geojson = L.geoJson(remoteData, { 
     pointToLayer: function (feature, latlng) { 
     var icon = chooseIcon(feature['properties']); 
     var marker = L.marker(latlng, {icon: new h2icon({iconUrl: icon})}); 
     var markerText = buildPopup(feature, true, latlng); 
     marker.bindPopup(markerText); 
     return marker; 
    } 
    }).addTo(map); 

layerControl.addOverlay(geojson, "H2OpenMap"); 

map.fitBounds(geojson.getBounds(), {'padding': [10,10]}); 
});

首先热应该由同一代码之前使用数据，通过

选择

if(feature['drinking_water'] == 'yes') {... 
    }

第二热应该由同一代码之前使用数据，通过

选择

if(feature['drinking_water'] == 'no') {... 
    }

目标是有两个热图，一个用于干净的水资源，另一个用于不干净的水资源，两者都可以按比例按钮选择。

我已经找到这段代码看起来不错，但我不能给他的数据用来创建热图.....

//--------------------https://www.patrick-wied.at/static/heatmapjs/plugin-leaflet-layer.html-----------// 
$.getJSON('api.php', {'wells': '1'}, function(remoteData){ 
    var geojson = L.geoJson(remoteData, { 
     pointToLayer: function (feature, latlng) { 
     var heatData = L.marker(latlng); 
     console.log(heatData); 
     //var heatData = L.marker([{lat: new latlng(lat), lng: new latlng(lng)}]); 
    }})}); 

/*var testData = { 
    max: 8, 
    data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}, ...] 
};*/ 

var cleanWater = heatData;// mettere in un array solo la posizione degli elementi che rispettano la seguente condizione: feature['drinking_water'] == 'yes' 
var cfg = { 
    // radius should be small ONLY if scaleRadius is true (or small radius is intended) 
    // if scaleRadius is false it will be the constant radius used in pixels 
    "radius": 2, 
    "maxOpacity": .8, 
    // scales the radius based on map zoom 
    "scaleRadius": true, 
    // if set to false the heatmap uses the global maximum for colorization 
    // if activated: uses the data maximum within the current map boundaries 
    // (there will always be a red spot with useLocalExtremas true) 
    "useLocalExtrema": true, 
    // which field name in your data represents the latitude - default "lat" 
    latField: 'lat', 
    // which field name in your data represents the longitude - default "lng" 
    lngField: 'lng', 
    // which field name in your data represents the data value - default "value" 
    valueField: 'count' 
}; 

var heatmapLayer = new HeatmapOverlay(cfg); 

var map = new L.Map('map-canvas', { 
    center: new L.LatLng(25.6586, -80.3568), 
    zoom: 4, 
    layers: [baseLayer, heatmapLayer] 
}); 

heatmapLayer.setData(cleanWater); 

//------------------------//--------------------//--------------------//--------------------//--------------------*/

在它的下面有完整的代码文件中的根项目

： https://github.com/H2OpenMap/map/blob/master/index_heat_test.html

来源

2016-05-23 Francesco Giunta

简化你的问题我尽量建议你这个例子...

http://bl.ocks.org/d3noob/raw/8973028/

这是一个实现Leaflet热图的简单代码。

如果您在源代码中看到...

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Leaflet Map with Heatmap </title> 
    <meta charset="utf-8" /> 
    <link 
    rel="stylesheet" 
    href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" 
    /> 
</head> 
    <body> 
    <div id="map" style="width: 600px; height: 400px"></div> 

    <script 
    src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> 
    </script> 

    <script 
    src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"> 
    </script> 
    <script src="2013-earthquake.js"></script> 
    <script> 

    var map = L.map('map').setView([-41.5546,174.146], 10); 
    mapLink = 
     '<a href="http://openstreetmap.org">OpenStreetMap</a>'; 
    L.tileLayer(
     'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; ' + mapLink + ' Contributors', 
     maxZoom: 18, 
    }).addTo(map); 

    var heat = L.heatLayer(quakePoints,{ 
     radius: 20, 
     blur: 15, 
     maxZoom: 17, 
    }).addTo(map); 

    </script> 
    </body>

....你会发现，数据模拟与坐标数组，你可以在这里看到...

http://bl.ocks.org/d3noob/raw/8973028/2013-earthquake.js

我觉得您对GeoJSON的数据转换格式，所有将工作！

Cesare

来源

2016-05-23 14:55:45 Cesare

定制热图手册插件

回答

相关问题