From 320142f2be7777855c8be66b4264b61a305f238f Mon Sep 17 00:00:00 2001 From: SeiLan0123 Date: Tue, 2 Oct 2018 09:35:33 +0900 Subject: [PATCH] update --- .DS_Store | Bin 6148 -> 6148 bytes index.html | 153 +---------------------------------------------------- js/main.js | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 154 insertions(+), 151 deletions(-) create mode 100644 js/main.js diff --git a/.DS_Store b/.DS_Store index 121b95f13b1094943001620d23e8807af7a2ce0b..493ebacb01d522eb8cf93f299b6c5da6f7dfa4b8 100644 GIT binary patch delta 156 zcmZoMXfc@J&nUDpU^g?P&}JT%bf$VHhAf6+&z$_^q@4UD1_lNJAYKZ@TmORrkj20N zR+E!%7@VA+TL2b;5Mc4#d>5CL(voBbhU+&nUd^_Ksn5+%!75&mfo#ska#6<3>>Pjj E0fa3p&;S4c delta 28 kcmZoMXfc@J&&azmU^g=(?`9sBbf%4EQy4e1bNuB80Dv+G*#H0l diff --git a/index.html b/index.html index e22692c..b5d9398 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ レンタルサイクルステーションリスト +
@@ -12,158 +13,8 @@

レンタルサイクルステーションリスト

    - - diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..edb3e26 --- /dev/null +++ b/js/main.js @@ -0,0 +1,152 @@ +window.onload = function () { + var mapDiv = document.getElementById("map-canvas"); + + var map = new google.maps.Map(mapDiv, { + center: new google.maps.LatLng(35.6, 135.9), + zoom: 11, + }); + + + var query = `prefix geo: + prefix jrrk: + prefix schema: + prefix rdfs: + prefix odp: + prefix ic: + prefix rdf: + + select ?label ?lat ?lng ?type { + {?s ?p odp:TourSpot; +rdfs:label ?label; +geo:lat ?lat; +geo:long ?lng; +ic:住所[ic:都道府県 ?pref]; +rdf:type ?type. +filter (lang(?label) = 'ja') +filter (contains(str(?pref),"福井県")) +} +UNION + { +?s ?p odp:RentalCycleStation; + rdfs:label ?label; + geo:lat ?lat; + geo:long ?lng; + rdf:type ?type. + filter (lang(?label) = 'ja') + } + + }limit 1000 + `; + + console.log("clear"); + + var endpointSparql = "https://sparql.odp.jig.jp/api/v1/sparql"; + + var rentalCycleStation = "http://odp.jig.jp/odp/1.0#RentalCycleStation"; + var tourSpot = "http://odp.jig.jp/odp/1.0#TourSpot"; + + querySparql(endpointSparql, query, function (data) { + console.log(data); + + var items = data.results.bindings; + var spotCounter = 0; + for (var i = 0; i < items.length; i++) { + var item = items[i]; + + var lat = item.lat.value; + var lng = item.lng.value; + var label = item.label.value; + var type = item.type.value; + if (type == rentalCycleStation) { + icon = "images/orangecycle.png" + item.neighbor = []; + for (var j = 0; j < spotCounter; j++) { + + var deltaLat = abs(lat - items[j].lat.value) * 40000 * Math.cos(lng * Math.PI / 180) / 360; + var deltaLng = abs(lng - items[j].lng.value) * 40000 / 360; + var distance = (deltaLat * deltaLat) + (deltaLng * deltaLng); + if (distance <= 10) { + item.neighbor.push(items[j].label.value); + } + } + + console.log(item.neighbor); + } + else if (type == tourSpot) { + icon = "images/center.png"; + spotCounter++; + } + //40000/360 * delta long + //40000*cos(long*pi/180)/360 * delta lat + + var marker = new google.maps.Marker({ + position: new google.maps.LatLng(lat, lng), + icon: { + url: icon, + size: new google.maps.Size(100, 100), + origin: new google.maps.Point(0, 0), + anchor: new google.maps.Point(15, 15), + }, + map: map + }); + marker.item = item; + google.maps.event.addListener(marker, "click", function (e) { + text.innerHTML = this.item.label.value; + if (this.item.type.value == rentalCycleStation) { + text.innerHTML += "

    近くの観光地リスト

    " + this.item.neighbor + "

    "; + } + map.panTo(this.getPosition()); + }); + if (type == rentalCycleStation) { + var li = create("li"); + li.innerHTML = label; + if (item.neighbor.length != 0) { + li.innerHTML += " 近隣の観光地" + item.neighbor.length + "件"; + + } + li.marker = marker; + li.onclick = function () { + map.setZoom(13); + map.panTo(this.marker.getPosition()); + text.innerHTML = this.marker.item.label.value; + if (this.marker.item.type.value == rentalCycleStation) { + text.innerHTML += "

    近くの観光地リスト

    " + this.marker.item.neighbor + "

    "; + } + }; + list.appendChild(li); + } + } + + }); + +}; +var create = function (tag, cls) { + var res = document.createElement(tag); + if (cls != null) + res.className = cls; + return res; +}; + +var querySparql = function (baseurl, q, callback) { + var url = baseurl + "?query=" + encodeURIComponent(q) + "&output=json" + "&callback=" + getCallbackMethod(callback); + jsonp(url); +}; +var getCallbackMethod = function (callback) { + var scallback = "_cb_" + (Math.random() * 1000000 >> 0); + window[scallback] = function (data) { + window[scallback] = null; + callback(data); + }; + return scallback; +}; + +var jsonp = function (url) { + var head = document.getElementsByTagName("head")[0]; + var script = document.createElement("script"); + script.setAttribute("src", url); + script.setAttribute("type", "text/javascript"); + head.appendChild(script); +}; +function abs(val) { + return val < 0 ? -val : val; +};