add walking draft

kiang · Jun 25, 2018 · 26e9549 · 26e9549
1 parent 3336066
commit 26e9549
Show file tree

Hide file tree

Showing 6 changed files with 310 additions and 0 deletions.
diff --git a/walking/Road_l.geo.json b/walking/Road_l.geo.json
diff --git a/walking/Road_s.geo.json b/walking/Road_s.geo.json
diff --git a/walking/history_streets.json b/walking/history_streets.json
@@ -0,0 +1 @@
+{"type":"FeatureCollection","totalFeatures":1,"features":[{"type":"Feature","id":"table_01.1","geometry":{"type":"MultiPolygon","coordinates":[[[[120.19467753783663,23.00200003859504],[120.1949113911903,23.00187136797619],[120.19538926085211,23.001700536509244],[120.1956484126973,23.00165464736119],[120.19568936030879,23.001647593353653],[120.19587912758766,23.00158527045378],[120.19608324001098,23.001518190948914],[120.19718771707076,23.00111734275591],[120.19820222589156,23.000753247779983],[120.1991724545748,23.000426536206586],[120.20101487605376,22.99979238889486],[120.20128298416711,22.999703536291374],[120.20167303773943,23.000230136326635],[120.20188928780459,23.000498462541543],[120.20223541939004,23.000965819711038],[120.20341322797803,23.002556849808876],[120.2039275718141,23.002407876947007],[120.20467320313905,23.002156729588716],[120.2058253387074,23.001834921761066],[120.20673096543999,23.0015822508605],[120.20733000990232,23.001413051976222],[120.20856274506923,23.001095031781077],[120.2088457151184,23.00106199912435],[120.21275127722596,22.999992994996067],[120.21230485149997,22.99782695343592],[120.21224962125791,22.99754868338397],[120.21219548135966,22.997268144670855],[120.21214242130613,22.996993197801352],[120.2120213004023,22.99636557730057],[120.21195293173338,22.99602636626206],[120.21190492732211,22.995807145712988],[120.21188358491987,22.995320379980964],[120.21186305121448,22.99494332103157],[120.21183799556273,22.994518561438255],[120.21169909484689,22.992809389756705],[120.21146770779394,22.989088159521014],[120.21131929406195,22.98645580734573],[120.2109847922684,22.98639903149988],[120.21075990392036,22.986367710961698],[120.21041473677701,22.986319638088897],[120.20995880211446,22.98625613765246],[120.20983235363269,22.986248617133032],[120.20832905190694,22.986296225815792],[120.20814918419927,22.98524130516225],[120.20678686870322,22.985484113969267],[120.20667942890414,22.985503263863546],[120.20619736303387,22.985585199843708],[120.20573750743587,22.985662246158924],[120.20426010777867,22.985909768122593],[120.20390718304121,22.98614050067165],[120.20361024340392,22.986340511403583],[120.20350363942133,22.98643814540825],[120.20305118595218,22.986986992055208],[120.20241045153087,22.987128437517026],[120.20183700424658,22.98721510673213],[120.2018610772929,22.988129227382075],[120.20157709463527,22.988154076096695],[120.20146555770349,22.988163894958497],[120.20093336155874,22.988217169266143],[120.20074116145575,22.98823640949404],[120.20063240564386,22.988246026846046],[120.2003423152572,22.98827140579869],[120.20023037245758,22.98832767624713],[120.19859469180857,22.988422745679934],[120.19774048547137,22.9884855905313],[120.19754492567947,22.988525934443093],[120.19753295560378,22.98852841683596],[120.19753768606932,22.989517101847497],[120.19826435716945,22.991791763707763],[120.19645726196279,22.992150686976764],[120.19316208087582,22.992813251315816],[120.19314750128842,22.992826315978256],[120.19326125232384,22.993314266656416],[120.19215859223375,22.99352657395477],[120.19252561329137,22.995056160855],[120.19279584435118,22.99615979834228],[120.19289038474949,22.996519527101317],[120.19281636581582,22.996618919458474],[120.19275008955033,22.99672724793472],[120.19252909404015,22.997142994662713],[120.19241158130909,22.997305465977554],[120.19218188134671,22.99762553077675],[120.19213244996196,22.997697618447578],[120.19199413136111,22.99779500138293],[120.19190642457414,22.997844823935548],[120.19187949957474,22.99791825100737],[120.19254036305813,22.998365468027252],[120.19305448577079,22.998310326438993],[120.1931533974339,22.998306470740413],[120.19344770078074,22.9983079697274],[120.19359122916441,22.998323959211575],[120.19389008389061,22.998351637124532],[120.19410874964011,22.99840288324332],[120.19427765853554,22.99850619075247],[120.19453988050574,22.99875601198284],[120.19483585182662,22.998873042234646],[120.1950427456174,22.99892422724202],[120.19512833417386,22.99918187113204],[120.19512588918097,22.99919711625049],[120.1946974544575,22.99967500779954],[120.19428921091553,23.00013014398999],[120.19424107261916,23.000306456753815],[120.19426597508988,23.00047442189281],[120.19432598764254,23.000677441435947],[120.19443428697282,23.00109655089875],[120.1944609855989,23.00119988052913],[120.19466663620318,23.001995727713222],[120.19467753783663,23.00200003859504]]]]},"geometry_name":"geom","properties":{"id":0}}],"crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG::4326"}}}
diff --git a/walking/index.html b/walking/index.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+    <meta charset="utf-8">
+    <meta property="og:title" content="北區、中西區步行規劃">
+    <meta property="og:image" content="http://kiang.github.io/tainan_basecode/walking/images/og_image.png">
+    <meta property="og:description" content="北區、中西區步行規劃">
+    <meta property="og:type" content="website">
+    <title>北區、中西區步行規劃</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.css" type="text/css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="../css/ol3-sidebar.css" />
+    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
+    <style>
+      html, body {
+        width: 100%;
+        height: 100%;
+        padding: 0px;
+        margin: 0px;
+      }
+      .map {
+        width:100%;
+        height:100%;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+      }
+      .ol-popup {
+        position: absolute;
+        background-color: white;
+        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+        padding: 15px;
+        border-radius: 10px;
+        border: 1px solid #cccccc;
+        bottom: 12px;
+        left: -50px;
+        min-width: 300px;
+      }
+      .ol-popup:after, .ol-popup:before {
+        top: 100%;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+      }
+      .ol-popup:after {
+        border-top-color: white;
+        border-width: 10px;
+        left: 48px;
+        margin-left: -10px;
+      }
+      .ol-popup:before {
+        border-top-color: #cccccc;
+        border-width: 11px;
+        left: 48px;
+        margin-left: -11px;
+      }
+      .ol-popup-closer {
+        text-decoration: none;
+        position: absolute;
+        top: 2px;
+        right: 8px;
+      }
+      .ol-popup-closer:after {
+        content: "✖";
+      }
+    </style>
+  </head>
+  <body>
+    <div id="fb-root"></div>
+    <script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.12&appId=1393405437614114&autoLogAppEvents=1';
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
+    <div id="sidebar" class="sidebar collapsed">
+        <!-- Nav tabs -->
+        <div class="sidebar-tabs">
+            <ul role="tablist">
+                <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
+                <li><a href="#fb" role="tab"><i class="fa fa-facebook"></i></a></li>
+                <li><a href="https://github.com/kiang/tainan_basecode/tree/gh-pages/walking" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
+            </ul>
+        </div>
+
+        <!-- Tab panes -->
+        <div class="sidebar-content">
+            <div class="sidebar-pane" id="home">
+                <h1 class="sidebar-header">
+                    北區、中西區步行規劃
+                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
+                </h1>
+                <p id="sidebar-main-block"></p>
+                <hr />
+                <ul>
+                  <li>藍線：寬度在 20 公尺以上的道路</li>
+                  <li>綠線：寬度在 3 公尺以下的道路</li>
+                  <li>紅色區域：文化局劃設的歷史街區範圍</li>
+                </ul>
+            </div>
+            <div class="sidebar-pane" id="fb">
+              <div class="fb-page" data-href="https://www.facebook.com/k.olc.tw/" data-tabs="timeline" data-width="380" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/k.olc.tw/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/k.olc.tw/">江明宗</a></blockquote></div>
+
+              <hr /> #捐款支持明宗以科技監督台南
+<br />線上刷卡： <a href="https://donate.spgateway.com/finjonkiang/go" target="_blank">https://donate.spgateway.com/finjonkiang/go</a>
+<br />郵局劃撥： 31639415
+<br />收款戶名： 107年臺南市議員擬參選人江明宗政治獻金專戶
+            </div>
+        </div>
+    </div>
+    <div id="map" class="map"></div>
+    <div id="popup" class="ol-popup">
+      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
+      <div id="popup-content"></div>
+    </div>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
+    <script src="../js/ol3-sidebar.js"></script>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/walking/main.js b/walking/main.js
@@ -0,0 +1,176 @@
+var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'right' });
+
+var styleRed = new ol.style.Style({
+  fill: new ol.style.Fill({
+    color: [255, 0, 0, 0.3]
+  })
+});
+
+var styleGreen = new ol.style.Style({
+  stroke: new ol.style.Stroke({
+    width: 3,
+    color: [0, 255, 0, 0.7]
+  })
+});
+
+var styleBlue = new ol.style.Style({
+  stroke: new ol.style.Stroke({
+    width: 5,
+    color: [0, 0, 255, 0.7]
+  })
+});
+
+var projection = ol.proj.get('EPSG:3857');
+var projectionExtent = projection.getExtent();
+var size = ol.extent.getWidth(projectionExtent) / 256;
+var resolutions = new Array(20);
+var matrixIds = new Array(20);
+for (var z = 0; z < 20; ++z) {
+    // generate resolutions and matrixIds arrays for this WMTS
+    resolutions[z] = size / Math.pow(2, z);
+    matrixIds[z] = z;
+}
+var container = document.getElementById('popup');
+var content = document.getElementById('popup-content');
+var closer = document.getElementById('popup-closer');
+
+closer.onclick = function() {
+  popup.setPosition(undefined);
+  closer.blur();
+  return false;
+};
+
+var popup = new ol.Overlay({
+  element: container,
+  autoPan: true,
+  autoPanAnimation: {
+    duration: 250
+  }
+});
+
+var nlscMatrixIds = new Array(21);
+for (var i=0; i<21; ++i) {
+  nlscMatrixIds[i] = i;
+}
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    url: 'history_streets.json',
+    format: new ol.format.GeoJSON()
+  }),
+  style: styleRed
+});
+
+var roadL = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    url: 'Road_l.geo.json',
+    format: new ol.format.GeoJSON()
+  }),
+  style: styleBlue
+});
+
+var roadS = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    url: 'Road_s.geo.json',
+    format: new ol.format.GeoJSON()
+  }),
+  style: styleGreen
+});
+
+var baseLayer = new ol.layer.Tile({
+    source: new ol.source.WMTS({
+        matrixSet: 'EPSG:3857',
+        format: 'image/png',
+        url: 'https://wmts.nlsc.gov.tw/wmts',
+        layer: 'EMAP',
+        tileGrid: new ol.tilegrid.WMTS({
+            origin: ol.extent.getTopLeft(projectionExtent),
+            resolutions: resolutions,
+            matrixIds: matrixIds
+        }),
+        style: 'default',
+        wrapX: true,
+        attributions: '<a href="https://maps.nlsc.gov.tw/" target="_blank">國土測繪圖資服務雲</a>'
+    }),
+    opacity: 0.5
+});
+
+var appView = new ol.View({
+  center: ol.proj.fromLonLat([120.301507, 23.124694]),
+  zoom: 11
+});
+
+var map = new ol.Map({
+  layers: [baseLayer, vector, roadL, roadS],
+  overlays: [popup],
+  target: 'map',
+  view: appView
+});
+
+map.addControl(sidebar);
+
+var geolocation = new ol.Geolocation({
+  projection: appView.getProjection()
+});
+
+geolocation.setTracking(true);
+
+geolocation.on('error', function(error) {
+        console.log(error.message);
+      });
+
+var positionFeature = new ol.Feature();
+
+positionFeature.setStyle(new ol.style.Style({
+  image: new ol.style.Circle({
+    radius: 6,
+    fill: new ol.style.Fill({
+      color: '#3399CC'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#fff',
+      width: 2
+    })
+  })
+}));
+
+var changeTriggered = false;
+geolocation.on('change:position', function() {
+  var coordinates = geolocation.getPosition();
+  if(coordinates) {
+    positionFeature.setGeometry(new ol.geom.Point(coordinates));
+    if(false === changeTriggered) {
+      var mapView = map.getView();
+      mapView.setCenter(coordinates);
+      mapView.setZoom(17);
+      changeTriggered = true;
+    }
+  }
+});
+
+new ol.layer.Vector({
+  map: map,
+  source: new ol.source.Vector({
+    features: [positionFeature]
+  })
+});
+
+map.on('singleclick', function(evt) {
+  map.getView().setZoom(17);
+  map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
+    var p = feature.getProperties();
+    var message = '<div class="table-responsive"><table class="table">';
+    var fCenter = feature.getGeometry().getCoordinates();
+    for(k in p) {
+      if(k !== 'geometry') {
+        message += '<tr><td>' + k + '</td><td>' + p[k] + '</td></tr>';
+      }
+    }
+    message += '</table></div>';
+    $('#sidebar-main-block').html(message);
+    sidebar.open('home');
+    content.innerHTML = p['巷道名稱'];
+    popup.setPosition(fCenter);
+    map.getView().setCenter(fCenter);
+  });
+});
diff --git a/walking/og_image.png b/walking/og_image.png