综合欧美国产视频二区_ leaflet入門(mén)——地圖加載（以arcgis服務(wù)為例）

最近由于項目需求，于是開(kāi)始了leaflet的學(xué)習，leaflet在加載地圖上具有自己獨特的優(yōu)勢，能夠在各種瀏覽器（包括手機）下面很好的運行，并且具有很多的插件供我們選擇。在該教程中，我們使用了除leaflet之外的額外插件有 esri-leaflet.js(https://esri.github.io/esri-leaflet/)、L.Control.MousePosition.js(https://github.com/ardhi/Leaflet.MousePosition)、【proj4.js與proj4leaflet.js】(https://github.com/kartena/Proj4Leaflet)。

1. 動(dòng)態(tài)圖層加載

在加載還圖層的時(shí)候注意，此時(shí)的URL只能是動(dòng)態(tài)圖層服務(wù)地址，不能具體到某個(gè)圖層。加載代碼如下：

let map =  L.map('divclass').setView([28.751407,118.628740],12);
let dynamicLayer = L.esri.dynamicMapLayer({
    url:'http://localhost:6080/arcgis/rest/services/js/jsdxt/MapServer/',
    opacity: 0.8,
    f:'json'
});
map.addLayer(dynamicLayer);

2. 要素圖層加載

let map =  L.map('divclass').setView([28.751407,118.628740],12);
let featureLayer = L.esri.featureLayer({
    url:'http://localhost:6080/arcgis/rest/services/js/tx/MapServer/1/'
});
map.addLayer(featureLayer);

3. 切片圖層的加載

our map service must be published using the Web Mercator Auxiliary Sphere tiling scheme (WKID 102100/3857) and the default scale options used by Google Maps, Bing Maps and .Esri Leaflet will not support any other spatial reference for tile layers.
這個(gè)摘自官方的一段（https://esri.github.io/esri-leaflet/api-reference/layers/tiled-map-layer.html），大概的意思是當我們使用L.esri.tiledMapLayer的時(shí)候，支持WKID為102100/3857的投影地圖，既是我們平常使用的web墨卡托投影的地圖，其余的地圖投影不支持，此時(shí)我們就需要用到proj4.js與proj4leaflet.js這兩個(gè)庫來(lái)進(jìn)行自定義投影，具體的投影轉換已經(jīng)各種參數的定義，我們可以通過(guò)（https://epsg.io/）這個(gè)網(wǎng)站來(lái)獲取，比如我們搜索4490,如下圖，箭頭所指的就是我們使用Proj4來(lái)進(jìn)行投影時(shí)的定義參數：

當我們獲取到了投影參數之后，我們就可以使用L.Proj.CRS來(lái)定義一個(gè)投影了，具體代碼如下：

let tileMapUrl ="http://localhost:6082/arcgis/rest/services/jhzhps/JHJT/MapServer";
    let CRS_4490 = new L.Proj.CRS("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs", {
        resolutions: [
            1.40625,
            0.703125,
            0.3515625,
            0.17578125,
            0.087890625,
            0.0439453125,
            0.02197265625,
            0.010986328125,
            0.0054931640625,
            0.00274658203125,
            0.001373291015625,
            6.866455078125E-4,
            3.4332275390625E-4,
            1.71661376953125E-4,
            8.58306884765625E-5,
            4.291534423828125E-5,
            2.1457672119140625E-5,
            1.0728836059570312E-5,
            5.364418029785156E-6,
            2.682209064925356E-6,
            1.3411045324626732E-6
        ],
        origin: [-179.9999, 90.00016],
        bounds: L.bounds([117.75370429660006, 26.99449191557761, ], [123.63262097540007, 32.2668788575695])
        //這里可以有origin、transformation、scales、resulutions、bounds幾個(gè)參數提供
        //選擇，其中scales與resolutions不能同時(shí)配置
    });
    let map = L.map('divclass',{
        crs:CRS_4490
    }).setView([29.108339,119.647787],13);
    let tileMapLayer = L.esri.tiledMapLayer({
        url:tileMapUrl
    });
    //L.esri.basemapLayer('Gray').addTo(map);
    map.addLayer(tileMapLayer);
    L.control.mousePosition({
        'position': 'bottomright'
    }).addTo(map);

此時(shí)，我們已經(jīng)完成了對切片，要素，動(dòng)態(tài)地圖的加載，此代碼僅供初學(xué)者學(xué)習借鑒，整個(gè)文件的代碼如下圖所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>leaflet實(shí)例</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!--添加leaflet樣式文件-->
    <link rel="stylesheet" type="text/css" href="../floodIndex/leaflet/leaflet.css">
    <link rel="stylesheet" type="text/css" href="../floodIndex/css/L.Control.MousePosition.css">
    <!--添加leaflet引用-->
    <script type="text/javascript" src="../floodIndex/leaflet/leaflet-src.js"></script>
    <script type="text/javascript" src="../floodIndex/leaflet/esri-leaflet.js"></script>
    <script type="text/javascript" src="../floodIndex/leaflet/L.Control.MousePosition.js"></script>
    <script type="text/javascript" src="../floodIndex/leaflet/proj4.js"></script>
    <script type="text/javascript" src="../floodIndex/leaflet/proj4leaflet.js"></script>
    <style>
        html,body{
            margin:0;
            padding: 0;
        }
        #divclass{
            height:calc(100% - 50px) ;
            width: 100%;
            background: white;
            position: absolute;
        }
    </style>
