|
【官方文檔：https://developers./javascript/latest/sample-code/intro-popup/index.html】 一、Intro to popups popups(彈出框)是一種用戶與地圖之間的交互方式，用戶點(diǎn)擊相關(guān)要素，會(huì)彈出對(duì)應(yīng)的popup以查看所選要素的相關(guān)信息。每一個(gè)view(視圖)都有一個(gè)popup，其要展示的內(nèi)容可以來自layers、graphics或者僅僅是鼠標(biāo)的點(diǎn)擊信息。 popup用于展示layer或者graphic的相關(guān)字段信息，也可以用來表現(xiàn)query(查詢)或者其他一些和layer、graphic無(wú)關(guān)的動(dòng)作。比如，可以展現(xiàn)鼠標(biāo)點(diǎn)擊處的經(jīng)緯信息。 這個(gè)例子實(shí)現(xiàn)彈出popup以展現(xiàn)鼠標(biāo)點(diǎn)擊處的經(jīng)緯度信息和地址信息。需要實(shí)例化Locator類，并使用World Geocoding Service(世界地理編碼服務(wù))提供的reverse geocode(反解地理位置工具)計(jì)算出鼠標(biāo)點(diǎn)擊處的經(jīng)緯度和地址信息。
1.代碼骨架 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 6 <title>Intro to popups</title> 7 8 <!-- 在線JS API的引入 --> 9 <link rel="stylesheet" href="https://js./4.8/esri/css/main.css"> 10 <script src="https://js./4.8/"></script> 11 12 <!-- 設(shè)置樣式，正確顯示地圖 --> 13 <style> 14 html,body,#viewDiv{ 15 padding:0; 16 margin:0; 17 height:100%; 18 width:100%; 19 } 20 </style> 21 22 <script> 23 24 </script> 25 </head> 26 27 <body> 28 <div id="viewDiv"></div> 29 </body> 30 </html> 其中包括JS API的引入、style樣式的設(shè)置等等。
2.加載模塊并實(shí)例化 1 <script> 2 require([ 3 "esri/Map", 4 "esri/views/MapView", 5 "esri/tasks/Locator", 6 "dojo/domReady!" 7 ],function(Map,MapView,Locator){ 8 //使用world geocoding service，創(chuàng)建位置解析器 9 var locatorTask=new Locator({ 10 url:"https://geocode./arcgis/rest/services/World/GeocodeServer" 11 }); 12 13 //創(chuàng)建Map 14 var map=new Map({ 15 basemap:"streets-navigation-vector" 16 }); 17 18 //創(chuàng)建MapView 19 var view=new MapView({ 20 container:"viewDiv", 21 map:map, 22 center:[118.79647,32.05838], 23 zoom:10 24 }); 25 }); 26 </script> Map是創(chuàng)建地圖的類，MapView是創(chuàng)建視圖的類。具體請(qǐng)查看：https://www.cnblogs.com/wangmengdx/p/9385033.html。 Locator類通過使用世界地理編碼服務(wù)(World Geocoding Service)創(chuàng)建了一個(gè)位置解析器。在Locator類的構(gòu)造函數(shù)中需傳入url:"https://geocode./arcgis/rest/services/World/GeocodeServer"。世界地理編碼服務(wù)提供了解決方法將地址與坐標(biāo)互相轉(zhuǎn)換，更多信息請(qǐng)查看：https://geocode./arcgis/index.html。
3.監(jiān)聽view的click事件并在點(diǎn)擊處彈出popup 當(dāng)鼠標(biāo)點(diǎn)擊view時(shí)將觸發(fā)view的click事件，彈出popup，將點(diǎn)擊處的經(jīng)緯信息展示出來。 1 //監(jiān)聽view的click事件 2 view.on("click",function(event){ 3 //停止派發(fā)事件，阻止它被分配到其他document節(jié)點(diǎn) 4 event.stopPropagation(); 5 6 //獲取點(diǎn)擊處的經(jīng)緯度 7 //保留3位小數(shù) 8 var lon=Math.round(event.mapPoint.longitude*1000)/1000; 9 var lat=Math.round(event.mapPoint.latitude*1000)/1000; 10 11 //配置popup彈出框 12 view.popup.open({ 13 title:"Reverse geocode:["+lon+","+lat+"]", //經(jīng)緯度信息在popup的標(biāo)題處顯示 14 location:event.mapPoint //在鼠標(biāo)點(diǎn)擊處彈出popup 15 }); 16 }); 當(dāng)view的click事件被觸發(fā)時(shí)先調(diào)用event.stopPropagation()，是為了停止派發(fā)事件，阻止這個(gè)事件被分配到其他document節(jié)點(diǎn)，具體信息請(qǐng)查看：http://www.w3school.com.cn/jsref/event_stoppropagation.asp。 event.mapPoint是一個(gè)對(duì)象，表示鼠標(biāo)點(diǎn)擊的那個(gè)地方。event.mapPoint.longitude是鼠標(biāo)點(diǎn)擊處所對(duì)應(yīng)的實(shí)地經(jīng)度值，默認(rèn)小數(shù)點(diǎn)后14位左右?，F(xiàn)在想輸出小數(shù)點(diǎn)后3位，先將原經(jīng)度值乘以1000，Math.round()方法四舍五入后，再除以1000，就可以起到輸出小數(shù)點(diǎn)后3位的效果。注意下圖中的點(diǎn)不是準(zhǔn)確的同一個(gè)點(diǎn)，所以數(shù)值會(huì)有不同。
view.popup.open()方法配置popup彈出框，在title處配置經(jīng)緯度信息。設(shè)置popup彈出在鼠標(biāo)點(diǎn)擊處。
4.在popup彈出框中添加位置信息(address) 當(dāng)鼠標(biāo)點(diǎn)擊view時(shí)，觸發(fā)locatorTask.locationToAddress()方法，傳入鼠標(biāo)點(diǎn)擊處信息對(duì)象，以獲得這一點(diǎn)所對(duì)應(yīng)的實(shí)地地址。如果成功找到了鼠標(biāo)點(diǎn)擊處所對(duì)應(yīng)的地址，就把這個(gè)地址信息在popup中顯示；如果沒有找到，就顯示錯(cuò)誤信息。 注意這個(gè)方法locatorTask.locationToAddress()還是寫在前面view的click事件的監(jiān)聽函數(shù)中。 1 //查找鼠標(biāo)點(diǎn)擊處所對(duì)應(yīng)的實(shí)地地址 2 locatorTask.locationToAddress(event.mapPoint).then(function(response){ 3//將鼠標(biāo)點(diǎn)擊處的信息對(duì)象event.mapPoint傳入函數(shù)locationToAddress() 4 //傳入完成后，調(diào)用匿名函數(shù)，傳入?yún)?shù)是locationToAddress()返回的地址信息對(duì)象 5 //如果成功找到地址，將其在popup中顯示出來 6 view.popup.content=response.address; 7 }).catch(function(error){ 8//如果沒找到，則在popup中顯示錯(cuò)誤信息 9 view.popup.content="找不到地址" 10 }); locatorTask是前面創(chuàng)建的位置解析器(Locator類的實(shí)例)，將鼠標(biāo)點(diǎn)擊處的信息對(duì)象event.mapPoint傳入locatorTask的locationToAddress()函數(shù)。參數(shù)傳入完成后，調(diào)用匿名函數(shù)，這時(shí)要傳入的參數(shù)是之前l(fā)ocationToAddress()返回的地址信息對(duì)象response。 如果查找地址成功，將地址信息在popup中展示出來；之后的catch()函數(shù)的意思是，如果前面的代碼發(fā)生錯(cuò)誤即地址信息沒有找到，就執(zhí)行catch()里的匿名函數(shù)，在popup里輸出錯(cuò)誤信息。JavaScript的promise.then().catch()語(yǔ)法請(qǐng)查看相關(guān)資料。
5.最終代碼及運(yùn)行效果 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 6 <title>Intro to popups</title> 7 8 <!-- 在線JS API的引入 --> 9 <link rel="stylesheet" href="https://js./4.8/esri/css/main.css"> 10 <script src="https://js./4.8/"></script> 11 12 <!-- 設(shè)置樣式，正確顯示地圖 --> 13 <style> 14 html,body,#viewDiv{ 15 padding:0; 16 margin:0; 17 height:100%; 18 width:100%; 19 } 20 </style> 21 22 <script> 23 require([ 24 "esri/Map", 25 "esri/views/MapView", 26 "esri/tasks/Locator", 27 "dojo/domReady!" 28 ],function(Map,MapView,Locator){ 29 //使用world geocoding service 30 var locatorTask=new Locator({ 31 url:"https://geocode./arcgis/rest/services/World/GeocodeServer" 32 }); 33 34 //創(chuàng)建Map 35 var map=new Map({ 36 basemap:"streets-navigation-vector" 37 }); 38 39 //創(chuàng)建MapView 40 var view=new MapView({ 41 container:"viewDiv", 42 map:map, 43 center:[118.79647,32.05838], 44 zoom:10 45 }); 46 47 //監(jiān)聽view的click事件 48 view.on("click",function(event){ 49 //停止派發(fā)事件，阻止它被分配到其他document節(jié)點(diǎn) 50 event.stopPropagation(); 51 52 //獲取點(diǎn)擊處的經(jīng)緯度 53 //保留3位小數(shù) 54 var lon=Math.round(event.mapPoint.longitude*1000)/1000; 55 var lat=Math.round(event.mapPoint.latitude*1000)/1000; 56 57 //配置popup彈出框 58 view.popup.open({ 59 title:"Reverse geocode:["+lon+","+lat+"]", //經(jīng)緯度信息在popup的標(biāo)題處顯示 60 location:event.mapPoint //在鼠標(biāo)點(diǎn)擊處彈出popup 61 }); 62 63 //查找鼠標(biāo)點(diǎn)擊處所對(duì)應(yīng)的實(shí)地地址 64 locatorTask.locationToAddress(event.mapPoint).then(function(response){ 65 //將鼠標(biāo)點(diǎn)擊處的信息對(duì)象event.mapPoint傳入函數(shù)locationToAddress() 66 //傳入完成后，調(diào)用匿名函數(shù)，傳入?yún)?shù)是locationToAddress()返回的地址信息對(duì)象 67 //如果成功找到地址，將其在popup中顯示出來 68 view.popup.content=response.address; 69 }).catch(function(error){ 70 //如果沒找到，則在popup中顯示錯(cuò)誤信息 71 view.popup.content="找不到地址" 72 }); 73 }); 74 }); 75 </script> 76 </head> 77 78 <body> 79 <div id="viewDiv"></div> 80 </body> 81 </html>
|
|
|
