Arcgis Javascript API 學習（二）建立一個地圖

時間 2019-11-12

標籤 arcgis javascript api 學習建立一個地圖欄目 JavaScript 简体版

原文原文鏈接

前面，咱們引用了arcgis javascript的api。下面，就能夠經過這可js庫來建立咱們第一個地圖。 javascript

接下來咱們建立一個地圖(Home鍵、衛星圖切換、鷹眼圖)。 css

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Map</title>

<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"> 
<script src="http://js.arcgis.com/3.7/"></script>

<style>
html, body, #map {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}
#BasemapToggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 50;
}
#HomeButton {
    position: absolute;
    top: 95px;
    left: 20px;
    z-index: 50;
}
</style>

<script>
	//引入須要的類
	dojo.require("esri.map");
	dojo.require("esri.dijit.BasemapToggle");
	dojo.require("esri.dijit.HomeButton");
	dojo.require("esri.dijit.OverviewMap");

	//定義全局變量
	var map;
	
	//準備初始化
	dojo.ready(init);
	
	//初始化方法
	function init(){
		//建立地圖
		map = new esri.Map("map", {
			 center: [121.48, 31.25],
		     zoom: 8,
		     basemap: "streets"
		});

		//衛星圖切換   
		var toggle = new esri.dijit.BasemapToggle({
			map: map,
			basemap: "satellite"
		}, "BasemapToggle");
		toggle.startup();
		
		//HOME按鈕
		var home = new esri.dijit.HomeButton({
			map: map
		}, "HomeButton");
		home.startup();

		//小地圖
		var overviewMap = new esri.dijit.OverviewMap({
			map: map,
			visible: true,			 // 初始化可見，默認爲false  
			attachTo: "bottom-right",   // 默認右上角  
			width: 250,				 // 默認值是地圖高度的 1/4th  
			height: 150,			 // 默認值是地圖高度的 1/4th   
			opacity: 0.5,            // 透明度 默認0.5  
			maximizeButton: true,    // 最大化,最小化按鈕，默認false  
			expandFactor: 2,         //概覽地圖和總覽圖上顯示的程度矩形的大小之間的比例。默認值是2，這意味着概覽地圖將至少是兩倍的大小的程度矩形。  
			color: "#000000"         // 默認顏色爲#000000  
		});
		overviewMap.startup();
	}	
	
</script>
</head>
<body>
	<div id="map">
		<div id="BasemapToggle"></div>
		<div id="HomeButton"></div>
	</div>
</body>
</html>