缓冲区分析WGS84(4326) - 4.11.html

最新推荐文章于 2022-12-07 18:00:17 发布
最新推荐文章于 2022-12-07 18:00:17 发布
阅读量768 收藏 1
点赞数 1
分类专栏： arcgis_js_api_demo4.11
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42193179/article/details/90673440
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>缓冲区分析WGS84(4326) - 4.11</title>

    <link type="text/css" rel="stylesheet"
          href="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/esri/css/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/core/urlUtils",
        "esri/layers/TileLayer",
        "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",
        "esri/tasks/GeometryService",
        "esri/tasks/support/DistanceParameters",
        "dojo/domReady!"
    ], function (
        urlUtils,
        TileLayer, Map, MapView,
        Draw, Graphic,
        Polyline, Polygon, Point, Circle, geometryEngine, GeometryService,
        DistanceParameters
    ) {
        let geometryService = new GeometryService({url: "http://60.28.130.106:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"});

        // urlUtils.addProxyRule({
        //     urlPrefix: "http://localhost:6080",  //配置文件proxy.config中的地址,要请求的地址
        //     proxyUrl: "http://localhost/DotNet/proxy.ashx"  //部署的代理文件地址
        // });
        // 上下两行代码都行。
        urlUtils.addProxyRule({
            urlPrefix: "http://60.28.130.106:6080",  //配置文件proxy.config中的地址,要请求的地址
            proxyUrl: "http://60.28.130.106:81/DotNet/proxy.ashx"  //部署的代理文件地址
        });
        let layer = new TileLayer({
            // url: "http://localhost:6080/arcgis/rest/services/MyMapService/MapServer"
            // 上下两行代码都行。
            url: "http://60.28.130.106:6080/arcgis/rest/services/DOM2017/MapServer"
        });
        let map = new Map({
            layers: [layer]
        });
        let view2d = new MapView({
            container: "viewDiv",
            map: map,
            center: [117.39037351789813, 38.952149801075095],
            zoom: 1  // 原始大小。
        });
        console.log("view2d:", view2d);

        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");  // 移除底部Powered by Esri
        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
            }
        };
        let draw;
        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(draw, view2d);
            };
            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 coordinates = event.coordinates;
            let graphic = new Graphic({
                geometry: {
                    type: "point", // autocasts as new Point()
                    x: coordinates[0],
                    y: 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(draw, view2d) {
            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
            });
            // 将绘制的图形添加到view
            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
            });
            view2d.graphics.add(graphic);
            if (event.type == "draw-complete") {
                console.log("vertices2:", vertices2);
                createBuffer(graphic.geometry);
            }
        }

        function enableCreateRectangle() {
            let drawAction = draw.create("rectangle", {
                mode: "click" //点击方式加点
            });
            //顶点移除事件
            drawAction.on(["vertex-remove", "cursor-update", "draw-complete"], createRectangle);
        }

        function createRectangle(event) {
            // 清除之前绘制
            view2d.graphics.removeAll();
            //获取所有顶点
            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]]
            ];
            // 生成绘制的图形
            let graphic = new Graphic({
                geometry: {
                    type: "polygon", // autocasts as new Polygon()
                    rings: rings,
                    spatialReference: view2d.spatialReference
                },
                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(graphic.geometry);
            }
        }

        function enableCreateCircle() {
            let 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;
            //少于一个点无法展示圆
            if (vertices.length < 2) {
                return
            }
            //生成绘制的图形,两点画圆
            let center = new Point({
                hasZ: false,
                hasM: false,
                x: vertices[0][0],
                y: vertices[0][1],
                spatialReference: view2d.spatialReference
            });

            view2d.graphics.add(new Graphic({
                geometry: {
                    type: "point", // autocasts as new Point()
                    x: vertices[0][0],
                    y: vertices[0][1],
                    spatialReference: view2d.spatialReference
                },
                symbol: simpleMarkerSymbol
            }));
            view2d.graphics.add(new Graphic({
                geometry: {
                    type: "point", // autocasts as new Point()
                    x: vertices[1][0],
                    y: vertices[1][1],
                    spatialReference: view2d.spatialReference
                },
                symbol: simpleMarkerSymbol
            }));
            // 构造“距离参数”。
            let distanceParameters = new DistanceParameters({
                distanceUnit: "meters",
                // geodesic若为真，则测量geometry1和geometry2之间的测地线距离。
                geodesic: true,
                geometry1: {
                    type: "point", // autocasts as new Point()
                    x: vertices[0][0],
                    y: vertices[0][1],
                    spatialReference: view2d.spatialReference
                },
                geometry2: {
                    type: "point", // autocasts as new Point()
                    x: vertices[1][0],
                    y: vertices[1][1],
                    spatialReference: view2d.spatialReference
                }
            });
            // 计算两点之间的距离。
            // 此函数适用于，测量几何之间的平面或测地线距离。
            geometryService.distance(distanceParameters).then(function (resolvedVal) {
                /*此函数用于，在承诺解析时调用。
                * resolvedVal，承诺解析到的值。*/
                console.log(resolvedVal);
                let circle = new Circle({
                    hasZ: false,
                    hasM: false,
                    center: center,
                    radius: resolvedVal,
                    // geodesic适用于中心点的空间参考值设置为Web Mercator(wkid: 3857)或geographic/geodesic (wkid: 4326)。
                    // 当使用以上任何一种空间引用时，将geodesic设为true，以尽量减少失真。其他坐标系不会产生测地线圆。
                    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 (error) {
                // This function is called when the promise is rejected
                console.error(error);  // Logs the error message
            });
        }

        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
                })
            );
        }
    })
