缓冲区分析WebMercator - 4.11.html

最新推荐文章于 2023-06-10 11:50:24 发布
最新推荐文章于 2023-06-10 11:50:24 发布
阅读量357 收藏
点赞数
分类专栏： arcgis_js_api_demo4.11
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42193179/article/details/89960682
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>缓冲区分析WebMercator - 4.11</title>

    <!--<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css"/>-->
    <!--<script src="https://js.arcgis.com/4.11/"></script>-->

    <link rel="stylesheet"
          href="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/esri/themes/light/main.css">
    <script src="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/init.js"></script>
    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="viewDiv">
    <div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="画点">
        <span class="esri-icon-radio-checked"></span>
    </div>
    <div id="line-button" class="esri-widget esri-widget--button esri-interactive" title="画线">
        <span class="esri-icon-polyline"></span>
    </div>
    <div id="polygon-button" class="esri-widget esri-widget--button esri-interactive" title="画面">
        <span class="esri-icon-polygon"></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/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
    ) {
        let map = new Map({
            basemap: "dark-gray"
        });
        let view2d = new MapView({
            container: "viewDiv",
            map: map,
            center: [116.397245, 39.900930],  // 经度范围：[-180, 180], 纬度范围：[-90,90]
            zoom: 8
        });
        let draw, drawAction;
        console.log("view2d:", view2d);

        // 添加各种按钮，自定义UI。
        view2d.ui.add("point-button", "top-left");
        view2d.ui.add("line-button", "top-left");
        view2d.ui.add("polygon-button", "top-left");
        view2d.ui.add("circle-button", "top-left");
        view2d.ui.add("rectangle-button", "top-left");
        view2d.ui.remove("attribution");  // 移除底部ESRI logo

        let simpleMarkerSymbol = {
            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
            }
        };
        let simpleLineSymbol = {
            type: "simple-line", // autocasts as new SimpleLineSymbol()
            color: [4, 90, 141],
            width: 4,
            cap: "round",
            join: "round"
        };
        let simpleFillSymbol_buffer = {
            type: "simple-fill", // autocasts as new SimpleFillSymbol()
            color: [140, 140, 222, 0.5],
            outline: {
                color: [0, 0, 0, 0.5],
                width: 2
            }
        };
        let simpleFillSymbol = {
            type: "simple-fill",  // autocasts as new SimpleFillSymbol()
            color: [51, 51, 204, 0.9],
            style: "solid",
            outline: {  // autocasts as new SimpleLineSymbol()
                color: "white",
                width: 1
            }
        };
        view2d.when(function () {
            draw = new Draw({
                view: view2d
            });
            document.getElementById("point-button").onclick = function () {
                view2d.graphics.removeAll();
                enableCreatePoint();
            };
            document.getElementById("line-button").onclick = function () {
                view2d.graphics.removeAll();
                enableCreateLine();
            };
            document.getElementById("polygon-button").onclick = function () {
                view2d.graphics.removeAll();
                enableCreatePolygon();
            };
            document.getElementById("circle-button").onclick = function () {
                view2d.graphics.removeAll();
                enableCreateCircle();
            };
            document.getElementById("rectangle-button").onclick = function () {
                view2d.graphics.removeAll();
                enableCreateRectangle();
            };
        });

        function enableCreatePoint() {
            let drawAction = draw.create("point");
            drawAction.on(["vertex-add", "vertex-remove", "draw-complete"], createPoint);
        }

        function createPoint(event) {
            let graphic = new Graphic({
                geometry: {
                    type: "point", // autocasts as new Point()
                    x: event.coordinates[0],
                    y: event.coordinates[1],
                    spatialReference: view2d.spatialReference
                },
                symbol: simpleMarkerSymbol
            });
            // 将绘制的图形添加到view
            view2d.graphics.add(graphic);
            if (event.type == "draw-complete") {
                console.log("point:", graphic.geometry);
                createBuffer(graphic.geometry);
            }
        }

        function enableCreateLine() {
            let drawAction = draw.create("polyline", {
                mode: "click"
            });
            // 监听各种事件，绘制折线。
            drawAction.on(["vertex-add", "vertex-remove", "cursor-update", "draw-complete"], createPolyline);
        }

        function createPolyline(event) {
            view2d.graphics.removeAll();
            let graphic = new Graphic({
                geometry: {
                    type: "polyline", // autocasts as new Polyline()
                    paths: event.vertices,
                    spatialReference: view2d.spatialReference
                },
                symbol: simpleLineSymbol
            });
            view2d.graphics.add(graphic);
            if (event.type == "draw-complete") {
                console.log("polyline:", graphic.geometry);
                createBuffer(graphic.geometry);
            }
        }

        function enableCreatePolygon() {
            let drawAction = draw.create("polygon", {
                mode: "click"
            });
            drawAction.on(["vertex-add", "vertex-remove", "cursor-update", "draw-complete"], createPolygon);
        }

        function createPolygon(event) {
            view2d.graphics.removeAll();
            let vertices = event.vertices;
            let vertices2 = vertices.slice();
            vertices2[vertices2.length] = vertices2[0];
            let graphic = new Graphic({
                geometry: {
                    type: "polygon", // autocasts as new Polygon()
                    rings: vertices2,
                    spatialReference: view2d.spatialReference
                },
                symbol: simpleFillSymbol
            });
            // 将绘制的图形添加到view
            view2d.graphics.add(graphic);
            if (event.type == "draw-complete") {
                console.log("polygon:", graphic.geometry);
                createBuffer(graphic.geometry);
            }
        }

        function createBuffer(geometry) {
            /*此函数用于，构造缓冲区。
            * geometry, 用于构造缓冲区的几何图形。
            * 注意：当前视图的spatialReference是，isWebMercator: true，
            * 所以使用geometryEngine.geodesicBuffer方法！*/
            let buffer;
            if (view2d.spatialReference.isWGS84 || view2d.spatialReference.isWebMercator) {
                // WGS84 (wkid: 4326，地理坐标系) 或 Web Mercator（投影坐标系）坐标系。
                console.log("WGS84 或 Web Mercator坐标系。");
                buffer = geometryEngine.geodesicBuffer(geometry, 10, "kilometers");
            }
            else if (view2d.spatialReference.isGeographic) {
                // 地理坐标系。
                // GeometryService.buffer();
            }
            else {
                // 投影坐标系。
                buffer = geometryEngine.buffer(geometry, 10, "kilometers");
            }
            view2d.graphics.add(
                new Graphic({
                    geometry: buffer,
                    symbol: simpleFillSymbol_buffer
                })
            );
        }

        function enableCreateCircle() {
            drawAction = draw.create("circle", {
                mode: "click"  // 点击方式加点
            });
            drawAction.on(["vertex-remove", "cursor-update", "draw-complete"], createCircle);
        }

        function createCircle(event) {
            view2d.graphics.removeAll();
            let vertices = event.vertices;
            // 少于2个点无法展示圆。
            if (vertices.length < 2) {
                return
            }
            // 构造圆心点。
            let center = new Point({
                hasZ: false,
                hasM: false,
                x: vertices[0][0],
                y: vertices[0][1],
                spatialReference: view2d.spatialReference
            });
            // 求两点的距离，即，半径。
            // point.distance(), 此方法貌似只适合在“投影坐标系”中使用。
            let dis = center.distance(new Point({
                hasZ: false,
                hasM: false,
                x: vertices[1][0],
                y: vertices[1][1],
                spatialReference: view2d.spatialReference
            }));
            let circle = new Circle({
                hasZ: false,
                hasM: false,
                center: center,
                radius: dis,
                geodesic: true,
                spatialReference: view2d.spatialReference
            });
            let 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
            view2d.graphics.add(graphic);
            if (event.type == "draw-complete") {
                // createBuffer(circle)

                console.log("vertices:", vertices);
                console.log("center:", center);
                console.log("other:", {
                    type: "point", // autocasts as new Point()
                    x: vertices[1][0],
                    y: vertices[1][1],
                    spatialReference: view2d.spatialReference
                });
                console.log("dis:", dis);
                console.log("circle:", circle);
                console.log("graphic:", graphic);
            }
        }

        function enableCreateRectangle() {
            let drawAction = draw.create("rectangle", {
                mode: "click"//点击方式加点
            });
            // 获取焦点
            // view2d.focus();

            //顶点移除事件
            drawAction.on("vertex-remove", createRectangle);
            // 鼠标移动事件
            drawAction.on("cursor-update", createRectangle);
            // 绘制完成事件
            drawAction.on("draw-complete", createRectangle);

        }

        function createRectangle(event) {
            //获取所有顶点
            let vertices = event.vertices;

            //两点画矩形
            if (vertices.length < 2) {
                return
            }
            let rings = [vertices[0], [vertices[0][0], vertices[1][1]], vertices[1], [vertices[1][0], vertices[0][1]]];
            //清除之前绘制
            view2d.graphics.removeAll();
            let polygon = new Polygon({
                hasZ: false,
                hasM: false,
                rings: [rings],
                spatialReference: view2d.spatialReference
            });
            // 生成绘制的图形
            let 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
            view2d.graphics.add(graphic);
            // console.log(event);
            if (event.type == "draw-complete") {
                createBuffer(polygon);
            }
        }
    })

    /*知识点：
    * 1.点、线、面等的几何图形的空间参考Default Value:WGS84 (wkid: 4326)。*/
