所以我的思路如下:
- 使用arcgis javascript api 的Draw工具( esri/toolbars/draw ),主要功能是绘制出点线面。
- 然后再计算绘制出来的图形,这里需要使用geometryEngine( esri/geometry/geometryEngine 3.13才添加的新工具 ),主要功能是计算对应的图形长度面积等。这里也可以使用arcgis server里面的服务来代替。
下面说下实现的步骤:
-
使用Draw工具绘制图形(官网实例代码)。
new出draw工具--->定义绘制完成的回调函数--->在对应地方添加触发绘制的事件
- 引入对应的draw esri/toolbars/draw ,定义draw工具
var draw = new Draw(map);- 定义绘制完成的回调函数
var draw = new Draw(map); /**on(type: "draw-complete", listener: (event: { geometry: Geometry; target: Draw }) => void): esri.Handle;回调函数的参数有:绘制完成图形的对应的地理信息:geometry,以及整个draw对象。*/ draw.on("draw-complete",endDraw)function endDraw(event){//逻辑处理 }- 在对应的dom触发对应的图形绘制,下面举例绘制点的例子。
var draw = new Draw(map); /**on(type: "draw-complete", listener: (event: { geometry: Geometry; target: Draw }) => void): esri.Handle;回调函数的参数有:绘制完成图形的对应的地理信息:geometry,以及整个draw对象。*/ draw.on("draw-complete",endDraw)function endDraw(event){//逻辑处理 }var ptDom = document.getElementById("ptDom") ptDom.addEventListener("click", drawPoint, false); function drawPoint(){this.draw.activate(Draw.POINT); }下面分别是开启绘制对应图形的代码,以及取消绘制,可以在对应的dom事件添加:
function drawCircle(){//绘制圆this.draw.activate(Draw.CIRCLE); } function drawPolygon(){//绘制多边形this.draw.activate(Draw.POLYGON); } function drawPolyline(){//绘制线this.draw.activate(Draw.POLYLINE); } function endDraw(){this.draw.deactivate(); } -
测距、测面积的工具实现。引入工具geometryEngine esri/geometry/geometryEngine工具,这里需要在绘制完成的回调参数里面判断绘制的图形类型,然后再做对应处理。下面关注 endDraw 函数即可。
function endDraw(event){//逻辑处理var result = null;switch (event.geometry.type) {case "point":break;case "polyline"://使用geodesicLength计算长度result = GeometryEngine.geodesicLength(event.geometry,"kilometers");break;case "polygon"://使用geodesicArea计算面积result = GeometryEngine.geodesicArea(event.geometry,"kilometers");break;default:break;} }上面就能得到你需要的结果,然后再你想要的地方显示出来就可以了。
-
缓冲区分析工具实现。我们继续在回调函数 endDraw 处理。缓冲区分析,主要就是在绘制的范围内,筛选出该范围内的图形。主要是针对各种图层服务来做对应的处理。下面主要介绍:FeatureServer、以及featureCollection构建的FeatureLayer图层。
... var layer //这里是你的各种图层 ... function endDraw(event){switch (event.geometry.type) {case "polygon"://只有是多边形的才进行处理switch (layer.type) {case "Feature Layer":if(layer.url){//如果是基于arcgis server的服务的FeatureLayer/* 引入"esri/tasks/query",可以直接调用服务的查询,非常方便 */var query = new Query();query.geometry = event.geometry;query.outFields = ["OBJECTID"];var queryTask = new QueryTask(layer.layer.url);varqueryTask.execute(query, (results: any) => {//results就是在绘制范围内的要素。});}else{//如果是基于featureCollection构建的FeatureLayer}break;default:break;}break;default:break;} }
.......未完不续。。。