如何按需在光柵上疊加光柵圖像？

Question

我使用的是用戶輸入的經緯度坐標，以便通過leaflet.js可視化地圖。 這樣做時，我會在后台計算一個熱點圖（例如，圍繞所選坐標的5公里寬區域中的人口密度圖）。

如何將熱圖覆蓋到地圖上？

到目前為止，這是我得到的：一個用於生成地圖的html文件，以及一個由我的后台計算創建的.js文件，在其中我存儲所選坐標，一些多邊形或興趣點，並希望在其中存儲/指向柵格地圖我為該區域生成。

<!DOCTYPE html>
<html>
<head>
  <title>Testmap</title>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>
  <style>
    @import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css);
    #overlay{
      fill:None;
      stroke:#ff00ff;
      stroke-width:4px;
    }
  </style>
</head>
<body>
  <div id="map" style="width: 960px; height: 600px"></div>
  <script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"
  </script>
  <script src="rois.js"></script>
  <script>
  var toolserver = L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png');
  var stamen = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: 'myMap'}).addTo(map);
  var baseLayers = {"stamen": stamen, "toolserver-mapnik":toolserver};

  var geojson = L.geoJson(rois, {
      onEachFeature: onEachFeature
  }).addTo(map)

  var overlays = {
      "geoJson": geojson
  };

  function onEachFeature(feature, layer){
    if (feature.properties) {
      layer.bindPopup("<b>" + feature.properties.street + "</b> is " + feature.properties.length + "km long.");
    }
  }

  var svgContainer= d3.select(map.getPanes().overlayPane).append("svg");
  var group= svgContainer.append("g").attr("class", "leaflet-zoom-hide");
  var path = d3.geo.path().projection(project);
  function project(point) {
    var latlng = new L.LatLng(point[1], point[0]);
    var layerPoint = map.latLngToLayerPoint(latlng);
    return [layerPoint.x, layerPoint.y];
  }  

  </script>
 </body>
</html>

rois.js文件是由我的程序在后台生成的，包含選定的坐標和一些要在地圖上繪制的多邊形。 我想了解如何在此處包含柵格信息。

var map = L.map('map').setView([52.500,13.385], 13);
var rois = [{
  "type": "FeatureCollection",                                                                        
  "features": [{
    "type": "Feature",
    "id": 1, 
    "geometry": {
      "type": "Polygon",
      "coordinates": [[[13.370, 52.491], [13.400, 52.491], [13.400, 52.509],[13.370, 52.509],[13.370, 52.491]]]
    }
  },
  { "type": "Feature",
    "id": 2, 
    "geometry": {
      "type": "Polygon",
      "coordinates": [[[13.415, 52.496], [13.425, 52.505], [13.435, 52.496], [13.415, 52.496]]]
    }
  }]
}];

謝謝FP

Answer 1

請參閱用於生成熱圖的Leaflet插件（並更新您的Leaflet版本0.6.x已經使用三年多了）。

如何按需在光柵上疊加光柵圖像？

問題描述

1 個解決方案

解決方案1
0 2016-05-13 08:28:11

如何按需在光柵上疊加光柵圖像？

問題描述

1 個解決方案

解決方案1 0 2016-05-13 08:28:11

解決方案1
0 2016-05-13 08:28:11