2.arcGis底图切换

arcGis底图切换

html代码:

<div class="allMap-wrap" id="basemapchangeMap"></div>
                <div class="BasemapToggle-wrap">
                    <div>
                        <ul>
                            <li base-map-name="dark-gray"><img src="./static/imgs/baseMap/drak-gray.png" alt=""></li>
                            <li base-map-name="dark-gray-vector"><img src="./static/imgs/baseMap/drak-gray-vector.png" alt=""></li>
                            <li base-map-name="gray"><img src="./static/imgs/baseMap/gray.png" alt=""></li>
                            <li base-map-name="gray-vector"><img src="./static/imgs/baseMap/gray-vector.png" alt=""></li>
                            <li base-map-name="hybrid"><img src="./static/imgs/baseMap/hybrid.png" alt=""></li>
                            <li base-map-name="national-geographic"><img src="./static/imgs/baseMap/national-geographic.png" alt=""></li>
                            <li base-map-name="osm"><img src="./static/imgs/baseMap/osm.png" alt=""></li>
                            <li base-map-name="satellite"><img src="./static/imgs/baseMap/satellite.png" alt=""></li>
                            <li base-map-name="streets"><img src="./static/imgs/baseMap/streets.png" alt=""></li>
                            <li base-map-name="topo"><img src="./static/imgs/baseMap/topo.png" alt=""></li>
                        </ul>
                    </div>
                </div>

JS代码:

var map;
require([
    "esri/map",
    "esri/layers/ArcGISTiledMapServiceLayer"
],function(Map, ArcGISTiledMapServiceLayer){
    /*初始加载地图*/
    map = new Map("basemapchangeMap", {
        basemap: "satellite",
        center: [87.430157,43.899799],
        zoom: 10
    });
    $(".BasemapToggle-wrap>div>ul>li").click(function(){
        var toggleMap = $(this).attr("base-map-name");
        console.log(toggleMap);
        map.setBasemap(toggleMap);//该方法为主要方法
    });

    var layer = new ArcGISTiledMapServiceLayer("http://192.168.2.236:6080/arcgis/rest/services/JKQYXMapService/MapServer");
    map.addLayer(layer);
    var jwz=new ArcGISTiledMapServiceLayer('http://192.168.2.236:6080/arcgis/rest/services/jingwuzhan/MapServer');
    map.addLayer(jwz);
});
阅读 259

推荐阅读