基础功能---具体坐标生成Graphic

最新推荐文章于 2023-08-09 15:24:49 发布

Devin·Finn

最新推荐文章于 2023-08-09 15:24:49 发布

阅读量1k

点赞数

分类专栏： WebGIS - ArcGIS API For Js

本文链接：https://blog.csdn.net/DanBo_C/article/details/99109024

版权

WebGIS - ArcGIS API For Js 专栏收录该内容

53 篇文章 18 订阅

订阅专栏

1.图层分析

共两层

底图（动态图层）
客户端图层（添加指定坐标的点线面）

2. 步骤

通过switch选择定义对应的geometry
根据坐标创建Graphic graphic=new Graphic(geometry, xxx );
把图形加载到图层中 graphicsLayer.add(graphic);

3.贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Graphic</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"/>
    <script  type="text/Javascript" src="https://js.arcgis.com/3.28/"></script>
    <style>
        .MapClass{
            width:100%;
            height:500px;
            border:1px solid #000;
        }
    </style>
    <script>
        require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/GraphicsLayer",
            "dojo/on","dojo/query","dojo/colors",
            "esri/graphic","esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/geometry/Point",
            "esri/geometry/Polyline","esri/geometry/Polygon",
            "esri/geometry/Circle",
            "dojo/domReady!"],
                function(Map,ArcGISDynamicMapServiceLayer,
                         GraphicsLayer,on,query,Color,Graphic,
                         SimpleMarkerSymbol,SimpleLineSymbol,
                         SimpleFillSymbol,Point,Polyline,Polygon,Circle){
            var map = new Map("mapDiv");
            var layer = new ArcGISDynamicMapServiceLayer
            ("http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer");
            map.addLayer(layer);


            //创建客户端图层
            var graphicsLayer=new GraphicsLayer();
            //将客户端图层添加到地图中
            map.addLayer(graphicsLayer);


            //通过query查询到button对象
            var btns=query("button");

            on(btns,"click",function(event){
                var text=this.innerHTML;
                //定义符号
                var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
                var pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new Color([255, 0, 0]));
                var fill=SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,  new Color([255, 0, 0]));
                //声明类型和图形
                var geometry;
                var graphic;
                //根据文本定义相应的geometry
                switch(text)
                {
                    case "添加点":
                        geometry=new Point({
                            "x":510706,
                            "y":3986100,
                            "spatialReference":map.spatialReference
                        });
                        graphic=new Graphic(geometry,pSymbol);
                        break;
                    case "添加线":
                        //点的坐标对
                         var  paths=[];
                         paths[0]=[
                            [510326,3985702],
                            [510994, 3985676],
                            [511078, 3985903],
                            [510433, 3985928]
                        ];
                        geometry=new Polyline({
                            "paths":paths,
                            "spatialReference":map.spatialReference
                        })
                        graphic=new Graphic(geometry,lineSymbol);
                        break;
                    case "添加面":
                        //点的坐标对
                        var ring=[];
                        ring[0]=[
                            [510275, 3986100],
                            [510508, 3986162],
                            [510596, 3986032],
                            [510271, 3985847],
                            [510275, 3986100]
                        ];
                        geometry=new Polygon({
                            "rings":ring,
                            "spatialReference":map.spatialReference
                        });
                        graphic=new Graphic(geometry,fill);
                        break;
                    case "添加圆":
                        //圆心
                        var p=new Point({
                            "x":510706,
                            "y":3986100,
                            "spatialReference":map.spatialReference
                        });
                        //半径
                        var r=20;
                        geometry=new Circle(p,{
                            "radius":r
                        });
                        graphic=new Graphic(geometry,fill);
                        break;
                }
                //将图形添加到图层中
                graphicsLayer.add(graphic);
            })
        })
    </script>
</head>
<body>
    <div id="mapDiv" class="MapClass"></div>
    <button>添加点</button>
    <button>添加线</button>
    <button>添加面</button>
    <button>添加圆</button>
</body>
</html>

Devin·Finn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
基础功能---具体坐标生成Graphic

1.图层分析共两层底图（动态图层）客户端图层（添加指定坐标的点线面）2. 步骤通过switch选择定义对应的geometry根据坐标创建Graphic graphic=new Graphic(geometry, xxx );把图形加载到图层中 graphicsLayer.add(graphic);3.贴代码<!DOCTYPE html><html la...
复制链接

扫一扫