1. 程式人生 > >ArcGIS API for JavaScript實現地圖常用工具條 距離測量,面積測量

ArcGIS API for JavaScript實現地圖常用工具條 距離測量,面積測量

距離測量,面積測量等工具條是常用的工具。也是GIS系統的基礎功能

效果圖

工具條樣式:
這裡寫圖片描述
距離測量:
這裡寫圖片描述
面積測量:
這裡寫圖片描述

require([
    "esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/toolbars/navigation",
    "esri/toolbars/draw",
    "esri/tasks/GeometryService",
    "esri/symbols/Font",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol"
, "esri/symbols/TextSymbol", "esri/Color", "esri/graphic", "esri/tasks/LengthsParameters", "esri/geometry/Point", "esri/geometry/Polyline", "esri/tasks/AreasAndLengthsParameters", "dojo/dom-attr", "dojo/domReady!" ],function(Map,ArcGISDynamicMapServiceLayer,Navigation,Draw,GeometryService,Font,SimpleMarkerSymbol,SimpleLineSymbol,TextSymbol,Color,Graphic,LengthsParameters, Point,Polyline,AreasAndLengthsParameters,domAttr)
{
var chinaCollagelayer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/2017shixi/collegeMap/MapServer"); var map = new Map("map"); map.addLayer(chinaCollagelayer); //建立地圖操作物件 var navToolbar = new Navigation(map); //toolbar工具條 var toolbar = new Draw(map); //呼叫esri自帶的服務(在arcgis server Manger中,記得開啟服務)
var geometryService =new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"); var totleDistance = 0.0;//總距離 var totalGraphic = null;//儲存點集合 var disFun =false;//距離測量 var areaFun = false;//面積測量 var inputPoints = [];//儲存生成點的集合 var startFont = new Font('12px').setWeight(Font.WEIGHT_BOLD);//定義文字樣式 var makerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,8, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([204,102,51]),1), new Color([158.184,71,0.65]));//定義標記點樣式 //給按鈕新增繫結事件 query(".functionWrap").on("click",function(event){ //獲得按鈕的文字資訊 var value=domAttr.get(this,"title"); switch(value){ case "平移": navToolbar.activate(Navigation.PAN); break; case "拉框縮小": navToolbar.activate(Navigation.ZOOM_OUT); break; case "拉框放大": navToolbar.activate(Navigation.ZOOM_IN); break; case "全圖": map.centerAndZoom(([110,38.5]),5); break; case "距離測量": distanceMeasure(); break; case "面積測量": areaMeasure(); break; case "清除標記": clearAction(); break; } }; //長度量算 function distanceMeasure() { map.enableScrollWheelZoom(); disFun=true; areaFun=false; toolbar.activate(Draw.POLYLINE); } //面積量算 function areaMeasure() { map.enableScrollWheelZoom(); disFun=false; areaFun=true; toolbar.activate(Draw.POLYGON); } // 量算功能觸發 map.on("click",function (evt) { mapClick(evt); }); //觸發完成的事件 toolbar.on("draw-end",function (evt) { addToMap(evt); }); //生成兩點之間的連線 toolbar.setLineSymbol(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2)); //量算函式 function mapClick(evt) { if(disFun){ inputPoints.push(evt.mapPoint); var textSymbol; if(inputPoints.length ===1){ textSymbol = new TextSymbol("起點",startFont,new Color([204,102,51])); textSymbol.setOffset(0,-20); map.graphics.add(new Graphic(evt.mapPoint,textSymbol)); } map.graphics.add(new Graphic(evt.mapPoint,makerSymbol)); if(inputPoints.length >=2){ // 設定距離測量的引數 var lengthParams = new LengthsParameters(); lengthParams.distanceUnit = GeometryService.UNIT_METER; lengthParams.calculationType = "preserveShape"; var p1 = inputPoints[inputPoints.length-2]; var p2 = inputPoints[inputPoints.length-1]; if(p1.x ===p2.x &&p1.y===p2.y){ return; } // z在兩點之間劃線將兩點連結起來 var polyline = new Polyline(map.spatialReference); polyline.addPath([p1,p2]); lengthParams.polylines=[polyline]; // 根據引數,動態的計算長度 geometryService.lengths(lengthParams,function(distance){ var _distance = number.format(distance.lengths[0]/1000); totleDistance+=parseFloat(_distance);//計算總長度 var beetwentDistances = _distance+"千米"; var tdistance = new TextSymbol(beetwentDistances,startFont,new Color([204,102,51])); tdistance.setOffset(40,-3); map.graphics.add(new Graphic(p2,tdistance)); if(totalGraphic){ map.graphics.remove(totalGraphic); } var total=number.format(totleDistance,{ pattern:"#.000" }); // 設定總長度的顯示樣式,並新增到地圖上 var totalSymbol=new TextSymbol("總長度:"+total+"千米",startFont,new Color([204,102,51])); totalSymbol.setOffset(40,-15); totalGraphic= map.graphics.add(new Graphic(p2,totalSymbol)); }); } } } // 新增圖形函式 function addToMap(evt) { if(disFun||areaFun){ var geometry = evt.geometry;//繪製圖形的geometry //將繪製的圖形新增到地圖上去 var symbol = null; switch (geometry.type){ case "point": symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),1), new Color([0,255,0,0.25])); break; case "polyline": symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0,0.8]),2); break; case "polygon": symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2), new Color([255,255,0,0.25])); break; case "extent": symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2), new Color([255,255,0,0.25])); break; } map.graphics.add(new Graphic(geometry,symbol)); if(disFun){ inputPoints.splice(0,inputPoints.length);//刪除陣列中的所有元素 totleDistance =0.0; totalGraphic = null; } else if(areaFun){ //設定面積和長度的引數 var areasAndLengthsParameters =new AreasAndLengthsParameters(); areasAndLengthsParameters.lengthUnit = GeometryService.UNIT_METER;//設定距離單位 areasAndLengthsParameters.areaUnit = GeometryService.UNIT_SQUARE_KILOMETERS;//設定面積單位 geometryService.simplify([geometry],function (simplifiedGeometries) { areasAndLengthsParameters.polygons = simplifiedGeometries; geometryService.areasAndLengths(areasAndLengthsParameters,function (result) { var font =new Font("16px",Font.STYLE_NORMAL,Font.VARIANT_NORMAL,Font.WEIGHT_BOLDER); var areaResult = new TextSymbol(number.format(result.areas[0],{ pattern:'#.000' })+"平方公里",font,new Color([204,102,51])); var spoint = new Point(geometry.getExtent().getCenter().x,geometry.getExtent().getCenter().y,map.spatialReference); map.graphics.add(new Graphic(spoint,areaResult));//在地圖上顯示測量的面積 }); }); } } } //清空函式 function clearAction() { toolbar.deactivate();//撤銷地圖繪製功能 disFun = false; areaFun = false; map.enableScrollWheelZoom(); map.graphics.clear(); var graphicLayerIds = map.graphicsLayerIds; var len = graphicLayerIds.length; for(var i=0; i<len;i++){ var gLayer = map.getLayer(graphicLayerIds[i]); gLayer.clear(); } } });

相關推薦

ArcGIS API for JavaScript實現地圖常用工具 距離測量面積測量

距離測量,面積測量等工具條是常用的工具。也是GIS系統的基礎功能 效果圖 工具條樣式: 距離測量: 面積測量: require([ "esri/map", "esri/layers/ArcGISDynamicMapServi

ArcGIS API for JavaScript實現地圖雙屏聯動

使用ArcGIS API for JavaScript,可以很方便的實現地圖聯動。最簡單的方式是藉助Map物件的extent-change 事件,當然,也可以藉助zoom-end、pan-end、mouse-drag-end等事件,本文使用第一種方式,實現地圖的平移聯動、滑

Arcgis API for JavaScript地圖實現手機定位資訊的追蹤顯示

/* 定義全域性變數 */ var ulm_Int = null;//儲存手機定位資訊輪詢setInterval的id var isFirstQuery = null;//定義一個變數儲存是否是第一次查詢 var ulm_Layer = null;//手機定位資訊圖層變數 var ulm_queryResul

ArcGIS API for Silverlight實現地圖測距功能

問題:如何實現地圖測距功能? 地圖工具欄 <Grid x:Name="gToolMenu" Height="100" VerticalAlignment="Top" Opacity="0.8" HorizontalAlignment="Right" Width="467

ArcGIS API for JavaScript地圖上繪製圓多邊形

問題描述:     藉助Arcgis的Api在地圖上繪製圓與多邊形,檢視Api的兩個類Circle和Polygon      Api地址:https://developers.arcgis.com/javascript/jsapi/ 解決程式碼: //畫圓畫多邊形 Arc

ArcGIS API for JavaScript 設定地圖縮放的最大最小的等級

require(["esri/map"], function(Map) { /* code goes here */ }); ###初始化Map物件時設定 只有切面地圖設定maxZoom,minZo

ArcGIS API for JavaScript 實現point multipoint line polyline cirle等graphics的繪製

var map, tb; require([ "esri/map", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol",

ArcGIS API for JavaScript實現分圖層顯示

大家都知道,當用ArcGIS釋出地圖服務時,是把整個地圖文件所有圖層都發布出去的,如果展示的時候只想顯示某個圖層怎麼辦呢?或許你會用FeatureLayer,這樣做當然也能實現,但是在地圖文件中

ArcGIS API For Javascript之多圖層顯示與隱藏圖層要素選框查詢

5、多圖層的載入與隱藏 利用Html+Javascript前端程式設計實現上傳到服務端的地圖服務中的多圖層的載入與隱藏。本實驗中除了底圖之外,添加了共10個圖層,分別為 賓館酒店_point (0) 餐飲_point (1) 超市商城_point (2) 地級市_font

ArcGIS API For Javascript GP工具 Printing Tools匯出地圖或者列印地圖(二):GP 服務Printing Tools

ArcGIS API For Js 出圖 按照上一篇寫的,用Printing Tools匯出或者列印地圖原始碼奉上,裡面需要注意跨域問題,要設定代理 //打印出圖 function initPrintMap() {     require(['dojo/_bas

ArcGIS API For Javascript GP工具 Printing Tools匯出地圖或者列印地圖(一):GP 服務Printing Tools

ArcGIS API For Js  出圖 在Arcgisserver 10.X版本里面,安裝ArcServer之後自帶列印模板,不需要自己再單獨釋出;如果安裝之後沒用也是可以自己通過ArcToolBox裡面帶的工具自己再發布,本篇先說一下這個Printing Tools GP服務。為

ArcGIS API for JavaScript學習(1):第一個地圖

樣式表 參數 資源 charset 底層 arcgis 順序 api navi 1.簡介 ArcGIS API for JavaScript跟隨ArcGIS 9.3同時發布,是ESRI根據JavaScript技術實現的調用ArcGIS Server REST API接口的一

Arcgis api for javascript學習筆記-三維地圖的飛行效果

com init viewport window eight put div speed null 其實就只是用到了 view.goTo() 函數,再利用 window.setInterval() 函數(定時器)定時執行goTo()。代碼如下: <!DOCTYP

ArcGIS API For JavaScript(三)QueryTask&IdentifyTask實現空間查詢

ArcGIS API For JavaScript(三)QueryTask&IdentifyTask實現空間查詢 1、通過QueryTask()實現空間查詢 在地圖上畫一個多邊形,將和多邊形相交的要素找出並高亮顯示,之後動態新增表格,將要素的名稱依次顯示在表格中   <

ArcGIS API for JavaScript 4.9學習筆記一(建立2D/3D地圖

ArcGIS API for JavaScript 4.9學習筆記一(建立2D/3D地圖) 2D: 程式碼: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

ArcGIS API For Javascript之顏色分類實現

   在博文(http://blog.csdn.net/lovecarpenter/article/details/52672046)的基礎上,利用該文章中的客戶端渲染唯一值實現了功能。但是做了修改,我渲染的是SimpleLineSymbol。在API3.8的版本中set

設定和使用地圖的範圍—ArcGIS API for JavaScript

設定地圖的範圍或獲得地圖範圍是使用地圖時常見操作。在地圖上設定新範圍的一個簡單的替代方法是在地圖上呼叫centerAndZoom()法,該方法基於給定的中心點和縮放級別設定新的範圍。 預設範圍 如

ArcGIS API For Javascript之呼叫動態地圖服務+屬性、空間查詢

1.引言       在本篇部落格中主要記錄一下在ArcGIS API如何呼叫自己釋出的動態地圖服務,利用動態地圖服務我們可以完成哪一些需求等等。 注:(如何利用ArcGIS Server釋出動態地圖服務請看部落格ArcGIS Server釋出動態地圖服務), 2.呼叫動態地

(三)ArcGIS API For Javascript之呼叫動態地圖服務

1.引言       在本篇部落格中主要記錄一下在ArcGIS API如何呼叫自己釋出的動態地圖服務,利用動態地圖服務我們可以完成哪一些需求等等。 注:(如何利用ArcGIS Server釋出動態地圖服務請看部落格ArcGIS Server釋出動

ArcGIS api for javascript+jquery實現簡單的圖層控制切換

這一個功能網上有很多版本,快被寫爛了。寫這篇部落格的初衷是給各位不是GIS行業或沒有接觸過這個東東的猿們一些幫助。或許還有更簡單或者相似的希望大家看了之後可以提出來一起討論。只是很初級的程式碼,希望各位大大路過輕噴。歡迎交流。話不多說,咱們開始。 首先在已有地圖物件及圖層的