ArcGIS API for JS4.8点、线、面、圆和多边形缓冲区绘制

最新推荐文章于 2023-05-11 10:20:10 发布
最新推荐文章于 2023-05-11 10:20:10 发布
阅读量6.5k 收藏 21
点赞数 2
分类专栏： ArcGIS操作与开发 WebGIS开发 文章标签： 缓冲区 buffer ArcGIS Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gisuuser/article/details/81455029
版权

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>

效果如下：

 

图片今天一直传不上来，就先算了

 

GIS开发者
关注
  • 2
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
Arcgis api for javascript(4.5版本) - 点击多边形(Polygon)并高亮显示
04-10
Arcgis api for javascript(4.5版本) - 点击多边形(Polygon)并高亮显示
arcgis api for js 4.x 绘制点、线、面、矩形、圆及缓冲分析链接
ANNENBERG的博客
11-25 1380
"esri/views/draw/Draw" var draw=new Draw({view:view}); var graphicsLayer=new GraphicsLayer(); map.add(graphicsLayer); 画点 function drawPoint(view,graphicsLayer,draw){ require([ "esri/Graphic", ], function(
js绘制环形缓冲区- JavaScript JSTS Buffer polyline
fuyou@的博客
07-31 3574
一，JS缓冲区绘制 参考链接： https: //coderwall.com/p/zb_zdw/buffered-polyline https://coderwall.com/p/-7eojg/jsts-buffered-polyline-in-route-service-google -maps-v3 https://bjornharrtell.github.io/jsts/doc/...
ArcGIS API for JavaScript4.18之手动绘制多边形
盛夏晚秋的博客
05-18 803
一、创建Draw实例 const draw = new Draw({ view: view }); 二、绑定绘制按钮的点击事件 let action = draw.create("polygon"); // PolygonDrawAction.vertex-add // Fires when user clicks, or presses the "F" key. // Can also be triggered when the "R" key is pressed to redo. action.
arcGis for javaScript4.x 简单实用的绘制点、线、面的geometry函数和symbol函数方法
mf_717714的博客
07-09 1193
1，使用new对象的默认的方法 点 const pointGeometry = new Point({ longitude：-118.29026, latitude：34.1816 }); const pointSymbol = new SimpleMarkerSymbol({ color: [226, 119, 40], outline: { color: [255, 255, 255], width: 1 } }) 线 const lineGeometry = new Polylin
arcgis api 图形编辑
QQ24382327博客
08-23 990
图形编辑，顾名思义，就是对绘制的图形graphicLayer进行编辑，如移动、 拉伸、选择、删除和增加节点的功能。下图是增加节点和拉伸功能的截图。 实现代码，复制可直接运行： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" conte
arcgis for js 实现点、线、面、手动线、手动面缓冲区分析功能
wo_buzhidao的博客
01-05 5488
1.案例中使用的地图服务都可以在arcgis server manager中创建地图服务器切片地址和buffer服务地址； 实现全部代码如下； 2.可以自定义动态选择缓冲区距离长度，缓冲区投影坐标系，缓冲区距离单位等； 3.先实现过程中在缓冲区坐标系中遇到些问题（Buffer Spatial Reference WKID），在下一篇中重点介绍下； 代码如下：
Arcgis 常用的方法
瑾&凌
01-09 879
Arcgis for JS  常用的方法，数据格式采用json /** * 常用的方法 * 该api 属于3.27版本 */ //该变量用于存储地图对象 var GridMap; require([ "esri/layers/GraphicsLayer",//图形层 "esrichina/TianDiTuLayer",//天地图图层 "esri/map",//...
cesium+turf.js实现缓冲区分析
leekuikui的博客
05-11 1265
可以在地图上绘制点，线，面，并且根据绘制的点线面绘制缓冲区。
arcgis api for js 4.* 点、线、面、圆、矩形的绘制
baijian10的博客
07-14 2102
用的"esri/views/draw/Draw" var draw=new Draw({view:view}); var graphicsLayer=new GraphicsLayer(); map.add(graphicsLayer); 画点 function drawPoint(view,graphicsLayer,draw){ require([ "esri/Graphic", ], function(
ArcGIS API for JavaScript4.8 实例
10-26
包含大量的ArcGIS API for JavaScript4.8的开发实例，可用于WebGIS开发者学习资料，内容全面，并且能正常执行。
arcgis api for js 4.8
02-11
arcgis api for javascript 4.8版本。直接放在Tomcat下可直接使用
ArcGIS API for JavaScript 4.x 基础之绘制点、线、面、标注、图片（完整代码）
01-08
ArcGIS API for JavaScript 4.x 基础之绘制点、线、面、标注、图片的完整代码；
arcgis api for js 缓冲区分析
11-12
arcgis api for js 缓冲区分析。可以直接运行，可以实现，初学者可以下载看看
27（arcgis api for js篇）arcgis api for js矩形修改矩形编辑（SketchViewModel）
07-07
该资源包的执行效果查看地址：...“GIS之家”专栏中的“27.（arcgis api for js篇）arcgis api for js矩形修改矩形编辑（SketchViewModel）”。如下载有问题，可联系博主。 解压密码：arcgis
Shapefile格式数据去除投影坐标系
热门推荐
做GIS梦的人
08-13 3万+
在处理ArcGIS矢量数据的时候，我们如果需要去掉数据的坐标系，有一个简单的方法 1.先把数据转换成Shapefile格式，如果已经是了，就不用转换。一个已经有投影的Shapefile格式数据通常由以下文件组成，如下图： 2.上图中的后缀名为prj的文件就是投影信息文件，我们把它删除就可以去掉投影信息，下面两个图是同一个数据删除prj文件后的属性对比： 删除后
Leaflet调用谷歌地图、天地图、智图地图、高德题图一键搞定
做GIS梦的人
08-26 2万+
Leaflet调用各种地图的功能十分复杂，幸好有leaflet.ChineseTmsProviders这个插件，这四种地图直接就可以加载进来，十分方便。 下面是我做的例子：
Python使用pyshp库读取shapefile信息
做GIS梦的人
08-14 1万+
通过pyshp库，可以读写Shapefile文件，查询相关信息，github地址为https://github.com/GeospatialPython/pyshp#reading-shapefile-meta-data import shapefile # 使用pyshp库 file = shapefile.Reader("data\\市界.shp") shapes = file.sha...
ArcGIS批量打断相交线
做GIS梦的人
06-08 1万+
在数据处理时，有时候需要把相交的线全部从交点打断。今天说一下在ArcGIS里 如何实现：最初线的效果如上图所示打开ArcToolBox，找到要素转线工具在弹出的面板中处理选择线要素图层然后确定最终生成断开之后的图层，如下图所示：可以看到，线全部从交点处断开了...
arcgis api for js 绘制点线面
最新发布
06-25
绘制面是ArcGIS API for JS最强大的功能之一，它可以让开发者创建自己的多边形、圆形、矩形等形状。开发者可以自定义面的颜色、透明度、边框、填充等属性，从而轻松创建专业级别的地图要素。此外，API还支持多个面的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GIS开发者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值