| Arcgis for javascript 4.20绘制点、线、面、矩形、圆 | 您所在的位置：网站首页 › arcgis画矩形 › Arcgis for javascript 4.20绘制点、线、面、矩形、圆 |
Arcgis for javascript 4.20绘制点、线、面、矩形、圆
|
1、使用Arcgis for javascript 4.20Sketch方法的小工具进行创建和更新点、折现、多边形、圆几何图形的图形 绘制小部件 ArcGIS API for JavaScript 4.20 html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } require([ "esri/widgets/Sketch", "esri/Map", "esri/layers/GraphicsLayer", "esri/views/MapView" ], (Sketch, Map, GraphicsLayer, MapView) => { const graphicsLayer = new GraphicsLayer(); const map = new Map({ basemap: "dark-gray", layers: [graphicsLayer] }); const view = new MapView({ container: "viewDiv", map: map, zoom: 5, center: [90, 45] }); view.when(() => { const sketch = new Sketch({ layer: graphicsLayer, view: view, // graphic will be selected as soon as it is created creationMode: "update" }); view.ui.add(sketch, "top-right"); }); });
2、使用ArcGIS API for JS4.20 Draw手动绘制绘制点（Point）、线（Polyline）、面（Polygon）、矩形（Rectangle）、圆（Circle） ArcGIS demo html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } 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", "dojo/domReady!" ], function ( Map, MapView, Draw, Graphic, Polyline, Polygon,Point,Circle ) { var map = new Map({ basemap: "dark-gray" }); //二维视图 var view = new MapView({ map: map, zoom: 5, center: [90, 45], 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 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 graphic = new Graphic({ geometry: new Polyline({ paths: vertices, spatialReference: view.spatialReference }), symbol: { type: "simple-line", // autocasts as new SimpleFillSymbol color: [4, 90, 141], width: 4, cap: "round", join: "round" } }); // 将绘制的图形添加到view view.graphics.add(graphic); }; //根据点坐标生成新的线 function createPolygon(event) { //获取所有顶点 var vertices = event.vertices; //清除之前绘制 view.graphics.removeAll(); // 生成绘制的图形 var graphic = new Graphic({ geometry: new Polygon({ hasZ: false, hasM: false, rings: [vertices], spatialReference: view.spatialReference }), symbol: { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [ 51,51, 204, 0.9 ], style: "solid", outline: { // autocasts as new SimpleLineSymbol() color: "red", width: 1 } } }); // 将绘制的图形添加到view view.graphics.add(graphic); } //根据点坐标生成新的线 function createPoint(event) { //获取所有顶点 var coordinates = event.coordinates; //生成绘制的图形 var graphic = new Graphic({ geometry: new Point({ hasZ: false, hasM: false, x:coordinates[0], y:coordinates[1], spatialReference: view.spatialReference }), 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); } //根据点坐标生成新的线 function createCircle(event) { //获取所有顶点 var vertices = event.vertices; //少于一个点无法展示圆 if(vertices.length { if (event.state === "complete") { sketchGeometry = event.graphic.geometry; } }); }) } |
【本文地址】
公司简介
联系我们