1、布局，加载离线图层

tx1.gif

主要是实现：

1. 页面布局
2. 加载自己的离线图层

页面主要代码

<div id="app" class="mui-content" style="font-size: 14px;"></div>

js

function initMap(){
    var center = [102.046358638578 , 36.5085746843744]; //西宁 中心点
    map = new ol.Map({
        interactions: ol.interaction.defaults(),
        view: new ol.View({
            projection: 'EPSG:4326',
            center: center,
            zoom: 16
        }),
        controls: ol.control.defaults().extend([
            new ol.control.ScaleLine()
        ]),
        layers: [],
        target: "app"
    });
    
    //加载离线图层
    var gisAdrr = "xxx";
    var _url = gisAdrr + "/xxx/gis/tile/{z}/{y}/{x}/google";
    offlineMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: _url        
        }),
        isTile: true
    });
    
    map.addLayer(offlineMapLayer);
}