arcgis api js调用天地图

时间:2024-03-13 16:26:22

  在arcgis api for js中仅有的basemap有"streets" , "satellite" , "hybrid", "topo", "gray", "oceans", "national-geographic", "osm",但是在特殊的情况下我们可能会需要天地图,那么一起来看一下arcgis api js是怎么调用天地图的吧!

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>arcgis api js 调用天地图</title>
        <link rel="stylesheet" href="3.27/esri/css/esri.css" />
        <style>
            html,
            body,
            #map {
                margin: 0 0;
                width: 100%;
                height: 100%;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的key"></script>
        <script type="text/javascript" src="3.27/init.js"></script>
    </head>

    <body>
        <button id="cva">电子</button>
        <button id="img">影像</button>
        <div id="map"></div>
        <script type="text/javascript">
            require([
                    "esri/map",
                    "esri/geometry/Point",
                    "js/TDTLayer.js",
                    "dojo/domReady!"
                ],
                function(
                    Map,
                    Point,
                    TDTLayer
                ) {
                    map = new Map("map", {
                        logo: false,
                        sliderPosition: "top-right"
                    });

                    var vecLayer = new TDTLayer("vec", {
                        "id": "矢量图"
                    });
                    var cvaLayer = new TDTLayer("cva", {
                        "id": "标注图"
                    });
                    var imgLayer = new TDTLayer("img", {
                        "id": "影像图"
                    });

                    map.addLayers([vecLayer, cvaLayer, imgLayer]);
                    map.centerAndZoom(new Point(116, 23), 12);

                    map.on("click", function(evt) {
                        console.log(evt.mapPoint);
                        console.log(map.extent);
                        console.log(map);
                    })

                    document.getElementById("img").onclick = function() {
                        map.getLayer("影像图").show();
                        map.getLayer("矢量图").hide();
                        map.getLayer("标注图").hide();
                    }
                    document.getElementById("cva").onclick = function() {
                        map.getLayer("影像图").hide();
                        map.getLayer("矢量图").show();
                        map.getLayer("标注图").show();
                    }

                });
        </script>
    </body>

</html>

arcgis api js调用天地图

运行效果如上,地图上的“电子”和“影像”为自定义的按钮,可以进行电子和影像的切换;总体来说arcgis api js调用天地图是很简单的(①通过script标签引入天地图api+key;②在require引入arcgis api js支持天地图的依赖文件,接着在构造申明arcgis api js对象;③在js代码中实例化声明的arcgis api js对象即可),但是需要注意的一点是2019年1月1日开始天地图对外开放的地图不可以直接调用,而需要在天地图官网申请key值,然后才可以调用天地图对外开放的各类地图。