Esri / jsapi-resources

A collection of resources for developers using the ArcGIS Maps SDK for JavaScript.
https://developers.arcgis.com/javascript/latest/
Apache License 2.0
702 stars 559 forks source link

when i load Tianditu(天地图) with WebTiledLayer,3.13 and 3.14 is ok,but 3.15 and 3.16 has error #21

Closed laixiangran closed 8 years ago

laixiangran commented 8 years ago

image

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>

    <link rel="stylesheet" `href="http://js.arcgis.com/3.15/dijit/themes/nihilo/nihilo.css">`
    <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%; width: 100%;
            margin: 0; padding: 0;
        }
        body{
            background-color: #fff; overflow:hidden;
            font-family: sans-serif;
        }
        #header {
            padding: 4px 15px 4px 0;
            background-color: #F2F2EC;
            color: #575757;
            font-size: 16pt;
            text-align: right;
            font-weight: bold;
            height:55px;
        }
        #subheader {
            color: #575757;
            font-size: small;
            padding: 5px 0 0 0;
            text-align: right;
        }
        #subheader a { color: #575757; }

        .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
        #ds-h div { width: 100%; }
        #ds .o1 { filter: alpha(opacity=10); opacity: .1; }
        #ds .o2 { filter: alpha(opacity=8); opacity: .08; }
        #ds .o3 { filter: alpha(opacity=6); opacity: .06; }
        #ds .o4 { filter: alpha(opacity=4); opacity: .04; }
        #ds .o5 { filter: alpha(opacity=2); opacity: .02; }
        #ds .h1 { height: 1px; }
        #ds .h2 { height: 2px; }
        #ds .h3 { height: 3px; }
        #ds .h4 { height: 4px; }
        #ds .h5 { height: 5px; }
    </style>

    <script src="http://js.arcgis.com/3.15/"></script>
    <script>
        var map;
        require([
            "esri/map", "esri/layers/WebTiledLayer","esri/geometry/Point", "esri/layers/TileInfo", "dojo/parser",

            "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
        ], function(
                Map, WebTiledLayer,Point, TileInfo, parser
        ) {
            parser.parse();

            //定义地图
            map = new Map("map", {
                "spatialReference":{"wkid":4326},
                center: [0.985, 29.822],
                zoom: 3
            });

            //定义瓦片结构
            var tileInfo = new TileInfo({
                "rows" : 256,
                "cols" : 256,
                "compressionQuality" : 0,
                "origin" : {
                    "x" : -180,
                    "y" : 90
                },
                "spatialReference" : {
                    "wkid" : 4326
                },
                "lods" : [
                    {"level" : 2, "resolution" : 0.3515625, "scale" : 147748796.52937502},
                    {"level" : 3, "resolution" : 0.17578125, "scale" : 73874398.264687508},
                    {"level" : 4, "resolution" : 0.087890625, "scale" : 36937199.132343754},
                    {"level" : 5, "resolution" : 0.0439453125, "scale" : 18468599.566171877},
                    {"level" : 6, "resolution" : 0.02197265625, "scale" : 9234299.7830859385},
                    {"level" : 7, "resolution" : 0.010986328125, "scale" : 4617149.8915429693},
                    {"level" : 8, "resolution" : 0.0054931640625, "scale" : 2308574.9457714846},
                    {"level" : 9, "resolution" : 0.00274658203125, "scale" : 1154287.4728857423},
                    {"level" : 10, "resolution" : 0.001373291015625, "scale" : 577143.73644287116},
                    {"level" : 11, "resolution" : 0.0006866455078125, "scale" : 288571.86822143558},
                    {"level" : 12, "resolution" : 0.00034332275390625, "scale" : 144285.93411071779},
                    {"level" : 13, "resolution" : 0.000171661376953125, "scale" : 72142.967055358895},
                    {"level" : 14, "resolution" : 8.58306884765625e-005, "scale" : 36071.483527679447},
                    {"level" : 15, "resolution" : 4.291534423828125e-005, "scale" : 18035.741763839724},
                    {"level" : 16, "resolution" : 2.1457672119140625e-005, "scale" : 9017.8708819198619},
                    {"level" : 17, "resolution" : 1.0728836059570313e-005, "scale" : 4508.9354409599309},
                    {"level" : 18, "resolution" : 5.3644180297851563e-006, "scale" : 2254.4677204799655}
                ]
            });

            //地图
            var baseMap = new WebTiledLayer("http://${subDomain}.tianditu.com/DataServer?T=vec_c&X=${col}&Y=${row}&L=${level}", {
                "copyright": "Tianditu",
                "id": "Tianditu",
                "subDomains": ["t0", "t1", "t2"],
                "tileInfo":tileInfo
            });
            //底图标注
            var baseMapMarker = new WebTiledLayer("http://${subDomain}.tianditu.com/DataServer?T=cva_c&X=${col}&Y=${row}&L=${level}", {
                "copyright": "Tianditu",
                "id": "Tianditu2",
                "subDomains": ["t0", "t1", "t2"],
                "tileInfo":tileInfo
            });
            map.addLayer(baseMap);
            map.addLayer(baseMapMarker);
            //定位到北京
            map.centerAndZoom(new esri.geometry.Point({"x": 116.39, "y": 39.91, "spatialReference": {"wkid": 4326 } }),14);
        });
    </script>
</head>
<body class="nihilo">
<div id="mainWindow"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline',gutters:false"
     style="width: 100%; height: 100%; margin: 0;">
    <div id="map" class="shadow"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'center'">

        <!-- drop shadow divs -->
        <div id="ds">
            <div id="ds-h">
                <div class="ds h1 o1"></div>
                <div class="ds h2 o2"></div>
                <div class="ds h3 o3"></div>
                <div class="ds h4 o4"></div>
                <div class="ds h5 o5"></div>
            </div>
        </div> <!-- end drop shadow divs -->

    </div>
</div>
</body>
</html>
JeffJacobson commented 8 years ago

When I created a JSFiddle with your code, it seemed to work. (I see tiles showing up.)

A better place to post such questions would be GeoNet. A lot more people will see it there.

laixiangran commented 8 years ago

Thank you for your suggestions.