| |
|---|
| | $("#timestamp2").append("<p>上図は " + data.date + " での状況<br/> 赤: 未入力, オレンジ: とりあえず入力されている, 蛍光グリーン: 入力済み</p>") ; |
|---|
| | }); |
|---|
| | </script> |
|---|
| | <script type="text/javascript"> |
|---|
| | var map = new ol.Map({ |
|---|
| | target: 'map', |
|---|
| | layers: [ |
|---|
| | new ol.layer.Tile({ |
|---|
| | source: new ol.source.OSM() |
|---|
| | }) |
|---|
| | ], |
|---|
| | view: new ol.View({ |
|---|
| | center: ol.proj.fromLonLat([37.41, 8.82]), |
|---|
| | zoom: 4 |
|---|
| | }) |
|---|
| | const ort = new ol.layer.Tile({ |
|---|
| | source: new ol.source.OSM(), |
|---|
| | title: "OpenStreetMap std", |
|---|
| | visible: true |
|---|
| | }); |
|---|
| | |
|---|
| | const fuel0 = new ol.layer.VectorTile({ |
|---|
| | source: new ol.source.VectorTile({ |
|---|
| | format: new ol.format.MVT(), |
|---|
| | url: "./tiles/tileFuel0/" + "{z}/{x}/{y}.pbf" |
|---|
| | }), |
|---|
| | title: "Fuel: 未入力", |
|---|
| | visible: true, |
|---|
| | opacity: 0.8, |
|---|
| | style: function(feature){ |
|---|
| | return [ |
|---|
| | new ol.style.Style({ |
|---|
| | image: new ol.style.Circle({ |
|---|
| | radius: 6, |
|---|
| | fill: new ol.style.Fill({color: "white"}) |
|---|
| | }) |
|---|
| | }), |
|---|
| | new ol.style.Style({ |
|---|
| | image: new ol.style.Circle({ |
|---|
| | radius: 4, |
|---|
| | fill: new ol.style.Fill({ |
|---|
| | color: "#ff0000" |
|---|
| | }) |
|---|
| | }) |
|---|
| | }) |
|---|
| | ]; |
|---|
| | } |
|---|
| | }); |
|---|
| | |
|---|
| | const view = new ol.View({ |
|---|
| | center: ol.proj.fromLonLat([140.6,36.5]), |
|---|
| | zoom: 10 |
|---|
| | }); |
|---|
| | |
|---|
| | const map = new ol.Map({ |
|---|
| | target: "map", |
|---|
| | controls: ol.control.defaults().extend([new ol.control.ScaleLine()]), |
|---|
| | view: view, |
|---|
| | layers: [ort, fuel0] |
|---|
| | }); |
|---|
| | |
|---|
| | map.on("click", function(evt){ |
|---|
| | const feature = map.forEachFeatureAtPixel(evt.pixel, function(feature){ |
|---|
| | return feature; |
|---|
| | }); |
|---|
| | if(feature){ |
|---|
| | document.getElementById("info").innerHTML = feature.get("P29_005"); |
|---|
| | } |
|---|
| | }); |
|---|
| | </script> |
|---|
| | |
|---|
| | </body> |
|---|
| | |
