鷹眼,比例尺,放大縮小等基礎工具加載
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>縮略圖、比例尺</title>
<link rel="stylesheet" href="http://location/arcgis_js_api/library/3.15/3.15/dijit/themes/claro/claro.css" target="_blank" rel="external nofollow" />
<link rel="stylesheet" href="http://location/arcgis_js_api/library/3.15/3.15compact/esri/css/esri.css" target="_blank" rel="external nofollow" >
<script src="http://location/arcgis_js_api/library/3.15/3.15/init.js" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>
<script>
var map;
require([
"esri/map",
"esri/dijit/OverviewMap",
"esri/dijit/Scalebar"
], function(Map,OverviewMap,Scalebar) {
var startExtent = new esri.geometry.Extent(114.309, 30.578, 115, 37,
new esri.SpatialReference({ wkid:4326}) );
map = new Map("map", {
extent:startExtent,
center: [114.309, 30.578], //地圖加載後,初始位置
zoom: 12, //放大級别,值越大放大的比例就越大
slider: true,
maxZoom: 16, //地圖最大縮放級别
minZoom: 7, //地圖最小縮放級别
logo: false //不顯示Esri的logo
});
var overviewMapDijit = new OverviewMap({
visible: true,
attachTo: "bottom-right",
map: map
});
var scalebar = new esri.dijit.Scalebar({
map: map,
scalebarStyle: "ruler",//line 比例尺樣式類型
scalebarUnit: "metric"
});
overviewMapDijit.startup();
//加載地圖服務
var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer");
map.addLayer(myTiledMapServiceLayer); //添加到地圖中
});
</script>