arcgis for js 添加点、添加圆、添加面、添加线

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaoxiang66/article/details/80619916

上一节已经加载了我们的处女作,上一次的实验用的人家线上的图,所以必须要联网才可以出来,如果用自己发布的服务的话,那就需要这个东西了,就是ArcGISDynamicMapServiceLayer

map = new Map("map",{logo:false});
var tiled = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer");
map.addLayer(tiled, 0);

这样就可以用自己发布的服务了,下面进入正题,

先加载地图,然后搞四个按钮,然后绑定事件,ok,完事,你会说,你逗我呢,代码呢,别急,马上就上。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo07</title>
    <link rel="stylesheet" type="text/css" href="./arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="./arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
</head>
<body>
    <div id="mapDiv" style="width:100%; height:600px; border:1px solid #000;"></div>
    <button>添加点</button>
    <button>添加线</button>
    <button>添加面</button>
    <button>添加圆</button>
    <script type="text/javascript" src="./arcgis_js_api/library/3.17/3.17/init.js"></script>
    <script>
        require([
            "esri/map",
            "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,GraphicsLayer,on,query,Color,Graphic,SimpleMarkerSymbol,SimpleLineSymbol,SimpleFillSymbol,Point,Polyline,Polygon,Circle){
            var map = new Map("mapDiv",{
                logo:false,
                basemap:"streets"
            })
            //创建客户端图层
            var graphicsLayer=new GraphicsLayer();
            //将客户端图层添加到地图中
            map.addLayer(graphicsLayer);
            //通过query查询到button对象
            var btns=query("button");

            on(btns,"click",function(event){
                //获得按钮的文本
                var text=this.innerHTML;
                console.log(text);
                //定义线符号
                var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
                //定义点符号
                var pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,20, 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;
                }
                //将图形添加到图层中
                console.log(graphic)
                graphicsLayer.add(graphic);
            })
        })
    </script>
</body>
</html>

大体的代码就是这个样子

            "esri/views/MapView",
            "esri/layers/GraphicsLayer",//客户端图层类
            "dojo/on",//用于绑定事件的模块
            "dojo/query",//dojo选择器,用于选择dom元素
            "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!"

感兴趣的朋友可以自己试一试

展开阅读全文

没有更多推荐了,返回首页