ArcGIS API for JS生成格网（格网的生成是根据原点坐标，像元大小，起始行，起始列，结束行，结束列，间隔标注生成的）

最新推荐文章于 2022-03-29 17:02:34 发布
原创最新推荐文章于 2022-03-29 17:02:34 发布 · 1.3k 阅读
4 ·
CC 4.0 BY-SA版权
ArcGIS JavaScript API随笔专栏收录该内容
5 篇文章
订阅专栏
本文介绍如何使用 ArcGIS JavaScript API 实现格网的绘制，并展示了一个具体的应用实例，包括设置地图、添加图层和服务、定义坐标轴、绘制网格线以及添加文字标注等功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.20/3.20/init.js"></script>
    <style>
        #myMapDiv{
            height: 500px;
            width: 800px;
            border: 1px solid black;
        }
    </style>
    <script>
            require(["dojo/dom","esri/symbols/SimpleMarkerSymbol","esri/symbols/Font", "esri/symbols/TextSymbol","esri/layers/GraphicsLayer","esri/graphic","esri/map","esri/layers/ArcGISDynamicMapServiceLayer","esri/geometry/Polyline","esri/symbols/SimpleLineSymbol","dojo/colors","esri/geometry/Point","dojo/domReady!"],
            function (dom,SimpleMarkerSymbol,Font,TextSymbol,GraphicsLayer,Graphic,Map,ArcGISDynamicMapServiceLayer,Polyline,SimpleLineSymbol,Color,Point) {
            var map=new Map("myMapDiv");
            var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/服务/test/MapServer");
            map.addLayer(layer);
            map.centerAt([0,0]);
                var oOriginX=dom.byId("originX");  //获取原点X坐标
                var oOriginY=dom.byId("originY");  //获取原点Y坐标
                var oPixelSize=dom.byId("pixelSize"); //获取像元大小
                var oStartRow=dom.byId("startRow"); //获取起始行号
                var oEndRow=dom.byId("endRow");    //获取结束行号
                var oStartColumn=dom.byId("startColumn");//获取起始列号
                var oEndColumn=dom.byId("endColumn");  //获取结束列号
                var oLable=dom.byId("lable");     //获取间隔标注
                var oDetermine=dom.byId("determine"); //获取确定按钮

            function changePoint(x,y) {   //生成点函数
                var p=new Point({
                    "x":x,
                    "y":y,
                    "spatialReference": {"wkid": 102100}
                });
                return p;
            };
                var axisContentGraphicLayer=new GraphicsLayer();//定义一个存放坐标轴及标注的全局变量
                var grideGraphicLayer=new GraphicsLayer();   //定义一个存放格网的全局变量
                oDetermine.onclick=function () {   //点击确定事件
                    var oOriginRow=parseFloat(oOriginY.value)/parseFloat(oPixelSize.value); //原点的行号
                    var oOriginColumn=parseFloat(oOriginX.value)/parseFloat(oPixelSize.value);//原点的列号
                    var V1=0;   //在绘制格网的的时候，让最下面的横线一个一个单位的向上移动，V1起一个标识作用，为什么不用i，因为i可能为负值
                    var oReallyStartRow=parseInt(oStartRow.value)+oOriginRow;//相对于原点的起始行号
                    var oReallyEndRow=parseInt(oEndRow.value)+oOriginRow; //相对于原点的结束行号
                    var oReallyStartColumn=parseInt(oStartColumn.value)+oOriginColumn;//相对于原点的起始列号
                    var oReallyEndColumn=parseInt(oEndColumn.value)+oOriginColumn;//相对于原点的结束列号

                    grideGraphicLayer.clear();//绘制格网之前，先把上次的grideGraphicLayer给clear了
                    for(var i=parseInt(oStartRow.value);i<parseInt(oEndRow.value)+1;i++)  //将横轴线一条条向上移动函数,之前写的是i=oReallyStartRow,i<oReallyEndRow这个时候不能用相对位置了，因为这个相对位置是对线的坐标而言，而这个延长线的位置必须用绝对位置
                    {
                        var textFont=new Font('15px').setWeight(Font.WEIGHT_BOLD);//横轴标注字体
                        var textSymbol=new TextSymbol(i,textFont,new Color([0,0,0]));//横轴标注样式
                        textSymbol.setOffset(20,0);  //横轴标注偏移量
                        var k=0;         //定义一个k，是为了找到需要延长的线，让它的末点坐标+i*k，当然，如果不符合条件，那么k=0，相当于没加
                        if((i!=oOriginRow)&&(i%parseInt(oLable.value)==0))//延长线的符号条件
                        {
                            k=1; //符合条件后，将k=1
                            var graphicLable=new Graphic(changePoint(oReallyEndColumn*parseFloat(oPixelSize.value)+k*parseFloat(oPixelSize.value)*3,oReallyStartRow*parseFloat(oPixelSize.value)+parseFloat(oPixelSize.value)*V1),textSymbol);//这个graphic的geometry为延长线的末点坐标，symbol为文本标注
                            grideGraphicLayer.add(graphicLable);  //将X轴的标注graphic加到grideGraphicLayer里
                        }
                        var p1=changePoint(oReallyStartColumn*parseFloat(oPixelSize.value),oReallyStartRow*parseFloat(oPixelSize.value)+parseFloat(oPixelSize.value)*V1);//格网左下角的点
                        var p2=changePoint(oReallyEndColumn*parseFloat(oPixelSize.value)+k*parseFloat(oPixelSize.value)*3,oReallyStartRow*parseFloat(oPixelSize.value)+parseFloat(oPixelSize.value)*V1);//格网右下角的点
                        var line=new Polyline({"wkid":102100});//定义横轴的线，注意这个{"wkid":102100}很重要，不能使用map.spatialReference,要使用自己发布地图的坐标系编码
                        line.addPath([p1,p2]);  //将上面两点加进去
                        var linesymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),1);
                        var graphicLine=new Graphic(line,linesymbol);
                        grideGraphicLayer.add(graphicLine);
                        V1++;  //为了使横轴能够向上移动，V1每次需要+1
                    }
                    var V2=0;    //这个是纵轴的向右移动标识，和V1同理
                    for(var i=parseInt(oStartColumn.value);i<parseInt(oEndColumn.value)+1;i++) //对纵轴进行平移，与上面的同理
                    {
                        var textFont=new Font('15px').setWeight(Font.WEIGHT_BOLD);
                        var textSymbol=new TextSymbol(i,textFont,new Color([0,0,0]));
                        textSymbol.setOffset(0,20);
                        var k=0;
                        if((i!=oOriginColumn)&&(i%parseInt(oLable.value)==0))
                        {
                            k=1;
                            var graphicLable=new Graphic(changePoint(oReallyStartColumn*parseFloat(oPixelSize.value)+parseFloat(oPixelSize.value)*V2,oReallyEndRow*parseFloat(oPixelSize.value)+k*parseFloat(oPixelSize.value)*3),textSymbol);
                            grideGraphicLayer.add(graphicLable);  //将Y轴的标注graphic加到grideGraphicLayer里

                        }
                        var p1=changePoint(oReallyStartColumn*parseFloat(oPixelSize.value)+parseFloat(oPixelSize.value)*V2,oReallyStartRow*parseFloat(oPixelSize.value));//格网左下角的点
                        var p2=changePoint(oReallyStartColumn*parseFloat(oPixelSize.value)+parseFloat(oPixelSize.value)*V2,oReallyEndRow*parseFloat(oPixelSize.value)+k*parseFloat(oPixelSize.value)*3);//格网左上角的点
                        var line=new Polyline({"wkid":102100});
                        line.addPath([p1,p2]);
                        var linesymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),1);
                        var graphicLine=new Graphic(line,linesymbol);
                        grideGraphicLayer.add(graphicLine);
                          V2++;
                    }
                    var oLinesymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),1);
                    var oMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, oLinesymbol, new Color([0, 255, 0]));
                    var oPt=changePoint(parseFloat(oOriginX.value),parseFloat(oOriginY.value));//为了将原点突出
                    var oGrideGraphic=new Graphic(oPt,oMarkerSymbol);
                    grideGraphicLayer.add(oGrideGraphic);
                    map.addLayer(grideGraphicLayer);

                    //坐标轴，原点及其标注的一些定义
                    var oo=changePoint(parseFloat(oOriginX.value),parseFloat(oOriginY.value));  //定义坐标原点
                    var oX=changePoint(oReallyEndColumn*parseFloat(oPixelSize.value)+parseFloat(oPixelSize.value)*5,parseFloat(oOriginY.value));//X轴右边末点，+parseFloat(oPixelSize.value)*5是为了坐标轴更长
                    var oX1=changePoint(oReallyStartColumn*parseFloat(oPixelSize.value)-parseFloat(oPixelSize.value)*5,parseFloat(oOriginY.value));//X轴左边末点
                    var oY=changePoint(parseFloat(oOriginX.value),oReallyEndRow*parseFloat(oPixelSize.value)+parseFloat(oPixelSize.value)*5);  //Y轴上边末点
                    var oY1=changePoint(parseFloat(oOriginX.value),oReallyStartRow*parseFloat(oPixelSize.value)-parseFloat(oPixelSize.value)*5);//Y轴下变末点
                    var X1=changePoint(oReallyEndColumn*parseFloat(oPixelSize.value)+parseFloat(oPixelSize.value)*4,parseFloat(oOriginY.value)-parseFloat(oPixelSize.value)/2);//定义X轴的箭头
                    var X2=changePoint(oReallyEndColumn*parseFloat(oPixelSize.value)+parseFloat(oPixelSize.value)*4,parseFloat(oOriginY.value)+parseFloat(oPixelSize.value)/2);//定义X轴的箭头
                    var Y1=changePoint(parseFloat(oOriginX.value)-parseFloat(oPixelSize.value)/2,oReallyEndRow*parseFloat(oPixelSize.value)+parseFloat(oPixelSize.value)*4);//定义Y轴的箭头
                    var Y2=changePoint(parseFloat(oOriginX.value)+parseFloat(oPixelSize.value)/2,oReallyEndRow*parseFloat(oPixelSize.value)+parseFloat(oPixelSize.value)*4);//定义Y轴的箭头
                    var textFont1=new Font('18px').setWeight(Font.WEIGHT_BOLD);  //定义坐标轴和原点的文本样式
                    var textSymbol1=new TextSymbol("原点",textFont1,new Color([0,0,0]));//定义原点标注内容
                    textSymbol1.setOffset(0,-20);       //定义原点标注偏移距离
                    var textSymbol2=new TextSymbol("X轴",textFont1,new Color([0,0,0]));//定义X轴标注内容
                    textSymbol2.setOffset(0,-20);      //定义X轴标注偏移距离
                    var textSymbol3=new TextSymbol("Y轴",textFont1,new Color([0,0,0]));//定义Y轴标注内容
                    textSymbol3.setOffset(-20,0);   //定义Y轴标注偏移距离
                    var axis=new Polyline({"wkid":102100}); // 定义坐标轴的线
                   // axis.addPath([oX1,oX]);  //这个时候为啥不直接将坐标轴的两个端点直接相连呢，是因为坐标轴的长度是根据格网的位置和格网的大小算出来的，如果客户定义一个距离坐标轴很远的格网，那么将出现坐标轴不能与原点相连的现象
                   // axis.addPath([oY1,oY]);
                    axis.addPath([oo,oX]);    //原点与X轴右边连接
                    axis.addPath([oo,oX1]);   //原点与X轴左边连接
                    axis.addPath([oo,oY]);    //原点与Y轴右边连接
                    axis.addPath([oo,oY1]);    //原点与Y轴左边连接
                    axis.addPath([X1,oX]);   //添加X轴的箭头
                    axis.addPath([oX,X2]);   //添加X轴的箭头
                    axis.addPath([Y1,oY]);   //添加Y轴的箭头
                    axis.addPath([oY,Y2]);    //添加Y轴的箭头
                    var lineSymbol1=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([0,0,0]),2);//定义线样式
                    var graphic1=new Graphic(axis,lineSymbol1); //这个graphic包含了坐标轴及箭头
                    var graphic2=new Graphic(oo,textSymbol1);   //这个graphic是原点的标注
                    var graphic3=new Graphic(oX,textSymbol2);   //这个graphic是X轴的标注
                    var graphic4=new Graphic(oY,textSymbol3);   //这个graphic是Y轴的标注
                    axisContentGraphicLayer.clear();  //在绘制坐标轴之前，先把上次的给clear了
                    axisContentGraphicLayer.add(graphic1);
                    axisContentGraphicLayer.add(graphic2);
                    axisContentGraphicLayer.add(graphic3);
                    axisContentGraphicLayer.add(graphic4);
                    map.addLayer(axisContentGraphicLayer);//将axisContentGraphicLayer添加到地图中
                }

        })
    </script>
</head>
<body>
<div id="myMapDiv"></div>
<span>输入X坐标:</span><input type="text" id="originX">
<span>输入Y坐标:</span><input type="text" id="originY"><br>
<span>输入像元大小:</span><input type="text" id="pixelSize"><span>米</span><br>
<span>输入起始行:</span><input type="text" id="startRow">
<span>输入结束行:</span><input type="text" id="endRow"><br>
<span>输入起始列:</span><input type="text" id="startColumn">
<span>输入结束列:</span><input type="text" id="endColumn"><br>
<span>输入标注间隔:</span><input type="text" id="lable">
<input type="button" id="determine" value="确定">
</body>
</html>