arcgis for js 實現點、線、面、手動線、手動面緩衝區分析功能
1.案例中使用的地圖服務都可以在arcgis server manager中建立地圖伺服器切片地址和buffer服務地址;
實現全部程式碼如下;
2.可以自定義動態選擇緩衝區距離長度,緩衝區投影座標系,緩衝區距離單位等;
3.先實現過程中在緩衝區座標系中遇到些問題(Buffer Spatial Reference WKID),在下一篇中重點介紹下;
程式碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定義緩衝區圖形</title> <link rel="stylesheet" type="text/css" href="http://localhost:8087/arcgis_js_api/library/3.22/3.22/esri/css/esri.css" /> <script src="http://localhost:8087/arcgis_js_api/library/3.22/3.22/init.js"></script> <script src="../js/jquery-1.3.1.js"></script> <style> html, body, #map { width: 100%; height: 100%; margin: 0; padding: 0; } </style> <script> var map;var draw; var gsvc,_Draw; var _GeometryService; require([ "dojo/dom-construct", "esri/Color", "esri/layers/ArcGISTiledMapServiceLayer", "esri/map", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/geometry/Extent", "esri/tasks/BufferParameters", "esri/tasks/GeometryService","dojo/_base/array", "esri/SpatialReference", "dojo/domReady!" ], function( domConstruct, Color, ArcGISTiledMapServiceLayer, Map,SimpleFillSymbol,SimpleLineSymbol, Draw,SimpleMarkerSymbol,Graphic,Extent,BufferParameters,GeometryService,array,SpatialReference ) { map; _Draw=Draw; _GeometryService=GeometryService; map = new Map("map", { extent: new Extent({ "xmin":126.08797131337525,"ymin":41.88483304829672,"xmax":130.05572254059723,"ymax":47.20292839632739, "spatialReference":{"wkid":4326}}) }); var oilAndGasLayer = new ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/itms/MapServer"); map.addLayer(oilAndGasLayer); gsvc=GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"); console.log(GeometryService.UNIT_STATUTE_MILE); map.on("load",function(){ draw=new Draw(map); draw.on("draw-complete",doBuffer); }); function doBuffer(result){ debugger; switch (result.geometry.type) { case "point": var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25])); break; case "polyline": var symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1); break; case "polygon": var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])); break; } var graphic = new Graphic(result.geometry,symbol); map.graphics.add(graphic); var params = new BufferParameters(); params.distances = [dojo.byId("distance").value]; params.bufferSpatialReference = new SpatialReference({wkid: dojo.byId("bufferSpatialReference").value}); params.outSpatialReference = map.spatialReference; params.unit= eval("_GeometryService."+dojo.byId("unit").value); params.geometries= [graphic.geometry ]; if (result.geometry.type === "polygon") { var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([0,0,255,0.65]), 2 ), new Color([0,0,255,0.35]) ); var graphic = new Graphic(result.geometry,symbol); map.graphics.add(graphic); gsvc.buffer(params, function(features) { showBuffer(features); }); } else { gsvc.buffer(params, function(features) { showBuffer(features); }); } } function showBuffer(features) { var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0, 0.65]), 2 ), new Color([255, 0, 0, 0.35]) ); for (var j = 0, jl = features.length; j < jl; j++) { map.graphics.add(new Graphic(features[j],symbol)); } draw.deactivate(); map.showZoomSlider(); } }); function point (){ draw.activate(_Draw.LINE);map.hideZoomSlider(); } </script> </head> <body> <button onclick="point()">Line</button> <button onclick="draw.activate(_Draw.POLYLINE);map.hideZoomSlider();">Polyline</button> <button onclick="draw.activate(_Draw.FREEHAND_POLYLINE);map.hideZoomSlider();">Freehand Polyline</button> <button onclick="draw.activate(_Draw.POLYGON);map.hideZoomSlider();">Polygon</button> <button onclick="draw.activate(_Draw.FREEHAND_POLYGON);map.hideZoomSlider();">Freehand Polygon</button> <div id="map" style="height:90%;border:1px solid #000;"></div> Buffer Spatial Reference WKID: <input type="text" id="bufferSpatialReference" size="5" value="102100" /> Buffer Distance: <input type="text" id="distance" size="10" value="25" /> <select id="unit"> <option value="UNIT_STATUTE_MILE">Miles</option> <option value="UNIT_FOOT">Feet</option> <option value="UNIT_KILOMETER">Kilometers</option> <option value="UNIT_METER">Meters</option> <option value="UNIT_NAUTICAL_MILE">Nautical Miles</option> <option value="UNIT_US_NAUTICAL_MILE">US Nautical Miles</option> </select> <input type="button" value="Clear Graphics" onclick="map.graphics.clear();" /> </body> </html>
相關推薦
arcgis for js 實現點、線、面、手動線、手動面緩衝區分析功能
1.案例中使用的地圖服務都可以在arcgis server manager中建立地圖伺服器切片地址和buffer服務地址; 實現全部程式碼如下; 2.可以自定義動態選擇緩衝區距離長度,緩衝區投影座標系,緩衝區距離單位等; 3.先實現過程中在緩衝區座標系中遇到些問題(
ArcGIS API for js 實現點、線、面等圖形的繪畫
今天總算敲定實習的事,也不知道未來等待我的將是什麼,但是我知道我既然選擇了就要把它做好,選擇就不要後悔,走下去====開車開車一、實現的思路首先宣告一個GraphicLayer的圖層,(該圖層是客戶端型別圖層,與ArcGIS Server釋出的圖層沒有任何聯絡,繪畫的物件也在
Arcgis for Js實現Spline插值、區域裁剪以及頁面的輪播效果
概述:本文講述如何利用Arcgis 的Gp服務實現Spline插值,並將插值的結果按照指定的區域進行裁剪,最後將裁剪的結果根據特定的樣式渲染,並在頁面實現多期輪播的這樣一個效果。實現效果:實現步驟:1、模型構建a、確定需要工具該功能需要兩個工具:1、Spline,實現插值計算
arcgis for js實現GP服務建立、釋出、呼叫(呼叫GP釋出服務)
1.本例中使用的地圖服務和GP服務都可以從arcgis server manage中拿到; 2.資料型別,這是GP服務的資料型別。每一個GP服務資料型別和JS資料型別進行對應,比如緩衝區模型製作中使用的FeatureClass,,釋出服務說明(對於說明可以參考這裡http:
Arcgis for Js實現graphiclayer的空間查詢
var outline edm == .net result aps family -c 本節講的是Arcgis for Js的針對graphiclayer的空間查詢,內容非常easy。代碼例如以下: <!DOCTYPE html> <html>
Arcgis for Js實現graphiclayer的空間查詢(續)
上文中,實現了簡單的針對graphiclayer的空間查詢工作,在本節,將更加詳細的介紹針對graphiclayer的空間查詢。首先,空間查詢的方式:提供多種型別的空間查詢,包括點周邊、線周邊、面內等多種方式;其次,圖形繪製完成後狀態的展示;再次,結果的顯示。實現後的結果如
arcgis for js 開發系列之地圖實現右鍵點選事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv
arcgis for js 點投影實現
1.本例中使用服務連結可以在arcgis server manager中拿到; 2.實現點投影功能; 程式碼如下: <!DOCTYPE html> <html> <head> <title>墨卡託投影一個點</t
android仿微信、QQ等聊天介面,實現點選輸入框彈出軟鍵盤、點選其他區域收起軟鍵盤,預設滑動至最低端
如圖所示,點選輸入框及選擇圖片和傳送按鈕時軟鍵盤顯示且不消失,點選其他區域,則隱藏軟鍵盤。 主要程式碼如下: override fun dispatchTouchEvent(ev: MotionEvent?): Boolean { if (ev!!.getAction() ==
ArcGIS API for JS實現要素的查詢與定位
1、實現多要素查詢與定位 a、線查詢與定位 線要素主要是那些到路線,在查詢下下拉選擇某種道路型別,便可以獲得該圖層的layerid,將該ID值傳遞給要查詢的URL,形成完整的查詢URL,通過Quer
利用Turf.js實現點線面幾何體的拓撲關係判斷
第一步:先引用js檔案 <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script> 第二步:呼叫函式,判斷關係 booleanClockwise(line) /
用js實現複製內容到作業系統貼上板(相容IE、谷歌、火狐等瀏覽器)
一、如果只考慮IE瀏覽器,可以直接用原聲js實現 if(window.clipboardData){ //清空作業系統貼上板 window.clipboardData.clearData(); //將需要複製的內容複製到作業系統貼上板 window.clipbo
arcgis api for js實現距離測量和麵積測量(完整版本)
一、距離測量和麵積測量是GIS必備的功能效果圖如下:二、量算函式(核心) //量算函式 function mapClick(evt) { if(disFun){
arcgis for js之描點
//座標 var point = new esri.geometry.Point(x, y, map.spatialReference); //圖形的樣式 var symbolurl=“img/pic.jpg”; //建立 var symbol = new esri.sy
Arcgis for Js之GeometryService實現測量距離和麵積
距離和麵積的測量時GIS常見的功能,在本節,講述的是通過GeometryService實現測量面積和距離。先看看實現後的效果: 距離
(轉)Arcgis for Js之Graphiclayer擴展詳解
不同的 nes library 創建 都是 拖拽 oms hang graph http://blog.csdn.net/gisshixisheng/article/details/41208185 在前兩節,講到了兩種不同方式的聚類,一種是基於距離的,一種是基於區域範圍
js實現點擊下拉框選中對應的div
ted bsp tel 範圍 selected onchange 大學 left nbsp <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&
js實現點擊定位最頂端
func math body ret turn script doc speed top //------------------------------------點擊按鈕------------------------------------ <span onCl
vue.js實現點擊後動態添加class及刪除同級class
變色 點餐 tail itl 需要 name .cn 好用 get 最近使用vue需要實現一個點餐選擇商品規格的頁面,需要通過vue動態的給被點擊的元素添加class名字,使其變色,其他的刪除class。如圖: 開始在網上找了許多辦法發現不是太好用,最後找到一個發現還是不
js實現點擊評論進行顯示回復框
pen -c 進行 http his pan () 用戶評論 2.4 有人在群裏問如何在留言評論那裏點擊回復按鈕,下面就自動顯示一個回復框,他想要的效果如圖: 於是我隨意的寫了一段HTML,代碼如下: <!DOCTYPE HTML> <html lan