arcgis for js 實現點、線、面、手動線、手動面緩衝區分析功能

阿新 • • 發佈：2019-01-16

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

arcgis for js 實現點、線、面、手動線、手動面緩衝區分析功能

相關推薦