ArcGIS API for JS4.8點、線、面、圓和多邊形緩衝區繪製
阿新 • • 發佈:2019-01-26
ArcGIS API for JS4.8瀏覽器繪製緩衝區主要通過"esri/geometry/geometryEngine"這個物件實現,其中繪製的方法主要有"buffer()"和"geodesicBuffer()"兩個方法實現,引數雖然一樣,效果卻不一樣,可以自己根據需要選擇。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>緩衝區分析</title> <link type="text/css" rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.8/esri/css/main.css"/> <script src="http://localhost/arcgis_js_api/library/4.8/init.js"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> </head> <body> <div id="viewDiv"> <div id="line-button" class="esri-widget esri-widget--button esri-interactive" title="畫線"> <span class="esri-icon-polyline"></span> </div> <div id="area-button" class="esri-widget esri-widget--button esri-interactive" title="畫面"> <span class="esri-icon-polygon"></span> </div> <div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="畫點"> <span class="esri-icon-radio-checked"></span> </div> <div id="circle-button" class="esri-widget esri-widget--button esri-interactive" title="畫圓"> <span class="esri-icon-radio-unchecked"></span> </div> <div id="rectangle-button" class="esri-widget esri-widget--button esri-interactive" title="畫矩形"> <span class="esri-icon-checkbox-unchecked"></span> </div> </div> <script> require([ "esri/Map", "esri/views/MapView", "esri/views/2d/draw/Draw", "esri/Graphic", "esri/geometry/Polyline", "esri/geometry/Polygon", "esri/geometry/Point", "esri/geometry/Circle", "esri/geometry/geometryEngine", "dojo/domReady!" ], function ( Map, MapView, Draw, Graphic, Polyline, Polygon,Point,Circle,geometryEngine ) { var map = new Map({ basemap: "dark-gray" }); //二維檢視 var view = new MapView({ map: map, container: "viewDiv" }); view.ui.add("line-button", "top-left");//新增繪製線按鈕,自定義UI view.ui.add("area-button", "top-left");//新增繪製面按鈕,自定義UI view.ui.add("point-button", "top-left");//新增繪製面按鈕,自定義UI view.ui.add("circle-button", "top-left");//新增繪製面按鈕,自定義UI view.ui.add("rectangle-button", "top-left");//新增繪製面按鈕,自定義UI // view.ui.remove("attribution");//移除底部ESRI logo var polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [140, 140, 222, 0.5], outline: { color: [0, 0, 0, 0.5], width: 2 } }; view.when(function () { var draw = new Draw({ view: view }); //繫結線按鈕繪製事件 var drawLineButton = document.getElementById("line-button"); drawLineButton.onclick = function() { view.graphics.removeAll();//清楚之前的繪製 enableCreateLine(draw, view); }; //繫結面按鈕繪製事件 var drawAreaButton = document.getElementById("area-button"); drawAreaButton.onclick = function() { view.graphics.removeAll();//清楚之前的繪製 enableCreateArea(draw, view); }; //繫結面按鈕繪製事件 var drawPointButton = document.getElementById("point-button"); drawPointButton.onclick = function() { enableCreatePoint(draw, view); }; //繫結面按鈕繪製事件 var drawCircleButton = document.getElementById("circle-button"); drawCircleButton.onclick = function() { enableCreateCircle(draw, view); }; //繫結面按鈕繪製事件 var drawRectangleButton = document.getElementById("rectangle-button"); drawRectangleButton.onclick = function() { enableCreateRectangle(draw, view); }; }); //開始監聽畫線 function enableCreateLine(draw, view) { var action = draw.create("polyline", { mode: "click" }); // 獲取焦點 view.focus(); // 頂點新增事件 action.on("vertex-add", createPolyline); //頂點移除事件 action.on("vertex-remove", createPolyline); // 滑鼠移動事件 action.on("cursor-update", createPolyline); // 繪製完成事件 action.on("draw-complete", createPolyline); } //開始監聽畫面 function enableCreateArea(draw, view) { var action = draw.create("polygon", { mode: "click"//點選方式加點 }); // 獲取焦點 view.focus(); // 頂點新增事件 action.on("vertex-add", createPolygon); //頂點移除事件 action.on("vertex-remove", createPolygon); // 滑鼠移動事件 action.on("cursor-update", createPolygon); // 繪製完成事件 action.on("draw-complete", createPolygon); } //開始監聽畫點 function enableCreatePoint(draw, view) { var action = draw.create("point", { mode: "click"//點選方式加點 }); // 獲取焦點 view.focus(); // 頂點新增事件 action.on("vertex-add", createPoint); //頂點移除事件 action.on("vertex-remove", createPoint); // 繪製完成事件 action.on("draw-complete", createPoint); } //開始監聽畫圓 function enableCreateCircle(draw, view) { var action = draw.create("circle", { mode: "click"//點選方式加點 }); // 獲取焦點 view.focus(); //頂點移除事件 action.on("vertex-remove", createCircle); // 滑鼠移動事件 action.on("cursor-update", createCircle); // 繪製完成事件 action.on("draw-complete", createCircle); } //開始監聽畫矩形 function enableCreateRectangle(draw, view) { var action = draw.create("rectangle", { mode: "click"//點選方式加點 }); // 獲取焦點 view.focus(); //頂點移除事件 action.on("vertex-remove", createRectangle); // 滑鼠移動事件 action.on("cursor-update", createRectangle); // 繪製完成事件 action.on("draw-complete", createRectangle); } //根據點座標生成新的線 function createPolyline(event) { //獲取所有頂點 var vertices = event.vertices; //清除之前繪製 view.graphics.removeAll(); var line=new Polyline({ paths: vertices, spatialReference: view.spatialReference }); // 生成繪製的圖形 var graphic = new Graphic({ geometry: line, symbol: { type: "simple-line", // autocasts as new SimpleFillSymbol color: [4, 90, 141], width: 4, cap: "round", join: "round" } }); // 將繪製的圖形新增到view view.graphics.add(graphic); if(event.type=="draw-complete"){ createBuffer(line); } } //根據點座標生成新的線 function createPolygon(event) { //獲取所有頂點 var vertices = event.vertices; //清除之前繪製 view.graphics.removeAll(); var polygon=new Polygon({ hasZ: false, hasM: false, rings: [vertices], spatialReference: view.spatialReference }); // 生成繪製的圖形 var graphic = new Graphic({ geometry:polygon , symbol: { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [ 51,51, 204, 0.9 ], style: "solid", outline: { // autocasts as new SimpleLineSymbol() color: "white", width: 1 } } }); // 將繪製的圖形新增到view view.graphics.add(graphic); if(event.type=="draw-complete"){ createBuffer(polygon); } } //根據點座標生成新的線 function createPoint(event) { //獲取所有頂點 var coordinates = event.coordinates; var point= new Point({ hasZ: false, hasM: false, x:coordinates[0], y:coordinates[1], spatialReference: view.spatialReference }); //生成繪製的圖形 var graphic = new Graphic({ geometry:point, symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() style: "square", color: "blue", size: "8px", // pixels outline: { // autocasts as new SimpleLineSymbol() color: [ 255, 255, 0 ], width: 3 // points } } }); // 將繪製的圖形新增到view view.graphics.add(graphic); if(event.type=="draw-complete"){ createBuffer(point); } } //根據點座標生成新的線 function createCircle(event) { //獲取所有頂點 var vertices = event.vertices; //少於一個點無法展示圓 if(vertices.length<2){ return } //清除之前繪製 view.graphics.removeAll(); //生成繪製的圖形,兩點畫圓 var center=new Point({ hasZ: false, hasM: false, x:vertices[0][0], y:vertices[0][1], spatialReference: view.spatialReference }); var dis=center.distance(new Point({ hasZ: false, hasM: false, x:vertices[1][0], y:vertices[1][1], spatialReference: view.spatialReference })); var circle=new Circle({ hasZ: false, hasM: false, center:center, radius:dis, spatialReference: view.spatialReference }); var graphic = new Graphic({ geometry:circle , symbol: { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [ 51,51, 204, 0.9 ], style: "solid", outline: { // autocasts as new SimpleLineSymbol() color: "white", width: 1 } } }); // 將繪製的圖形新增到view view.graphics.add(graphic); if(event.type=="draw-complete"){ createBuffer(circle) } } function createRectangle(event) { //獲取所有頂點 var vertices = event.vertices; //兩點畫矩形 if(vertices.length<2){ return } var rings=[vertices[0],[vertices[0][0],vertices[1][1]],vertices[1],[vertices[1][0],vertices[0][1]]]; //清除之前繪製 view.graphics.removeAll(); var polygon=new Polygon({ hasZ: false, hasM: false, rings: [rings], spatialReference: view.spatialReference }); // 生成繪製的圖形 var graphic = new Graphic({ geometry: polygon, symbol: { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [ 51,51, 204, 0.9 ], style: "solid", outline: { // autocasts as new SimpleLineSymbol() color: "white", width: 1 } } }); // 將繪製的圖形新增到view view.graphics.add(graphic); console.log(event); if(event.type=="draw-complete"){ createBuffer(polygon); } } /** * 根據geometry生成緩衝區 * @param geometry 生成的geometry */ function createBuffer(geometry) { // var buffer=geometryEngine.geodesicBuffer(geometry,150,"kilometers",false); var buffer=geometryEngine.buffer(geometry,150,"kilometers",false); view.graphics.add((new Graphic({ geometry: buffer, symbol: polySym }))); } }) </script> </body> </html>
效果如下:
圖片今天一直傳不上來,就先算了