| |
|---|
| | element: document.getElementById('popup'), |
|---|
| | positioning: 'bottom-center' |
|---|
| | }); |
|---|
| | |
|---|
| | // 地物オブジェクトを作成 |
|---|
| | $.getJSON("index.json", function(data) { |
|---|
| | $.when( |
|---|
| | $.getJSON("index.json") |
|---|
| | ).done(function(data) { |
|---|
| | site = data.site; |
|---|
| | $(data.list).each(function() { |
|---|
| | var feature = new ol.Feature({ |
|---|
| | geometry: new ol.geom.Point(ol.proj.fromLonLat(this.coordinates)), |
|---|
| |
|---|
| | feature.information = this; |
|---|
| | feature.setStyle(style); |
|---|
| | __markerLayer.getSource().addFeature(feature); |
|---|
| | }); |
|---|
| | |
|---|
| | // 地図のクリックイベントを設定 |
|---|
| | __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 = |
|---|
| | "<div>" + info.code + "</div>" + |
|---|
| | "<div>" + info.name + "</div>" + |
|---|
| | "<div><a href='index2.html?code="+ info.code +"'>" + info.path + "</a></div>"; |
|---|
| | element.innerHTML = descriptionHTML; |
|---|
| | __overlay.setPosition(coordinates); |
|---|
| | __map.addOverlay(__overlay); |
|---|
| | } else { |
|---|
| | __map.removeOverlay(__overlay); |
|---|
| | } |
|---|
| | }); |
|---|
| | }); |
|---|
| | |
|---|
| | // 地図のクリックイベントを設定 |
|---|
| | __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 = |
|---|
| | "<div>" + info.code + "</div>" + |
|---|
| | "<div>" + info.name + "</div>" + |
|---|
| | "<div><a href='index2.html?code="+ info.code +"'>" + info.path + "</a></div>"; |
|---|
| | element.innerHTML = descriptionHTML; |
|---|
| | __overlay.setPosition(coordinates); |
|---|
| | __map.addOverlay(__overlay); |
|---|
| | } else { |
|---|
| | __map.removeOverlay(__overlay); |
|---|
| | } |
|---|
| | }); |
|---|
| | |
|---|
| | // ICONをのせるベクターを作成する |
|---|
| | /* |
|---|
| | var vectorSource = new ol.source.VectorSource({ |
|---|
| | url: site + '/data/11230_niiza-shi_2020/bldg/11230_niiza-shi_2020.geojson', |
|---|
| | format: new ol.format.GeoJSON() |
|---|
| | }) |
|---|
| | */ |
|---|
| | } |
|---|
| | |
|---|
| | |
