ArcGIS API for JS 更多地图

最新推荐文章于 2019-05-27 14:39:47 发布

凌渊阁

最新推荐文章于 2019-05-27 14:39:47 发布

阅读量342

点赞数

分类专栏： WebGIS

本文链接：https://blog.csdn.net/zw3413/article/details/82684201

版权

WebGIS 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文基于《ArcGIS API for JS 第一张地图》进行了扩展：

1.将 ArcGIS API for Javascript的版本更新为贸易大战前能够下载到的最新版本，下载地址：http://www.25mg.cn/wp/training/webgis/arcgis-api-for-javascript-v46/

2. 在上一篇的基础上，增加了ArcGIS online提供的所有底图，及相应的简单切换功能

3.对代码进行了拆分重构

废话不说，直接上代码：

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: weizhang
  Date: 2018/9/11
  Time: 下午7:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--这里需要注意的是：
        1.生命dojo全局属性dojoConfig,并定义js_api_url属性，值指向ArcGIS API for Javacript包的根目录，
        2.将init.js中的https://[HOSTNAME_AND_PATH_TO_JSAPI]替换为:dojoConfig.js_api_url
        3.将dojo/dojo.js中的https://[HOSTNAME_AND_PATH_TO_JSAPI]替换为:dojoConfig.js_api_url
    --%>
    <script>
        var dojoConfig={};
        dojoConfig.js_api_url="<%=request.getContextPath()%>/plugin/arcgis_js_api-4.6"
    </script>
    <script src="<%=request.getContextPath()%>/plugin/arcgis_js_api-4.6/init.js" type="application/javascript"></script>
    <link href="<%=request.getContextPath()%>/plugin/arcgis_js_api-4.6/esri/css/main.css" rel="stylesheet"/>
    <link href="<%=request.getContextPath()%>/plugin/arcgis_js_api-4.6/dijit/themes/tundra/tundra.css" rel="stylesheet"/>
    <%--操作地图的js文件--%>
    <script src="js/map.js" type="application/javascript"></script>

</head>
<body class="tundra">
<div id="mapDiv" style="height:100%">
</div>
<div style="position:fixed;right:50px;top:50px">
    <select id="baseMapSelect"></select>
    <select id="layerSelect"></select>
</div>
</body>
</html>

js/map.js

require([
    "esri/Map",
    "esri/views/SceneView",
    "esri/views/MapView",
    "esri/layers/TileLayer",
    "dojo/store/Memory",
    "dojo/on",
    "dojo/dom",
    "./js/baseMapInfo.js",
    "./js/layerInfo.js",
    "dijit/form/_FormWidgetMixin",
    "dojo/domReady!"
],function(
    Map,SceneView,MapView,TileLayer,Memory,on,dom,baseMapInfo,layerInfo){
    var map=new Map({
        basemap:'streets',
        layers:[]
    });
    var view=new SceneView({
        container:'mapDiv',
        map:map
    });
    var baseMapSelect=dom.byId('baseMapSelect');
    var baseMapOptions=baseMapInfo.data;
    for(var o in baseMapOptions){
        if(!baseMapOptions.hasOwnProperty(o)) continue;
        var option=document.createElement("option");
        option.innerHTML=baseMapOptions[o].name;
        baseMapSelect.add(option);
    }
    on(baseMapSelect,'change',function(){
        console.log(baseMapSelect.value);
        map.basemap=baseMapSelect.value;
    })
    var layerSelect=dom.byId('layerSelect');
    var layerOptions=layerInfo.data;
    for(var o in layerOptions){
        if(!layerOptions.hasOwnProperty(o)) continue;
        var option=document.createElement("option");
        option.innerHTML=layerOptions[o].name;
        layerSelect.add(option);
    };
    var layerStore=new Memory(layerInfo);
    on(layerSelect,'change',function(){
        map.removeAll();
        console.log(layerSelect.value);
        var layerName=layerSelect.value;
        var layer=layerStore.query({name:layerName});
        var layerUrl=layer[0].url;
        debugger;
        if(typeof (layerUrl)=='undefined'||layerUrl.length>0){
            var tileLayer=new TileLayer({
                url:layerUrl
            });
            map.add(tileLayer);
        }
    })
});

js/baseMapInfo.js

define([],function () {
    return {
        data:[
            {name:'streets'},
            {name:'satellite'},
            {name:'hybrid'},
            {name:'topo'},
            {name:'gray'},
            {name:'dark-gray'},
            {name:'oceans'},
            {name:'national-geographic'},
            {name:'terrain'},
            {name:'osm'},
            {name:'dark-gray-vector'},
            {name:'gray-vector'},
            {name:'streets-vector'},
            {name:'topo-vector'},
            {name:'streets-night-vector'},
            {name:'streets-relief-vector'},
            {name:'streets-navigation-vector'}
        ]
    }
})

js/layerInfo.js

define([],function() {
    return {
        data: [
            {
              name:'none',
              url:''
            },
            {
                name: 'ESRI_Imagery_World_2D',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,15]
            },
            {
                name: 'ESRI_StreetMap_World_2D',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,15]
            },
            //GlobeServer
            {
                name: 'I3_Imagery_Prime_World',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/I3_Imagery_Prime_World/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,15,16,17,18,19,20,21,22,23]
            },
            //GlobeServer
            {
                name: 'NASA_CloudCover_World',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/NASA_CloudCover_World/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,15,16,17,18,19,20,21,22,23]
            },
            {
                name: 'NatGeo_World_Map',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,15,16]
            },
            {
                name: 'NGS_Topo_US_2D',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
            },
            {
                name: 'Ocean_Basemap',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,15,16]
            },
            {
                name: 'USA_Topo_Maps',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,15]
            },

            //multi layers in
            {
                name: 'World_Imagery',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,15,16,17,18,19,20,21,22,23]
            },
            {
                name: 'World_Physical_Map',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8]
            },

            {
                name: 'World_Shaded_Relief',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
            },
            {
                name: 'World_Street_Map',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,15,16,17,18,19,20,21,22,23]
            },
            {
                name: 'World_Terrain_Base',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
            },
            {
                name: 'World_Topo_Map',
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer',
                //displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,15,16,17,18,19,20,21,22,23]
            }
        ]
    };
})

凌渊阁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
ArcGIS API for JS 更多地图

本文基于《ArcGIS API for JS 第一张地图》进行了扩展：1.将 ArcGIS API for Javascript的版本更新为贸易大战前能够下载到的最新版本，下载地址：http://www.25mg.cn/wp/training/webgis/arcgis-api-for-javascript-v46/2. 在上一篇的基础上，增加了ArcGIS online提供的所有底图，及...
复制链接

扫一扫

专栏目录