</head>
<body>
    <div style="width: 100%;height: 50px">
    </div>
  <div id="divclass">
  </div>
<script>
    //1. 動(dòng)態(tài)圖層加載 注意此時(shí)的URL只能是動(dòng)態(tài)圖層服務(wù)地址 只能具體到某個(gè)圖層
    let map =  L.map('divclass').setView([28.751407,118.628740],12);
    let dynamicLayer = L.esri.dynamicMapLayer({
        url:'http://localhost:6080/arcgis/rest/services/js/jsdxt/MapServer/',
        opacity: 0.8,
        f:'json'
    });
    map.addLayer(dynamicLayer);
    //2.加載要素圖層
    let map =  L.map('divclass').setView([28.751407,118.628740],12);
    let featureLayer = L.esri.featureLayer({
        url:'http://localhost:6080/arcgis/rest/services/js/tx/MapServer/1/'
    });
    map.addLayer(featureLayer);
    //3.加載切片圖層
    /**
     * Your map service must be published using the Web Mercator Auxiliary Sphere tiling scheme (WKID 102100/3857)
     * and the default scale options used by Google Maps, Bing Maps and .
     * Esri Leaflet will not support any other spatial reference for tile layers.
     */
    let tileMapUrl ="http://localhost:6082/arcgis/rest/services/jhzhps/JHJT/MapServer";
    let CRS_4490 = new L.Proj.CRS("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs", {
        resolutions: [
            1.40625,
            0.703125,
            0.3515625,
            0.17578125,
            0.087890625,
            0.0439453125,
            0.02197265625,
            0.010986328125,
            0.0054931640625,
            0.00274658203125,
            0.001373291015625,
            6.866455078125E-4,
            3.4332275390625E-4,
            1.71661376953125E-4,
            8.58306884765625E-5,
            4.291534423828125E-5,
            2.1457672119140625E-5,
            1.0728836059570312E-5,
            5.364418029785156E-6,
            2.682209064925356E-6,
            1.3411045324626732E-6
        ],
        origin: [-179.9999, 90.00016],
        bounds: L.bounds([117.75370429660006, 26.99449191557761, ], [123.63262097540007, 32.2668788575695])
        //這里可以有origin、transformation、scales、resulutions、bounds幾個(gè)參數提供
        //選擇，其中scales與resolutions不能同時(shí)配置
    });
    let map = L.map('divclass',{
        crs:CRS_4490
    }).setView([29.108339,119.647787],13);
    let tileMapLayer = L.esri.tiledMapLayer({
        url:tileMapUrl
    });
    //L.esri.basemapLayer('Gray').addTo(map);
    map.addLayer(tileMapLayer);
    L.control.mousePosition({
        'position': 'bottomright'
    }).addTo(map);
</script>
</body>
</html>

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

1. 動(dòng)態(tài)圖層加載

2. 要素圖層加載

3. 切片圖層的加載