Openlayer 3加載本地ArcGIS切片


第一篇博客,簡單的開個頭吧。希望自己能堅持記錄。一般什么情況什么人需要這樣的需求呢,伐木的光頭強大哥說我們在深山老林里,沒網的啊,地圖就手機本地duang的加載一下吧。那么Server啊就要丟掉丟掉。丟掉手表丟掉外套,丟掉背包再丟掉嘮叨,咳咳,跑題了。來看看具體步驟吧,非常簡單但詳細。

1. 制作切片的數據基本信息如下:

圖層數據信息:

地理坐標系:  GCS_WGS_1984

基准面:          D_WGS_1984

本初子午線:              Greenwich

角度單位:     Degree

數據框信息:

GCS_WGS_1984

WKID: 4326 權限: EPSG

2.設置的緩存方式如下:(緩存切片方案ArcGIS online/Bing/google),緩存級別10-16;高級設置:切片原點默認,存儲格式松散型EXPLODED。 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3.發布切片服務前先分析一下結果:(無錯誤)

 

4.發布完成后可以登錄ArcGIS server查看緩存的相關信息或者在本地的緩存文件夾arcgiscache中查看緩存的信息:

 

5.緩存好的本地文件,文件命名方式是16進制:

 

6.測試代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol加載ArcGIS本地切片</title>
    <link rel="stylesheet" href="ol.css">
    <script src="ol.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
    // 設置尋甸縣為地圖中心,此處進行坐標轉換, 把EPSG:4326的坐標,轉換為EPSG:3857坐標,因為ol默認使用的是EPSG:3857坐標
    pos = ol.proj.transform([103.25, 25.56], 'EPSG:4326', 'EPSG:3857');
    //alert(pos);
    //創建地圖
    var map = new ol.Map({
        view: new ol.View({
            center:pos,
            zoom: 10
        }),
        //添加open street map圖層
        layers:[
            new ol.layer.Tile({
                source:new  ol.source.OSM()
            })
        ],
        //將地圖添加到的map容器中
        target: 'map'
    });
    //給8位字符串文件名補0
    function zeroPad(num, len, radix) {
        var str = num.toString(radix || 10);
        while (str.length < len) {
            str = "0" + str;
        }
        return str;
    }
    // ol.source.XYZ添加瓦片地圖的層
    var tileLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tileUrlFunction: function (tileCoord) {
                //alert(tileCoord[0] + " X= " + tileCoord[1] + " Y= " + tileCoord[2]);
                var x = 'C' + zeroPad(tileCoord[1], 8, 16);
                var y = 'R' + zeroPad(-tileCoord[2] - 1, 8, 16);
                var z = 'L' + zeroPad(tileCoord[0], 2, 10);
                return  '_alllayers/' + z + '/' + y + '/' + x + '.png';
            },
            projection: 'EPSG:3857'
        })
    });
    map.addLayer(tileLayer);
</script>
</body>
</html>

7.調試的結果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM