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