Newer
Older
osm-data / citymesh.js
@haya4 haya4 on 26 Jul 2022 4 KB 地域メッシュコード
  1. var __map = null;
  2. var __markerLayer = null;
  3. var __lineLayer = null;
  4.  
  5. var prefcode = "0";
  6. var citycode = "00000";
  7. var dir = "./";
  8. var name = "";
  9. var lonlat = [139.7637,35.6808];
  10.  
  11. var queryString = window.location.search;
  12. if(queryString){
  13. queryString = queryString.substring(1);
  14. var parameters = queryString.split('&');
  15. for (var i = 0; i < parameters.length; i++) {
  16. var element = parameters[i].split('=');
  17. var paramName = decodeURIComponent(element[0]);
  18. var paramValue = decodeURIComponent(element[1]);
  19. if (paramName == "prefcode") {
  20. prefcode = paramValue;
  21. }
  22. if (paramName == "citycode") {
  23. citycode = paramValue;
  24. }
  25. }
  26. }
  27.  
  28. // マーカーの見た目の作成
  29. var style = new ol.style.Style({
  30. image: new ol.style.Icon({
  31. src: 'lib/img/osm_200x200.png',
  32. anchor: [0.5, 0.5],
  33. scale: 0.2
  34. }),
  35. stroke: new ol.style.Stroke({color: '#ff33ff', width: 10})
  36. });
  37.  
  38. function loadMap() {
  39. $.when(
  40. $.getJSON("mesh/meshcode_"+ prefcode +"_"+ citycode +".geojson")
  41. ).done(function(data1) {
  42. site = data1.site;
  43. style = new ol.style.Style({
  44. image: new ol.style.Icon({
  45. src: 'lib/img/mapmarker_64x64.png',
  46. anchor: [0.5, 0.5],
  47. scale: 0.2
  48. }),
  49. stroke: new ol.style.Stroke({color: '#ff33ff', width: 10})
  50. });
  51. $(data1.features).each(function() {
  52. if (this.geometry.type == "Point") {
  53. lonlat = this.geometry.coordinates;
  54. }
  55. });
  56.  
  57. __map = new ol.Map({
  58. target: 'map',
  59. layers: [
  60. new ol.layer.Tile({
  61. source: new ol.source.OSM()
  62. })
  63. ],
  64. view: new ol.View({
  65. center: ol.proj.fromLonLat(lonlat),
  66. zoom: 12
  67. })
  68. });
  69. var title = document.getElementById("title");
  70. title.innerHTML = "自治体コード : " + citycode;
  71. // 表示するためのレイヤーを作成する
  72. __markerLayer = new ol.layer.Vector({
  73. source: new ol.source.Vector()
  74. });
  75. __map.addLayer(__markerLayer);
  76. // ポップアップを表示するためのオーバーレイを作成する
  77. __overlay = new ol.Overlay({
  78. element: document.getElementById('popup'),
  79. positioning: 'bottom-center'
  80. });
  81.  
  82. $.when(
  83. $.getJSON("mesh/meshcode_"+ prefcode +"_"+ citycode +".geojson")
  84. ).done(function(data2) {
  85. features = data2.features;
  86. $(features).each(function() {
  87. if (this.geometry != null) {
  88. if (this.geometry.type == "Point") {
  89. var feature = new ol.Feature({
  90. geometry: new ol.geom.Point(ol.proj.fromLonLat(this.geometry.coordinates))
  91. });
  92. feature.information = this;
  93. feature.setStyle(style);
  94. __markerLayer.getSource().addFeature(feature);
  95. }
  96. if (this.geometry.type == "LineString") {
  97. drawPolygon([this.geometry.coordinates]);
  98. }
  99. }
  100. });
  101. // 地図のクリックイベントを設定
  102. __map.on('click', function (evt) {
  103. var feature = __map.forEachFeatureAtPixel(
  104. evt.pixel,
  105. function (feature) {
  106. return feature;
  107. }
  108. );
  109. if (feature) {
  110. var coordinates = feature.getGeometry().getCoordinates();
  111. var info = feature.information;
  112. var element = __overlay.getElement();
  113. var descriptionHTML =
  114. "<div>都道府県: " + info.properties.prefcode + " "+ info.properties.prefname +"</div>" +
  115. "<div>自治体コード: " + info.properties.citycode + " "+ info.properties.cityname + "</div>" +
  116. "<div>地域メッシュコード: " + info.properties.meshcode + "</div>";
  117. element.innerHTML = descriptionHTML;
  118. __overlay.setPosition(coordinates);
  119. __map.addOverlay(__overlay);
  120. } else {
  121. __map.removeOverlay(__overlay);
  122. }
  123. });
  124. });
  125. });
  126. }
  127.  
  128. /**
  129. * ポリゴンを描画する
  130. */
  131. function drawPolygon(coordinates) {
  132. // ジオメトリの作成
  133. var polygon = new ol.geom.Polygon([]);
  134. polygon.setCoordinates(coordinates);
  135.  
  136. // 地物オブジェクトの作成 〜 レイヤーの作成
  137. var feature = new ol.Feature(
  138. polygon.transform('EPSG:4326', 'EPSG:3857')
  139. );
  140. feature.setId('tokyotower');
  141.  
  142. var vector = new ol.source.Vector({
  143. features: [feature]
  144. });
  145. var routeLayer = new ol.layer.Vector({
  146. source: vector,
  147. style: new ol.style.Style({
  148. stroke: new ol.style.Stroke({ color: '#000000', width: 2 })
  149. //fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] })
  150. })
  151. });
  152.  
  153. // 作成したポリゴンをレイヤーにのせる
  154. __map.addLayer(routeLayer);
  155. }