天天看點

ArcGIS API for JavaScript 3.x 加載地圖基礎工具

鷹眼,比例尺,放大縮小等基礎工具加載

<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>
           

繼續閱讀