</script>
</body>
</html>
学无止境慢慢来
关注
专栏目录
ogr 缓冲区_PyQGIS开发 -- 缓冲区分析
weixin_35949298的博客
01-17 885
缓冲区分析在GIS中属于入门级分析内容，使用非常广泛。例如，需要统计全市内所有学校周围1公里范围分别有多少家小吃店？统计全市所有楼盘周围2公里范围分别有多少配套设施？等等。做法都是对待分析对象做不同大小的缓冲区，然后利用空间查询，统计缓冲区范围内特定属性。本文我们分两个部分来讲解。首先，使用QGIS桌面端软件操作来讲解如何做缓冲区，然后再讲PyQGIS的编程实现。再次强调：PyQGIS的接口与C+...
flink-conf.yaml配置解析
yjh1271845364的博客
01-27 7192
################################################################################ #  Licensed to the Apache Software Foundation (ASF) under one #  or more contributor license agreements.  See the NOTIC...
缓冲区分析
qq_40216244的博客
05-12 1920
https://max.book118.com/html/2017/0413/100115628.shtm这篇pdf中详细介绍了如何利用Ae二次开发进行编写缓冲区分析转载
（三十）矢量数据的空间分析——缓冲区分析
最新发布
qq_42540466的博客
06-10 5069
矢量数据的空间分析——缓冲区分析
GIS应用技巧之缓冲区分析
热门推荐
端木宛白的博客家园
03-22 2万+
一、缓冲区介绍 缓冲区是地理空间目标的一种影响范围或服务范围，是对选中的一组或一类地图要素（点、线或面）按设定的距离条件，围绕其要素而形成一定缓冲区多边形实体，从而实现数据在二维空间得以扩展的信息分析方法。缓冲区分析在农业、城市规划、生态保护等诸多领域都有应用。例如，在环境治理时，常在污染的河流周围划出一定宽度的范围表示受到污染的区域；又如交通基础设施建设时，可根据道路扩宽宽度对道路创建缓冲区，然后将缓冲区图层与建筑图层叠加，通过叠加分析查找落入缓冲区而需要被拆除的建筑等等。缓冲区主要分为以下几种形式：
缓冲区分析（weixin公众号【图说GIS】）
ONEGISER的博客
12-25 1582
关于缓冲区分析，请看如下文章 百度介绍： ArcGIS介绍 前言 需要给下面的图形外扩500m,我先想到的是缓冲区分析，经过QGIS和ArcGIS处理 ，发现图形变了，于是然我进入了误区，觉得这样解决不是正确的解决方案，后来验证，缓冲区完全能解决外扩的问题。将过程记录下。 QGIS缓冲区分析 ...
okhttp-2.5.0.jar和okio-1.6.0.jar
09-03
Okio的核心概念包括缓冲区（Buffer）、源（Source）和Sink（接收数据的通道）。1.6.0版本可能包含以下特性： 1. **快速缓冲**：Okio的Buffer对象允许高效地读写数据，减少了内存复制。 2. **磁盘和网络I/O的同步**...
commons-fileupload-1.2.1.jar和commons-io-1.3.2.jar程序文件
07-23
2. **流操作**：如读写输入/输出流，转换不同类型的流，以及缓冲流操作。 3. **文件过滤器**：可以用来筛选特定类型的文件，比如寻找所有.txt文件。 4. **字符集转换**：在处理文件内容时，可以方便地进行字符编码的...
flowplayer-3.2.8.
03-27
Flowplayer 3.2.8 是一款基于Adobe Flex技术构建的Web视频播放器。这款开源软件为网站提供了强大的视频播放功能，支持多种视频格式，并具备丰富的自定义选项和插件扩展能力，使得开发者能够轻松地在网页上实现高质量...
commons-io.jar和commons-fileupload.jar
04-28
2. **流操作**：提供各种类型的输入流和输出流的包装器，如BufferedInputStream和BufferedOutputStream，便于进行数据缓冲。 3. **文件过滤器**：可以基于文件名、大小、日期等属性创建自定义的文件过滤规则。 4. **...
ArcEngine+C#缓冲区分析(GP工具+ITopologicalOperator接口两种方法实现)
09-13
ArcEngine+C#缓冲区分析(GP工具+ITopologicalOperator接口两种方法实现) GP工具为打开窗口，ITopologicalOperator接口代码设置参数直接点击地图实现缓冲分析
缓冲区分析设计与实现
12-04
可对数据进行缓冲区分析处理，设置相应半径，查看区域范围内的结果
缓冲区分析实例代码解说
07-09
txt文档，对于初学者来说，讲解的比较详细。
缓冲区分析代码
05-03
web GIS开发 刘光 唐大仕 编著 缓冲区分析代码
JavaScript缓存区分析
12-14
本例结合了两个应用——通过缓冲区查询得到的结果去做缓冲区分析，再将缓冲区分析的结果在地图上显示出来。
ArcGis缓冲区分析
qq22692150的博客
04-01 2450
所以我的思路如下： 使用arcgis javascript api 的Draw工具( esri/toolbars/draw )，主要功能是绘制出点线面。 然后再计算绘制出来的图形，这里需要使用geometryEngine( esri/geometry/geometryEngine 3.13才添加的新工具 )，主要功能是计算对应的图形长度面积等。这里也可以使用arcgis server里面的服务来...
GIS之缓冲区分析、叠加分析
Learning_Well的博客
11-15 3668
叠加分析是在统一的空间参考系统下，通过对不同的数据进行一系列的集合运算，产生新数据的过程。叠加分析的目的是在空间位置上分析具有一定关联的空间对象的空间特征和专属属性之间的相互关系。缓冲区是为了识别某一地理实体对周围地物的影响而在其周围建立的一定宽度多边形区域。缓冲区分析是用来确定不同地理要素的空间邻近性或接近程度的一种分析方法。叠加分析可以分为擦除分析、相交分析、联合分析、标识分析、更新分析、交集取反和空间连接等七类。
ArcGIS对矢量数据进行缓冲区分析和叠加分析具体操作
Mluoo的博客
02-28 1万+
1、缓冲区分析技术缓冲区是地理空间，目标的一种影响范围或服务范围在尺度上的表现。它是一种因变量，由所研究的要素的形态而发生改变。从数学的角度来看，缓冲区是给定空间对象或集合后获得的它们的领域，而邻域的大小由邻域的半径或缓冲区建立条件来决定，因此对于一个给定的对象A，它的缓冲区可以定义为：（d一般是指欧式距离，也可以是其它的距离， r为邻域半径或缓冲区建立的条件）缓冲区建立的形态多种多样，这是根据缓冲区建立的条件来确定的，常用的对于点状要素有圆形，也有三角形、矩形和环形等；
缓冲区分析WGS84(4326) - 4.11.html
weixin_42193179的博客
05-29 772
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>缓冲区分析WGS84(4326) - 4.11</title> <link type="text/css" rel="stylesheet" href=...
Hadoop 2.9.0 MapReduce配置详解：mapred-default.xml与mapred-site.xml
5. **mapreduce.map.sort.spill.percent**：这是一个软限制，当序列化缓冲区达到这个百分比（默认为0.80或80%）时，后台线程将开始溢写内容到磁盘。即使已经有溢写正在进行，也不会阻塞收集，所以实际溢写的数据量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值