什么是Openlayers?

簡單來說，Openlayers是一個基于Javacript開發，免費、開源的前端地圖開發庫，使用它，可以很容易的開發出WebGIS系統。目前Openlayers支持地圖瓦片、矢量數據等眾多地圖數據格式，支持比較完整的地圖交互操作。目前OpenLayers已經成為一個擁有眾多開發者和幫助社區的成熟、流行的框架，在國內外的GIS相關行業中得到了廣泛的應用。

基礎類簡單了解

Map

Map這個類代表一個地圖容器，它擁有一個target屬性，target屬性設置的是地圖要掛接到哪個dom節點上進行渲染。

Layer

Layer類，其實就是圖層，圖層就是空間數據可視化的一種表現

View

地圖有放大、縮小、設置中心點的功能，Openlayers把這些關于視圖變化的功能封裝到了一個叫做View的類里面

示例代碼

引入ol文件，路徑改成自己本地或網絡的：

<link rel="stylesheet" href="../openlayerJs/ol.css" type="text/css"> <script src="../openlayerJs/ol.js"></script>

css:

* {margin:0; padding:0;}html,body{height:100%;}.map {height:100%;width: 100%;}

js:

let mapUrl ='http://218.200.69.7:12000/CHN/googlemaps/satellite/{z}/{x}/{y}.jpg'; //離線地圖地址let mapCenter=[112.286051,30.365276];let terrain = new ol.layer.Tile({source: new ol.source.XYZ({projection: "EPSG:3857",url: mapUrl})});var views = new ol.View({projection: ol.proj.get('EPSG:3857'),center: ol.proj.transform(mapCenter, 'EPSG:4326', 'EPSG:3857'),//無偏移時 ol.proj.fromLonLat([112.286051,30.365276]),zoom: 15,minZoom: 3,maxZoom: 21}); var map = new ol.Map({target:'map',logo: 'false',// controls: ol.control.defaults({ attribution: false, zoom: false, rotate: false }).extend([// //添加比例尺控件// new ol.control.ScaleLine({// units: 'metric',// target: 'scalebar',// className: 'ol-scale-line'// })// ]),layers: [terrain],view:views}); }

完整實例地址
鏈接: https://download.csdn.net/download/weixin_43578304/86736923

總結

以上是生活随笔為你收集整理的使用openlayers加载离线地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。