</script>
</body>
</html>
学无止境慢慢来
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
GIS基础学习-2
bguihiub的博客
02-01 945
gis基础知识
如何实现wgs84(ep4326)坐标系与百度坐标系，火星坐标系的互转，java与JavaScript都有
weixin_42759398的博客
04-03 987
国家规定：国内出版的各种地图系统(包括电子形式)，必须至少采用GCJ-02对地理位置进行首次加密(高德地图、腾讯地图等)；工作中用到百度地图和高德地图服务，必须实现转换就成了难题了，现在它来了，java后台和纯js方法都有，直接上代码。众所周知国内的地址服务不让直接用wgs84，百度使用的是百度坐标系，高德地图使用的是火星坐标系。国际地图提供商使用的坐标系(谷歌地图国外、osm、mapbox)。百度标准，百度 SDK，百度地图，百度GeoCoding 使用；2.国测局坐标系(GCJ-02、火星坐标系)
GIS坐标系：epsg 3857 vs 4326
qq_32649321的博客
05-30 1万+
1.EPSG:4326（WGS84）-地理坐标 EPSG4326是基于WGS84椭球的经纬度坐标系。 EPSG4326 is in degrees - 3D sphere，单位是度。 EPSG4326表示方法： EPSG4326使用参考球面或椭球面上的坐标系统。 特点：利于存储，可读性高。缺点：会导致页面变形。 2.EPSG:3857（WGS84 Web Mercator）-投影坐标 EPSG3857是基于球体的、web墨卡托投影（伪墨卡托投影）的投影坐标系。 在openlayer
GIS基础知识 - 坐标系、投影、EPSG:4326、EPSG:3857
whl0071的专栏
12-07 4973
GIS基础知识 - 坐标系、投影、EPSG:4326、EPSG:3857
一、坐标系之WGS84坐标系与WGS84 Web Mercator
热门推荐
zhoulong_giser
05-04 1万+
WGS84坐标系： WGS84是地心坐标系，空间直角坐标系，原点与地球质心重合，为GPS采用的坐标系；通过GPS可以直接获取WGS84下的坐标(B，L，H)，B为纬度，L为经度，H为大地高即到WGS84椭 球面的高度； WKID: 4326 GCS_WGS_1984 WGS84 Web Mercator坐标系： Web Mercator 是一个投影坐标系统，其基准面是...
wgs84-中国香港.zip
12-28
EPSG（欧洲石油勘探和生产技术组）是一个编码系统，用于识别不同的地理坐标系统，4326是WGS84在EPSG系统中的代码。此外，描述中还提醒用户，该压缩包只包含香港地图，若需其他地区资源，需参考提供的博客链接。 ...
33-全国分省微博签到数据2019年10月wgs84坐标系-澳门.zip
03-31
这个数据集可能包含各省份（包括澳门特别行政区）的微博用户在特定地理位置签到的信息，且这些地理位置信息是基于WGS84坐标系进行记录的。 WGS84（World Geodetic System 1984）是全球广泛采用的地理坐标系统，用于...
wgs84-中国澳门.zip
12-28
WGS84是一个国际标准的地球坐标系统，用于全球定位和导航，其坐标系代码为EPSG:4326。描述中提到，此压缩包中的数据可能特别关注澳门地区的精确轮廓和边界。 标签 "GIS" 暗示这些数据与地理信息系统（Geographic ...
wgs84-中国台湾.zip
12-28
EPSG:4326是WGS84在地理信息系统中的标准编码，它定义了地球表面的位置以经度和纬度表示，使得不同系统之间可以进行数据交换和匹配。 压缩包中的文件名表明它们是不同级别的行政区域数据，包括省级（adm0）、市级...
北京及周边手机信令数据-wgs84坐标系-29.csv.rar
最新发布
07-06
北京市及其周边地市手机信令数据，经纬度为wgs84坐标系，csv格式。时间为2022年3月
国家基础地理信息数据-WGS84投影
09-21
100万DEM 一级河流 主要公路 主要铁路 二级河流 五级河流 县级居民地 县级行政界线 四级河流 国界 国界与省界 地市级以上居民地 地级行政界限 首都和省级行政中心
WGS84转墨卡托坐标
03-10
WGA84经纬度坐标系转换围墨卡托投影坐标代码
墨卡托投影（102100）与地理坐标系（4326）互转工具javascript版本
07-29
墨卡托投影（102100）与地理坐标系（4326）互转工具javascript版本
WGS84计算两点经纬度距离
05-14
WGS84 计算两点经纬度距离的程序，欢迎下载
缓冲区分析实例代码解说
07-09
txt文档，对于初学者来说，讲解的比较详细。
3857墨卡托坐标系转换为4326 (WGS84)经纬度坐标
WangYan的博客
07-05 5608
地图经纬度坐标转换
常用GIS坐标系 EPSG:4326转EPSG:4979(地理坐标系统WGS84转地心坐标系ECEF）
whl0071的专栏
08-01 2189
常用GIS坐标系 EPSG:4326转EPSG:4979(地理坐标系统WGS84转地心坐标系ECEF）
地理坐标系、投影坐标系及对应WKIDW在生成缓冲区时的应用
仙羽刺的博客
05-12 2477
首先，说一下问题，之前在利用ST_Buffer（上篇博客有说到）做缓冲区生成时，是在地理坐标系的基础上进行生成的，因此会出现生成的半径跟真实半径不匹配的情况甚至相差一千倍以上，并且在生成shp文件后，加载到arcgis时会出现与影像图不匹配，需要根据以下步骤对其进行坐标系转换。  生成的缓冲区shp文件在arcgis中加载时，与影像图坐标不匹配时： 解决方法：对矢量数据加载投影参照坐标系：
WGS84、GCJ02、BD09、WGS1984、EPSG4326坐标相互转换
qq_35035975的博客
09-23 4096
安装gcoord npm install gcoord --save 引入gcoord，transform, BD09, WGS84 import gcoord from 'gcoord' import { transform, BD09, WGS84 } from 'gcoord' 调用 methods:{ //WGS84转百度坐标 transformation(latitude,longitude){ if(latitude .
WGS-84坐标108.8935433,34.37020967转换百度地图坐标
05-18
WGS-84坐标系的经度是108.8935433，纬度是34.37020967。 将WGS-84坐标转换为百度地图坐标，可以使用百度地图开放平台提供的API进行转换。 以下是使用Python代码将WGS-84坐标转换为百度地图坐标的示例： ```python import requests # 输入WGS-84坐标 lng, lat = 108.8935433, 34.37020967 # 构造请求URL url = f'http://api.map.baidu.com/geoconv/v1/?coords={lng},{lat}&from=1&to=5&ak=你的AK密钥' # 发送请求 response = requests.get(url) # 解析响应数据 result = response.json() if result['status'] == 0: # 提取转换后的百度地图坐标 bd_lng, bd_lat = result['result'][0]['x'], result['result'][0]['y'] print(f'转换后的百度地图坐标：{bd_lng},{bd_lat}') else: print(f'转换失败，错误信息：{result["message"]}') ``` 其中，需要将代码中的`你的AK密钥`替换为你在百度地图开放平台申请的AK密钥。 执行以上代码，即可将WGS-84坐标系的经度和纬度转换为百度地图坐标系的经度和纬度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值