oyatsu8 score 79
2016/12/06 22:04 投稿
| jsonの特定の属性の値を一括で入れ替えたい場合 |
| Leafletのコロプレスマップを改造して使いたいと考えています。 |
| http://leafletjs.com/examples/choropleth/ |
| オーバーレイが変更された時に |
| geojsonの特定のproperty属性の値を一括で入れ替えたいのですが、 |
| どこに入れ替え用のデータを作ったら良いかが分からず、アドバイスを頂けないでしょうか？ |
| 例えば、 |
| hoge02 = {0,1,2,3,....} |
| のような感じでデータを準備しておいて、overlayでhoge02が選ばれた時に、 |
| 一気に変更するようなことがしたいです。 |
| 例えば、下記のようにproperty属性（hoge02）をもう一つ作った場合も考えてみたのですが、これでも書き換えが面倒だと感じました。 |
| ```geojsonの一部 |
| var statesData = {"type":"FeatureCollection","features":[ |
| {"type":"Feature","id":"01","properties":{"name":"Alabama","density":94.65,"density02":120}, |
| ``` |
| ```javascript |
| //hoge02 |
| geojson = L.geoJson(statesData, { |
| style: style, |
| onEachFeature: onEachFeature, |
| //feature.properties.densityの部分だけ値を入れ替えたい |
| //値は同じ us-states.js の中に用意したらいいのか？ |
| //例えば下記のようにしたらいいのか？ |
| feature.properties.density = feature.properties.density02; |
| }).addTo(hoge02); |
| ``` |
| ```javascript |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Choropleth Tutorial - Leaflet</title> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" /> |
| <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script> |
| <style> |
| #map { |
| width: 600px; |
| height: 400px; |
| } |
| </style> |
| <style>#map { width: 800px; height: 500px; } |
| .info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; } |
| .legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }</style> |
| </head> |
| <body> |
| <div id='map'></div> |
| <script type="text/javascript" src="http://leafletjs.com/examples/choropleth/us-states.js"></script> |
| <script type="text/javascript"> |
| var map = L.map('map').setView([37.8, -96], 4); |
| L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { |
| maxZoom: 18, |
| attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + |
| '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + |
| 'Imagery © <a href="http://mapbox.com">Mapbox</a>', |
| id: 'mapbox.light' |
| }).addTo(map); |
| // control that shows state info on hover |
| var info = L.control(); |
| info.onAdd = function (map) { |
| this._div = L.DomUtil.create('div', 'info'); |
| this.update(); |
| return this._div; |
| }; |
| info.update = function (props) { |
| this._div.innerHTML = '<h4>US Population Density</h4>' + (props ? |
| '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>' |
| : 'Hover over a state'); |
| }; |
| info.addTo(map); |
| // get color depending on population density value |
| function getColor(d) { |
| return d > 1000 ? '#800026' : |
| d > 500 ? '#BD0026' : |
| d > 200 ? '#E31A1C' : |
| d > 100 ? '#FC4E2A' : |
| d > 50 ? '#FD8D3C' : |
| d > 20 ? '#FEB24C' : |
| d > 10 ? '#FED976' : |
| '#FFEDA0'; |
| } |
| function style(feature) { |
| return { |
| weight: 2, |
| opacity: 1, |
| color: 'white', |
| dashArray: '3', |
| fillOpacity: 0.7, |
| fillColor: getColor(feature.properties.density) |
| }; |
| } |
| function highlightFeature(e) { |
| var layer = e.target; |
| layer.setStyle({ |
| weight: 5, |
| color: '#666', |
| dashArray: '', |
| fillOpacity: 0.7 |
| }); |
| if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { |
| layer.bringToFront(); |
| } |
| info.update(layer.feature.properties); |
| } |
| var geojson; |
| function resetHighlight(e) { |
| geojson.resetStyle(e.target); |
| info.update(); |
| } |
| function zoomToFeature(e) { |
| map.fitBounds(e.target.getBounds()); |
| } |
| function onEachFeature(feature, layer) { |
| layer.on({ |
| mouseover: highlightFeature, |
| mouseout: resetHighlight, |
| click: zoomToFeature |
| }); |
| } |
| var hoge = new L.LayerGroup(); |
| var hoge02 = new L.LayerGroup(); |
| var none = new L.LayerGroup(); |
| //hoge |
| geojson = L.geoJson(statesData, { |
| style: style, |
| onEachFeature: onEachFeature |
| }).addTo(hoge); |
| //hoge02 |
| geojson = L.geoJson(statesData, { |
| style: style, |
| onEachFeature: onEachFeature, |
| //feature.properties.densityの部分だけ値を入れ替えたい |
| //値は同じ us-states.js の中に用意したらいいのか？ |
| //例えば下記のようにしたらいいのか？ |
| feature.properties.density = feature.properties.density02; |
| }).addTo(hoge02); |
| var overlays = { |
| "hoge": hoge, |
| "hoge02": hoge02, |
| "none": none, |
| }; |
| L.control.layers(overlays).addTo(map); |
| map.attributionControl.addAttribution('Population data © <a href="http://census.gov/">US Census Bureau</a>'); |
| var legend = L.control({position: 'bottomright'}); |
| legend.onAdd = function (map) { |
| var div = L.DomUtil.create('div', 'info legend'), |
| grades = [0, 10, 20, 50, 100, 200, 500, 1000], |
| labels = [], |
| from, to; |
| for (var i = 0; i < grades.length; i++) { |
| from = grades[i]; |
| to = grades[i + 1]; |
| labels.push( |
| '<i style="background:' + getColor(from + 1) + '"></i> ' + |
| from + (to ? '–' + to : '+')); |
| } |
| div.innerHTML = labels.join('<br>'); |
| return div; |
| }; |
| legend.addTo(map); |
| </script> |
| </body> |
| </html> |
| ``` |
| ``` |
| 自己解決しました |
| 元々書いていたように、 |
| var statesData = {"type":"FeatureCollection","features":[ |
| {"type":"Feature","id":"01","properties":{"name":"Alabama","density":94.65,"density02":120}, |
| とpropertiesの中身を追加し、"density"とおなじ処理を書くことで出来ました。 |
| ありがとうございました。 |
