diff --git a/index2.html b/index2.html index 646c6e3..eaac432 100755 --- a/index2.html +++ b/index2.html @@ -63,16 +63,9 @@

-
+
サイト利用規約
- - - - diff --git a/index2.js b/index2.js index a0b788f..6062f8d 100755 --- a/index2.js +++ b/index2.js @@ -1,14 +1,9 @@ const geojson = "index.geojson"; - -var __map = null; -var __markerLayer = null; -var __lineLayer = null; - + var code = "0000"; var dir = "./"; var name = ""; -var lonlat = [139.7637,35.6808]; - + var queryString = window.location.search; if(queryString){ queryString = queryString.substring(1); @@ -22,140 +17,38 @@ } } } - -// マーカーの見た目の作成 -var style = new ol.style.Style({ - image: new ol.style.Icon({ - src: 'lib/img/osm_200x200.png', - anchor: [0.5, 0.5], - scale: 0.2 - }), - stroke: new ol.style.Stroke({color: '#ff33ff', width: 10}) -}); - + function loadMap() { $.when( $.getJSON("index.json") ).done(function(data1) { site = data1.site; - style = new ol.style.Style({ - image: new ol.style.Icon({ - src: 'lib/img/osm_200x200.png', - anchor: [0.5, 0.5], - scale: 0.2 - }), - stroke: new ol.style.Stroke({color: '#ff33ff', width: 10}) - }); $(data1.list).each(function() { if (this.code == code) { - lonlat = this.coordinates; dir = this.path + "/bldg/"; name = this.name; } }); - - __map = new ol.Map({ - target: 'map', - layers: [ - new ol.layer.Tile({ - source: new ol.source.OSM() - }) - ], - view: new ol.View({ - center: ol.proj.fromLonLat(lonlat), - zoom: 12 - }) - }); - + var title = document.getElementById("title"); title.innerHTML = "PLATEAU OSMデータ : " + code + " " + name; - - // 表示するためのレイヤーを作成する - __markerLayer = new ol.layer.Vector({ - source: new ol.source.Vector() - }); - __map.addLayer(__markerLayer); - // ポップアップを表示するためのオーバーレイを作成する - __overlay = new ol.Overlay({ - element: document.getElementById('popup'), - positioning: 'bottom-center' - }); - + var table2str = dir + geojson + ""; $.when( $.getJSON(dir + geojson) - ).done(function(data2) { - features = data2.features; + ).done(function(date2) { + features = this.features; $(features).each(function() { - if (this.geometry != null) { - if (this.geometry.type == "Point") { - var feature = new ol.Feature({ - geometry: new ol.geom.Point(ol.proj.fromLonLat(this.geometry.coordinates)) - }); - feature.information = this; - feature.setStyle(style); - __markerLayer.getSource().addFeature(feature); - } - if (this.geometry.type == "LineString") { - drawPolygon([this.geometry.coordinates]); - } - } - }); - - // 地図のクリックイベントを設定 - __map.on('click', function (evt) { - var feature = __map.forEachFeatureAtPixel( - evt.pixel, - function (feature) { - return feature; - } - ); - if (feature) { - var coordinates = feature.getGeometry().getCoordinates(); - var info = feature.information; - var element = __overlay.getElement(); - var descriptionHTML = - "
code: " + info.properties.id + "
" + - "
version: " + info.properties.version + "
" + - "
" + info.properties.path + "
"; - element.innerHTML = descriptionHTML; - __overlay.setPosition(coordinates); - __map.addOverlay(__overlay); - } else { - __map.removeOverlay(__overlay); - } + table2str = table2str + ""; + table2str = table2str + ""; + table2str = table2str + ""; }); }); + table2str = table2str + "
" + this.properties.path + "
"; + var table2 = document.getElementById("table2"); + table2.innerHTML = table2str; }); } - -/** - * ポリゴンを描画する - */ -function drawPolygon(coordinates) { - // ジオメトリの作成 - var polygon = new ol.geom.Polygon([]); - polygon.setCoordinates(coordinates); - - // 地物オブジェクトの作成 〜 レイヤーの作成 - var feature = new ol.Feature( - polygon.transform('EPSG:4326', 'EPSG:3857') - ); - feature.setId('tokyotower'); - - var vector = new ol.source.Vector({ - features: [feature] - }); - var routeLayer = new ol.layer.Vector({ - source: vector, - style: new ol.style.Style({ - stroke: new ol.style.Stroke({ color: '#000000', width: 2 }) - //fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] }) - }) - }); - - // 作成したポリゴンをレイヤーにのせる - __map.addLayer(routeLayer); -} +