ArcGIS学习—Basemap gallery

最新推荐文章于 2023-12-03 22:46:23 发布

原创最新推荐文章于 2023-12-03 22:46:23 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ArcGIS #JS

coding way 同时被 2 个专栏收录

167 篇文章

订阅专栏

ArcGIS学习

2 篇文章

订阅专栏

本文介绍了如何在ArcGIS中使用Basemap Gallery，强调所有添加的底图必须在同一投影下。内容包括从ArcGIS.com获取底图、创建底图图层、将底图添加到列表以及初始化BasemapGallery的代码示例。最后提到，不调用startup()方法，Basemap Gallery可能无法正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ArcGIS学习—Basemap gallery

2015年9月28日 17:03

Description

Pay attention that all basemapsadded to the BasemapGallery must be in the same projection。

Code

Using basemaps from ArcGIS.com by setting

showArcGISBasemaps=true

<!DOCTYPE html>
<html>  
<head>
  <meta http-equiv="Content-Type"content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  <meta name="viewport"content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title></title>
 
  <link rel="stylesheet"href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">    
  <link rel="stylesheet"href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html, body{ height:100%; width:100%; margin:0; padding:0;}
    #map{
      padding:0;
    }
  </style>
 
  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    var map;
    require([
      "esri/map","esri/dijit/BasemapGallery","esri/arcgis/utils",
      "dojo/parser",
 
      "dijit/layout/BorderContainer","dijit/layout/ContentPane","dijit/TitlePane",
      "dojo/domReady!"
    ],function(
      Map,BasemapGallery, arcgisUtils,
      parser
    ){
      parser.parse();
 
      map =new Map("map",
        basemap:"topo",
        center:[-105.255,40.022],
        zoom:13
      });
 
      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
      var basemapGallery=new BasemapGallery({
        showArcGISBasemaps:true,
        map: map
      },"basemapGallery");
      basemapGallery.startup();
     
      basemapGallery.on("error",function(msg){
        console.log("basemap gallery error:  ", msg);
      });
    });
  </script>
</head>
 
<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer"
       data-dojo-props="design:'headline', gutters:false"
       style="width:100%;height:100%;margin:0;">
 
    <div id="map"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'center'"
         style="padding:0;">
 
      <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane"
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
          <div data-dojo-type="dijit/layout/ContentPane"style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>
 
    </div>
  </div>
</body>
 
</html>

Use user-defined basemaps

Create one or more basemap layers

Create one or more basemap

Add basemap to list basemaps

Create BasemapGallery，add basemaps to it

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Display Multiple ArcGIS Online Services</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }
#map {
      border: solid 1px #B5BCC7;
      padding: 0;
    }
#paneHeader {
      background: url(images/header.png) repeat-x;
      color: white;
      border-bottom: solid 1px #B5BCC7;
      text-align: center;
      height: 30px;
      margin: 0;
      overflow: hidden;
      font-size: 16px;
      padding: 8px 5px;
    }
#rightPane {
      width: 150px;
      margin: 0;
      padding: 0;
    }
  </style>
<script>var dojoConfig = {parseOnLoad:true};</script>
  <script src="http://js.arcgis.com/3.14/"></script>
<script>
    dojo.require("esri.map");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("esri.dijit.BasemapGallery");
    dojo.require("esri.arcgis.utils");
var map;
function init() {
      map = new esri.Map("map");
      createBasemapGallery();
    }
function createBasemapGallery() {
      //manually create basemaps to add to basemap gallery
      var basemaps = [];
      var waterTemplateLayer = new esri.dijit.BasemapLayer({
        url:"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastructureBasemap/MapServer"
      });
      var waterBasemap = new esri.dijit.Basemap({
        layers      :[waterTemplateLayer],
        title       :"Water Template",
        thumbnailUrl:"images/waterThumb.png"
      });
      basemaps.push(waterBasemap);
      var publicSafetyLayer = new esri.dijit.BasemapLayer({
        url:"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServer"
      });
      var publicSafetyBasemap = new esri.dijit.Basemap({
        layers      :[publicSafetyLayer],
        title       :"Public Safety",
        thumbnailUrl:"images/safetyThumb.png"
      });
      basemaps.push(publicSafetyBasemap);
var basemapGallery = new esri.dijit.BasemapGallery({
        showArcGISBasemaps:false,
        basemaps          :basemaps,
        map               :map
      }, "basemapGallery");
      basemapGallery.startup();
dojo.connect(basemapGallery, "onError", function (error) {
        console.log(error);
      });
    }
