質問編集履歴

1 propertiesの中身を追加し、"density"とおなじ処理を書くことで出来ました。 ありがとうございました。

oyatsu8

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 &copy; <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 &copy; <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 ? '&ndash;' + 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"とおなじ処理を書くことで出来ました。
ありがとうございました。
  • JavaScript

    23321 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • JSON

    1668 questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る