openlayers3教材詳解及demo（完整）

来源:http://www.cnblogs.com/benmumu/archive/2017/12/21/8081068.html
-Advertisement-
Play Games

openlayers3教材詳解及demo（完整） OpenLayers 3對OpenLayers網路地圖庫進行了根本的重新設計。版本2雖然被廣泛使用，但從JavaScript開發的早期發展階段開始，已日益現實出它的落後。 OL3已運用現代的設計模式從底層重寫。 最初的版本旨在支持第2版提供的功能，提 ...


        openlayers3教材詳解及demo（完整）        OpenLayers 3對OpenLayers網路地圖庫進行了根本的重新設計。版本2雖然被廣泛使用，但從JavaScript開發的早期發展階段開始，已日益現實出它的落後。 OL3已運用現代的設計模式從底層重寫。        最初的版本旨在支持第2版提供的功能，提供大量商業或免費的瓦片資源以及最流行的開源矢量數據格式。與版本2一樣，數據可以被任意投影。最初的版本還增加了一些額外的功能，如能夠方便地旋轉地圖以及顯示地圖動畫。        OpenLayers 3同時設計了一些主要的新功能，如顯示三維地圖，或使用WebGL快速顯示大型矢量數據集，這些功能將在以後的版本中加入。 首先需要明白的一點是，Source和Layer是一對一的關係，有一個Source，必然需要一個Layer，然後把這個Layer添加到Map上，就可以顯示出來了。通過官網的API搜索ol.source可以發現有很多不同的Source，但歸納起來共三種：ol.source.Tile，ol.source.Image和ol.source.Vector。  
  • ol.source.Tile對應的是瓦片數據源，現在網頁地圖服務中，絕大多數都是使用的瓦片地圖，而OpenLayers 3作為一個WebGIS引擎，理所當然應該支持瓦片。
  • ol.source.Image對應的是一整張圖，而不像瓦片那樣很多張圖，從而無需切片，也可以載入一些地圖，適用於一些小場景地圖。
  • ol.source.Vector對應的是矢量地圖源，點，線，面等等常用的地圖元素(Feature)，就囊括到這裡面了。這樣看來，只要這兩種Source就可以搞定80%的需求了。
  我們先瞭解最為複雜的ol.source.Tile，其葉子節點類有很多，大致可以分為幾類：
  • 線上服務的Source，包括ol.source.BingMaps(使用的是微軟提供的Bing線上地圖數據)，ol.source.MapQuest(使用的是MapQuest提供的線上地圖數據)(註: 由於MapQuest開始收費，ol v3.17.0就移除了ol.source.MapQuest)，ol.source.OSM(使用的是Open Street Map提供的線上地圖數據)，ol.source.Stamen(使用的是Stamen提供的線上地圖數據)。沒有自己的地圖伺服器的情況下，可直接使用它們，載入地圖底圖。
