zoukankan      html  css  js  c++  java
  • 37 4.11APIgeometry与JSON互转

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>geometry to JSON & JSON to geometry</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>
    
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                 100%;
            }
        </style>
        <script>
            require([
                "esri/widgets/Sketch",
                "esri/Map",
                "esri/layers/GraphicsLayer",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/geometry/Polygon"
            ], function (Sketch, Map, GraphicsLayer, MapView, Graphic, Polygon) {
                const layer = new GraphicsLayer();
    
                const map = new Map({
                    basemap: "osm",
                    layers: [layer]
                });
    
                const view = new MapView({
                    container: "viewDiv",
                    map: map,
                    zoom: 5,
                    center: [90, 45]
                });
    
                const sketch = new Sketch({
                    layer: layer,
                    view: view
                });
    
                view.ui.add(sketch, "top-right");
    
                sketch.on("create", function (evt) {
                    if (evt.state == "complete" && evt.graphic.geometry.type == "polygon") {
                        var jsons = {};//新建一个对象
                        jsons = evt.graphic.geometry.toJSON();
                        console.log(jsons);
                        var a = JSON.stringify(jsons);//a为转换后的json
                        console.log(a);
                    }
                });
    
    
                var newRings = {
                    type: "polygon",
                    "spatialReference":
                    {
                        "latestWkid": 3857,
                        "wkid": 102100
                    },
                    "rings": [[[8154913.67368921, 7162491.976420692],
                    [10067673.869496953, 3928899.9318454554],
                    [7822259.726592211, 4369177.214767953],
                    [8154913.67368921, 7162491.976420692]]]
                };
    
    
                var fillSymbol = {
                    type: "simple-fill",
                    color: [227, 139, 79, 0.8],
                    outline: {
                        color: [255, 255, 255],
                         1
                    }
                };
    
    
                var po = Polygon.fromJSON(newRings);
                var polygonGraphic = new Graphic({
                    geometry: po,
                    symbol: fillSymbol
                });
                view.graphics.add(polygonGraphic);
            });
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>
    

      

  • 相关阅读:
    多维数组和元组
    字符串
    列表
    JQuery事件的绑定
    JQuery设置缓慢下拉大行多次执行的解决办法,以及stop()函数的简单理解
    JQuery_AJAX简单笔记
    C#后台验证身份证号码的一个方法
    JQuery AJAX请求aspx后台方法
    网络编辑器插件ckeditor+ckfinder配置
    请编程实现:产生一个int数组,长度为100,并向其中随机插入1-100,并且不能重复(百度了一下,get一种高性能算法,非递归)
  • 原文地址:https://www.cnblogs.com/gistrd/p/10916830.html
Copyright © 2011-2022 走看看