12 地圖新增測量控制元件
阿新 • • 發佈：2018-10-31
地圖的測量控制元件主要實現在web端的地圖測量功能，包括距離量算、面積量算和經緯度獲取。我們可以用官方提供的預設樣式來新增，也可以自定義樣式來新增地圖量算控制元件。下面來看一下顯示效果：
面積量算：
距離量算：
經緯度獲取：
具體的操作如下：
1 測量控制元件主要依據“esri/dijit/Measurement”元件來實現，所以第一步還是一樣，載入所需要的引用：
require([ "dojo/dom", "esri/map", "esri/dijit/Measurement", "dojo/domReady!" ], function(dom,Map, Measurement) { });
2 載入完元件之後，我們要定義相應的div，此處我們選擇了官方預設的樣式，所以定義的div包括樣式等都是引用它的，如下：
<div id="map" >
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div id="titlePane">
<div id="measurementDiv"></div>
</div>
</div>
</div>在我們實際應用的時候預設樣式肯定不能滿足需求，所以需要同學們使用css等來修改其樣式。
3 最後一步就是例項化底圖和例項化測量控制元件，如下：
map = new Map("map", {
basemap: "osm",
center: [104.072331,30.66303],
zoom: 11
});
var measurement = new Measurement({
map: map
}, dom.byId("measurementDiv"));
measurement.startup();4 至此，測量控制元件新增完畢，完整程式碼如下所示：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Measure Tool</title> <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/themes/calcite/dijit/calcite.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/themes/calcite/esri/esri.css"> <style> html,body { height:100%; width:100%; margin:0; } body { background-color:#FFF; overflow:hidden; font-family:"Trebuchet MS"; } #map { position: absolute; width: 100%; height: 100%; } #titlePane{ width:280px; background-color: white; } </style> <script src="https://js.arcgis.com/3.25/"></script> <script> var map; require([ "dojo/dom", "esri/map", "esri/dijit/Measurement", "dojo/domReady!" ], function(dom,Map, Measurement) { map = new Map("map", { basemap: "osm", center: [104.072331,30.66303], zoom: 11 }); var measurement = new Measurement({ map: map }, dom.byId("measurementDiv")); measurement.startup(); }); </script> </head> <body class="calcite"> <div id="map" > <div style="position:absolute; right:20px; top:10px; z-Index:999;"> <div id="titlePane"> <div id="measurementDiv"></div> </div> </div> </div> </body> </html>