// 創建地圖 new ol.Map({ // 設置地圖圖層 layers: [ // 創建一個使用Open Street Map地圖源的瓦片圖層 new ol.layer.Tile({source: new ol.source.OSM()}) ], // 設置顯示地圖的視圖 view: new ol.View({ center: [0, 0], // 定義地圖顯示中心於經度0度，緯度0度處 zoom: 2 // 並且定義地圖顯示層級為2 }), // 讓id為map的div作為地圖的容器 target: 'map' });   //地圖聯動效果 <p>地圖1</p><div id="map1" style="width: 100%"></div><p>地圖2</p><div id="map2" style="width: 100%"></div><script> // 創建一個視圖 var view = new ol.View({ center: [0, 0], zoom: 2 });   // 創建第一個地圖 new ol.Map({ layers: [ new ol.layer.Tile({source: new ol.source.OSM()}) ], view: view, target: 'map1' });   // 創建第二個地圖 new ol.Map({ layers: [ new ol.layer.Tile({source: new ol.source.OSM()}) ], view: view, target: 'map2' }); 代碼只有一點不同，即兩個ol.Map使用了同一個view，就是這麼神奇。   view部分 <body> <div id="map" style="width: 100%, height: 400px"></div> <div id="navigate-container"> <input type="button" onClick="moveToLeft();" value="左移" /> <input type="button" onClick="moveToRight();" value="右移" /> <input type="button" onClick="moveToUp();" value="上移" /> <input type="button" onClick="moveToDown();" value="下移" /> <input type="button" onClick="moveToChengDu();" value="移到成都" /> <input type="button" onClick="zoomIn();" value="放大" /> <input type="button" onClick="zoomOut();" value="縮小" /> </div> <script> var map = new ol.Map({ layers: [ new ol.layer.Tile({source: new ol.source.OSM()}) ], view: new ol.View({ // 設置成都為地圖中心，此處進行坐標轉換， 把EPSG:4326的坐標，轉換為EPSG:3857坐標，因為ol預設使用的是EPSG:38 57坐標 center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'), zoom: 10 }), target: 'map' });   // 向左移動地圖 function moveToLeft() { var view = map.getView(); var mapCenter = view.getCenter(); // 讓地圖中心的x值增加，即可使得地圖向左移動，增加的值根據效果可自由設定 mapCenter[0] += 50000; view.setCenter(mapCenter); map.render(); }   // 向右移動地圖 function moveToRight() { var view = map.getView(); var mapCenter = view.getCenter(); // 讓地圖中心的x值減少，即可使得地圖向右移動，減少的值根據效果可自由設定 mapCenter[0] -= 50000; view.setCenter(mapCenter); map.render(); }   // 向上移動地圖 function moveToUp() { var view = map.getView(); var mapCenter = view.getCenter(); // 讓地圖中心的y值減少，即可使得地圖向上移動，減少的值根據效果可自由設定 mapCenter[1] -= 50000; view.setCenter(mapCenter); map.render(); }   // 向下移動地圖 function moveToDown() { var view = map.getView(); var mapCenter = view.getCenter(); // 讓地圖中心的y值增加，即可使得地圖向下移動，增加的值根據效果可自由設定 mapCenter[1] += 50000; view.setCenter(mapCenter); map.render(); }   // 移動到成都 function moveToChengDu() { var view = map.getView(); // 設置地圖中心為成都的坐標，即可讓地圖移動到成都 view.setCenter(ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857')); map.render(); }   // 放大地圖 function zoomIn() { var view = map.getView(); // 讓地圖的zoom增加1，從而實現地圖放大 view.setZoom(view.getZoom() + 1); }   // 縮小地圖 function zoomOut() { var view = map.getView(); // 讓地圖的zoom減小1，從而實現地圖縮小 view.setZoom(view.getZoom() - 1); }   </script></body>   限制地圖範圍   <body> <div id="map" style="width: 100%"></div> <script> new ol.Map({ layers: [ new ol.layer.Tile({source: new ol.source.OSM()}) ], view: new ol.View({ // 設置地圖中心範圍 extent: [102, 29, 104, 31], // 設置成都為地圖中心 center: [104.06, 30.67], projection: 'EPSG:4326', zoom: 10 }), target: 'map' }); </script></body> 就只是添加了 extent: [102, 29, 104, 31],這行代碼就實現了功能（仔細看extent參數的說明）。 extent參數類型為[minX, minY, maxX, maxY]的ol.Extent，很容易記住。   限制地圖縮放級別 <body> <div id="map" style="width: 100%"></div> <script> new ol.Map({ layers: [ new ol.layer.Tile({source: new ol.source.OSM()}) ], view: new ol.View({ // 設置成都為地圖中心 center: [104.06, 30.67], projection: 'EPSG:4326', zoom: 10, // 限制地圖縮放最大級別為14，最小級別為10 minZoom: 10, maxZoom: 14 }), target: 'map' }); </script></body>   自適配區域 <body> <div id="map" style="width: 100%"></div> <input type="button" value="顯示成都" onclick="fitToChengdu();" /> <script> var map = new ol.Map({ layers: [ new ol.layer.Tile({source: new ol.source.OSM()}) ], view: new ol.View({ // 設置成都為地圖中心 center: [104.06, 30.67], projection: 'EPSG:4326', zoom: 10 }), target: 'map' });   function fitToChengdu() { // 讓地圖最大化完全地顯示區域[104, 30.6, 104.12, 30.74] map.getView().fit([104, 30.6, 104.12, 30.74], map.getSize()); } </script></body> source和Layer部分   // 創建地圖 new ol.Map({ // 設置地圖圖層 layers: [ // 創建一個使用Open Street Map地圖源的瓦片圖層 new ol.layer.Tile({source: new ol.source.OSM()}) ], // 設置顯示地圖的視圖 view: new ol.View({ center: [0, 0], // 定義地圖顯示中心於經度0度，緯度0度處 zoom: 2 // 並且定義地圖顯示層級為2 }), // 讓id為map的div作為地圖的容器 target: 'map' });   //地圖聯動效果 <p>地圖1</p><div id="map1" style="width: 100%"></div><p>地圖2</p><div id="map2" style="width: 100%"></div><script> // 創建一個視圖 var view = new ol.View({ center: [0, 0], zoom: 2 });   // 創建第一個地圖 new ol.Map({ layers: [ new ol.layer.Tile({source: new ol.source.OSM()}) ], view: view, target: 'map1' });   // 創建第二個地圖 new ol.Map({ layers: [ new ol.layer.Tile({source: new ol.source.OSM()}) ], view: view, target: 'map2' }); 代碼只有一點不同，即兩個ol.Map使用了同一個view，就是這麼神奇。   view部分 <body> <div id="map" style="width: 100%, height: 400px"></div> <div id="navigate-container"> <input type="button" onClick="moveToLeft();" value="左移" /> <input type="button" onClick="moveToRight();" value="右移" /> <input type="button" onClick="moveToUp();" value="上移" /> <input type="button" onClick="moveToDown();" value="下移" /> <input type="button" onClick="moveToChengDu();" value="移到成都" /> <input type="button" onClick="zoomIn();" value="放大" /> <input type="button" onClick="zoomOut();"
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ChromeExtension那些事兒
    Chrome Extension是什麼呢？簡而言之，就是Chrome擴展，它是基於Chrome瀏覽器的，我們可以理解它為一個獨立運行在Chrome瀏覽器下的APP，當然核心編程語言就是JavaScript咯，然後結合HTML以及CSS來開發。重點是，這個“APP”功能強大，可以獨自運行，亦可以與打開... ...
  • createElement與createDocumentFragment的一些小區別
    在DOM操作里，createElement是創建一個新的節點，createDocumentFragment是創建一個文檔片段。 網上可以搜到的大部分都是說使用createDocumentFragment主要是因為避免因createElement多次添加到document.body引起的效率問題，比如 ...
  • SVG繪圖學習總結
    在我們平時做的很多網站項目中都會需要繪製各種各樣的二維矢量圖形。比如做城市地下管網的斷面圖、管線管點的坐標位置矢量標識圖、鑽孔位置或地層剖面圖等等。我們有很多種方法來繪製這些矢量圖（vml、canvas、svg等等），下麵我要介紹的是SVG繪圖語言，也是我在做項目中用到比較多的，僅以我的個人實戰經驗 ...
  • zTree 優秀的jquery樹插件
    zTree 優秀的jquery樹插件,文檔詳細，渲染快 使用方法： 1、引用zTree的js和css文件 2、ztree的html為 需加Class：ztree； 3、初始化樹 後臺介面返回數據示例： 4、加入滑鼠移動到顯示的自定義按鈕 5、文檔地址 http://www.treejs.cn/v3/ ...
  • 深入理解 Promise
    自從ES6流行起來，Promise 的使用變得更頻繁更廣泛了，比如非同步請求一般返回一個 Promise 對象，Generator 中 yield 後面一般跟 Promise 對象，ES7中 Async 函數中 await 後面一般也是 Promise 對象，還有更多的 NodeAPI 也會返回 Pr ...
  • 使用背景圖修改radio、checkbox樣式
    如果覺得設置樣式太麻煩，或者頁面上選中的樣式太複雜，也可以用背景圖去修改樣式<div class=""> <label><input type="radio" name="1"><i class="spot"></i>123456</label> <label><input type="radio" ...
  • 前端技術的發展與演變
    近年來，前端技術的發展迅速，但因為前端知識面龐大，在實際學習當中往往無法理清其中的脈絡。下麵從各種庫、框架、插件的層面上，對前端知識點做一些簡單的梳理。從軟體工程上，將前端分為四個由淺及深的層面或階段。 一、基礎層（瀏覽器原生支持html/css/js） HTML超文本標記語言，用標簽構建網頁的內容 ...
  • .15-淺析webpack源碼之WebpackOptionsApply模塊之插件王中王
    總體過了一下後面的流程，發現Compiler模塊確實不適合單獨講解，這裡繼續講解後面的代碼： 這行代碼與之前設置options預設值非常相似，但是複雜程度根本不是一個次元的。 這一節只能簡單的看一眼內部到底有多少東西，整理後源碼如下： 這個模塊除去父類引入，其餘插件光頂部引入就有34個，簡直就是插件 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類