2017-06-02 17_32_56-TrailPlanner (Running) - Microsoft Visual Studio (Administrator)

之前提及過在WPF 中使用OpenStreetMap 須要安裝 GMap實現, 而在Web Application 中, 當然亦須要叫用其他Library, 而它就是OpenLayer.

OpenLayer 是一套Map library 去dynamic render 地圖, 最重要是, 與Google Map 比較, 使用時不用API key. 但與之比較, 它相對沒有高度, 路線等相關資訊. 但若用來展示的話, 絕對是不二之選. 雖然沒有其他地理相關功能, 但配合其他library 的話, 亦可做到相同的效果.

步驟

安裝 OpenLayer.
建立ASP.net MVC application project 後, 在NuGet Package Manager 中搜尋OL3-Cesium, 選擇後按Install.

註: 在安裝時, 除了利用GUI外, 還可以利用以下指令實現:
```
Install-Package OL3-Cesium
```
須要留意是, 現在OpenLayer 官方最新版本為4, 而在NuGet 最新版本仍是3. 若果想一步到位的話, 可以直接下載其Js 和css 檔直接叫用. 在此例子, 則直接從NuGet 下載.

於Application 進行設定.
修改 BundleConfig 以令開啟時能夠叫用 OpenLayer;

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/ol.css"));

            // Add OL3 bundle.
            bundles.Add(new ScriptBundle("~/bundles/ol3cesium").Include("~/Scripts/ol3cesium.js"));
        }

建立一個Controller 以作測試.
於文件夾Controllers 按右鍵, 選取Add > Controller, 選擇MVC 5 Controller – Empty 後按Add.
建立View 以作測試.
於新建的Controller 中輸入以下代碼, 並於Class 中右鍵, 選取Add View 後按Add.
```
// GET: Map
public ActionResult Index()
{
   return View();
}
```

設定OpenLayer 頁面.
於新建的view 中, 輸入以下代碼:

@*<a class="skiplink" href="#map">Go to map</a>*@
<div id="map" class="map" tabindex="0"></div>
@*<button id="zoom-out">Zoom out</button>
<button id="zoom-in">Zoom in</button>*@
<script>
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
              source: new ol.source.OSM()
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions:  ({
            collapsible: false
          })
        }),
        view: new ol.View({
            center: ol.proj.fromLonLat([114.119110, 22.360872]),
            zoom: 12
        })
      });
      
      $(document).ready(function () {
          $(window).resize(function () {
              $(".container").height($(document).innerHeight);
          });
      });
      //document.getElementById('zoom-out').onclick = function() {
      //  var view = map.getView();
      //  var zoom = view.getZoom();
      //  view.setZoom(zoom - 1);
      //};

      //document.getElementById('zoom-in').onclick = function() {
      //  var view = map.getView();
      //  var zoom = view.getZoom();
      //  view.setZoom(zoom + 1);
      //};
</script>