第四篇arcgis appi for javascriptは当地の発表瓦cacheを読みます.

4358 ワード

学習のポイント
1、dojoフレーム類の定義と継承;
2、ArcGISTiled MapServiceLayerの使用;
htmlページ
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>            </title>
    <link rel="stylesheet" href="http://192.168.1.51/arcgis_js_api/library/3.14/3.14/esri/css/esri.css">
    <style>
        html, body, #mapDiv {
            height: 90%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    </style>
    <script>
        var dojoConfig = {
            async: true,
            packages: [{
                name: "demo",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
            }]
        };
    </script>
    <script src="http://192.168.1.51/arcgis_js_api/library/3.14/3.14/init.js"></script>
    <script>
        var map;
        require(["esri/map","demo/cacheMap"], function (Map,cacheMap) {

            map=new Map("mapDiv");
            var googleMapLayer = new cacheMap("Hello neil baseUrl");
            greeting.innerHTML=googleMapLayer.baseUrl;
            map.addLayer(googleMapLayer);
        });
    </script>
</head>
<body>
<h1 id="greeting">Hello</h1>
<div id="mapDiv"></div>

</body>
</html>
cacheMap.js
/**
 * Created by neil on 2015/8/27.
 */
define(["dojo/_base/declare",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/SpatialReference",
    "esri/geometry/Extent",
    "esri/layers/TileInfo"], function (declare, ArcGISTiledMapServiceLayer) {
    return declare(ArcGISTiledMapServiceLayer, {
        constructor: function (baseUrl) {
            this.baseUrl=baseUrl;
            this.spatialReference = new esri.SpatialReference({ wkid: 102113 });//google       
            this.fullExtent = new esri.geometry.Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference);
            this.initialExtent = new esri.geometry.Extent(12647729.322235, 2541989.81265182, 12775837.7816409, 2625153.2994261, this.spatialReference);
            this.tileInfo = new esri.layers.TileInfo({
                "rows": 256,
                "cols": 256,
                "compressionQuality": 0,
                "origin": {"x": -20037508.3427892, "y": 20037508.3430388},
                "spatialReference": { "wkid": 102113 },
                "lods": [
                    {"level": 10, "scale": 591658710.91, "resolution": 152.874056570353},
                    {"level": 11, "scale": 295829355.45, "resolution": 76.4370282851763},
                    {"level": 12, "scale": 147914677.73, "resolution": 38.2185141425881},
                    {"level": 13, "scale": 73957338.86, "resolution": 19.1092570712941},
                    {"level": 14, "scale": 36978669.43, "resolution": 9.55462853564703},
                    {"level": 15, "scale": 36978669.43, "resolution": 4.77731426782352},
                    {"level": 16, "scale": 36978669.43, "resolution": 2.38865713391176},
                    {"level": 17, "scale": 18489334.72, "resolution": 1.19432856695588}]
            });
            this.loaded = true;
            this.onLoad(this);
        },
        getTileUrl: function (level, row, col) {
            //alert("    1");
            return "http://192.168.1.51/Layers2/" +
                "L" + dojo.string.pad(level, 2, '0') + "/" +
                "R" + dojo.string.pad(row.toString(16), 8, '0') + "/" +
                "C" + dojo.string.pad(col.toString(16), 8, '0') + "." +
                "png";
        }
    });
});
基本的な方法だけを提供して、もっと強力な機能を提供します.