javascript
js 两个map合并为一个map_ArcGIS API for JS3.x教程二：构建第一个简单的程序
本文銜接上文：
不睡覺的怪叔叔：ArcGIS API for JS3.x教程一：本地開發環境配置?zhuanlan.zhihu.com一、創建簡單的HTML文檔
創建一個簡單的HTML文檔：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Simple App</title> </head> <body></body> </html>二、引入ArcGIS API for JavaScript
要想在web程序中使用ArcGIS API for JS，當然就要引入該開發包：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Simple App</title><!-- 引入ArcGIS API for JS開發包 --><link rel="stylesheet" href="http://localhost:8080/arcgis3.30/esri/css/esri.css" /><script src="http://localhost:8080/arcgis3.30/init.js"></script> </head> <body></body> </html>上面引入的init.js包含ArcGIS API for JS的邏輯處理功能。
引入的esri.css樣式文件用于指定程序小部件（widgets）和組件的樣式。
還可以選擇其他的四種主題的樣式文件，有四個主題可供選擇：
- claro
- tundra
- soria
- nihiilo
樣式文件位于themes文件夾中：
當然也可以用CDN的方式引入（速度較慢）：
https://js.arcgis.com/3.30/dijit/themes/claro/claro.csshttps://js.arcgis.com/3.30/dijit/themes/tundra/tundra.csshttps://js.arcgis.com/3.30/dijit/themes/nihilo/nihilo.csshttps://js.arcgis.com/3.30/dijit/themes/soria/soria.css可以自行嘗試使用不同的主題樣式，選擇合適的樣式來契合程序，使之更完美。
三、創建地圖容器
地圖容器。。。簡單來說就是一個HTML的div元素，ArcGIS API for JS會使用canvas或者webgl技術在該div元素上繪制地圖。
在body元素中創建一個div元素當作地圖容器：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Simple App</title><!-- 引入ArcGIS API for JS開發包 --><link rel="stylesheet" href="http://localhost:8080/arcgis3.30/esri/css/esri.css" /><script src="http://localhost:8080/arcgis3.30/init.js"></script> </head> <body><!-- 地圖容器 --><div id="map"></div></body> </html>四、加載模塊
ArcGIS API for JS構建于Dojo框架（類似于jQuery）之上，它的模塊導入使用Dojo的模塊系統。沒必要深入學習Dojo，知道一些簡單的Dojo語法、功能就可以了。
首先，導入"esri/map"模塊：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Simple App</title><!-- 引入ArcGIS API for JS開發包 --><link rel="stylesheet" href="http://localhost:8080/arcgis3.30/esri/css/esri.css" /><script src="http://localhost:8080/arcgis3.30/init.js"></script> </head> <body><!-- 地圖容器 --><div id="map"></div><script>require(["esri/map"], function(Map){ // 導入模塊});</script> </body> </html>模塊導入的語法，以及模塊名都能在API文檔中找到，對應著導入就好。
比如剛才的"esri/map"其實就是導入了Map類的相關代碼包，直接查Map類的API文檔就能看到導入語法：
五、創建地圖
剛才導入了Map類，那么就能調用Map類創建地圖：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Simple App</title><!-- 引入ArcGIS API for JS開發包 --><link rel="stylesheet" href="http://localhost:8080/arcgis3.30/esri/css/esri.css" /><script src="http://localhost:8080/arcgis3.30/init.js"></script> </head> <body><!-- 地圖容器 --><div id="map"></div><script>var map;require(["esri/map"], function(Map){ // 導入模塊// 創建地圖map = new Map("map", {basemap: 'topo',center: [-122.45, 37.75],zoom: 13})});</script> </body> </html>參數"map"對應地圖容器div元素的id特性，這就相當于告訴ArcGIS API for JS請在id特性為"map"的div元素上繪制地圖。
根據"地圖三明治結構"，一個WebGIS地圖通常由底圖+專題地圖構成，上面的basemap就用于指定ArcGIS API for JS默認提供的底圖，即直接填寫對應的字符串它就能自動繪制對應的底圖。該參數還可以指定為："satellite", "hybrid", "topo", "gray", "oceans", "osm", "national-geographic"。自行嘗試這些精美的底圖吧！
六、指定樣式
由于body元素默認有外邊距值，會在頁面上構成一個白色溝壑，比較丑，因此要消去它。
另外地圖默認高度只會是頁面的一半，讓地圖全屏顯示會更美觀。
那么指定想要的樣式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Simple App</title><!-- 引入ArcGIS API for JS開發包 --><link rel="stylesheet" href="http://localhost:8080/arcgis3.30/esri/css/esri.css" /><script src="http://localhost:8080/arcgis3.30/init.js"></script><style>/* 指定樣式 */html, body, #map{height: 100%;margin: 0;}</style> </head> <body><!-- 地圖容器 --><div id="map"></div><script>var map;require(["esri/map"], function(Map){ // 導入模塊// 創建地圖map = new Map("map", {basemap: 'topo',center: [-122.45, 37.75],zoom: 13})});</script> </body> </html>現在第一個簡單的程序就構建完成了，使用瀏覽器打開效果如下：
總結
以上是生活随笔為你收集整理的js 两个map合并为一个map_ArcGIS API for JS3.x教程二：构建第一个简单的程序的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 远程主机http协议版本信息泄漏_Web
- 下一篇： 应山有学计算机编程吗,周应山-武汉纺织大