dojo.ready(init);
  </script>
</head>
<body class="claro">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<div data-dojo-type="dijit.layout.BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width:100%;height:100%;">
<div id="map"
       data-dojo-type="dijit.layout.ContentPane"
       data-dojo-props="region:'center'">
  </div>
<div data-dojo-type="dijit.layout.ContentPane"
       data-dojo-props="region:'right'" id="rightPane">
<div data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design:'headline', gutters:false"
         style="width:100%;height:100%;">
      <div id="paneHeader"
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'top'">
        <span>Select Basemap</span>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'center'">
<div id="basemapGallery"></div>
</div>
    </div>
  </div>
</div>
</body>
</html>

My code to use specified basemapsfrom ArcGIS.com（使用默认basemaps中指定的几个basemap）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
response.setHeader("Access-Control-Allow-Origin", "*");
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Map Basemap Gallery</title>
 
<link rel="stylesheet"
href="arcgis_js_v37_api/arcgis_js_api/library/3.7/jsapi/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet"
href="arcgis_js_v37_api/arcgis_js_api/library/3.7/jsapi/js/esri/css/esri.css">
<style>
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
 
#map {
padding: 0;
}
</style>
<!-- <script src="http://js.arcgis.com/3.14/"></script> -->
<script type="text/javascript"
src="arcgis_js_v37_api/arcgis_js_api/library/3.7/jsapi/init.js"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.arcgis.utils");
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");
dojo.require("dojo.domReady!");
dojo.require("esri.dijit.Basemap");
dojo.require("esri.config");
// createBasemaps from system's basemaps
function createBasemaps() {
var basemaps = [];
//alert(esri.config.defaults.map.basemaps.gray.title);
var layers=["topo","streets","oceans"];
var len=layers.length;
for(var i=0;i<len;i++){
var base=esri.config.defaults.map.basemaps[layers[i]];
var mybase=new esri.dijit.Basemap({
layers:base.baseMapLayers,
title:base.title,
thumbnailUrl:"arcgis_js_v37_api/arcgis_js_api/library/3.7/jsapi/js/esri/dijit/images/basemaps/"+layers[i]+".jpg"
});
basemaps.push(mybase);
}
/* var gray = esri.config.defaults.map.basemaps["gray"];
var mygray = new esri.dijit.Basemap(
{
layers : gray.baseMapLayers,
title : gray.title,
thumbnailUrl : "arcgis_js_v37_api/arcgis_js_api/library/3.7/jsapi/js/esri/dijit/images/basemaps/gray.jpg"
});
basemaps.push(mygray);
/*         alert(Object.keys(gray));
for(attribute in gray){
alert(attribute+" "+gray[attribute]);
} */
//alert(gray.baseMapLayers instanceof Array);
return basemaps;
}
function init() {
dojo.parser.parse();
 
var map = new esri.Map("map", {
center : [ 116.41667, 39.91667 ],
zoom : 9,
basemap : "topo"
});
basemaps=createBasemaps();
var basemapGallery = esri.dijit.BasemapGallery({
// this is important,if not setting showArcGISBasemaps=false,it will show all basemaps in system
showArcGISBasemaps : false,
basemaps : basemaps,
map : map
}, "basemapGallery");
 
basemapGallery.startup();
 
}
dojo.ready(init);
</script>
</head>
 
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width:100%;height:100%;margin:0;">
 
<div id="map" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'" style="padding:0;">
 
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane"
style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
 
</div>
</div>
</body>
 
</html>

dojo.parser.parse();

将dojo相关的对象实例化

basemapGallery.startup();

结束basemap gallery的创建，如果不使用该函数，貌似待会页面是显示不出来。。。