<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>增大缩放级别</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script src="http://js.arcgis.com/3.9/"></script>
<script type="text/javascript" src="js/MapExtends.js"></script>
<script type="text/javascript">
var map, agoLayer;
require(["dojo/parser", "esri/map", "esri/geometry/Extent", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer", "dijit/registry", "dijit/form/Button", "dojo/domReady!"],
function (parser, Map, Extent, ArcGISTiledMapServiceLayer, FeatureLayer, registry) {
parser.parse();
var initExtent = new Extent({
xmax: -13624229.32056175,
xmin: -13625120.886837104,
ymax: 4548374.604660432,
ymin: 4547966.144290476,
"spatialReference": {
"wkid": 102100
}
});
map = new Map("mapDiv", {
extent: initExtent,
logo: false
});
var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
map.addLayer(agoLayer);
var featureLayer = new FeatureLayer("http://servicesbeta.esri.com/arcgis/rest/services/SanFrancisco/SFStreetTreesRendered/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND
});
map.addLayer(featureLayer);
map.on('extent-change', showScaleInfo);
registry.byId("addNums").on("click", function () {
var oldLevels = map.getNumLevels();
map.addNumLevels(4);
var currentLevelsNum = map.getNumLevels();
alert("原总缩放级别为" + oldLevels + ";增加后总缩放级别为" + currentLevelsNum);
});
function showScaleInfo(evt) {
var scaletext = map.getLevel();
document.getElementById("scaleInfo").innerHTML = scaletext;
}
});
</script>
</head>
<body class="tundra">
<div id="mapDiv" style="position:relative; width:100%; height:100%; border:1px solid #000;">
<button data-dojo-type="dijit/form/Button" id="addNums">
增加放大级别数
</button>
<div id="scaleInfo0" style="position: absolute; left: 100px; visibility:visible; bottom: 2px; z-index: 100;">当前缩放级别：</div>
<div id="scaleInfo" style="position: absolute; left: 210px; visibility:visible; bottom: 2px; z-index: 100;"></div>
</div>
</body>
</html>
