<!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"); //Get the origin X coordinate
var oOriginY=dom.byId("originY"); //Get the origin Y coordinate
var oPixelSize=dom.byId("pixelSize"); //Get the pixel size
var oStartRow=dom.byId("startRow"); //Get the starting row number
var oEndRow=dom.byId("endRow"); //Get the end row number
var oStartColumn=dom.byId("startColumn");//Get the starting column number
var oEndColumn=dom.byId("endColumn"); //Get the end column number
var oLable=dom.byId("lable"); //Get interval label
var oDetermine=dom.byId("determine"); //Get the OK button
function changePoint(x,y) { //Generate point function
var p=new Point({
"x":x,
"y":y,
"spatialReference": {"wkid": 102100}
});
return p;
};
var axisContentGraphicLayer=new GraphicsLayer();//Define a global variable to store the coordinate axis and label
var grideGraphicLayer=new GraphicsLayer(); //Define a global variable to store the grid
oDetermine.onclick=function () { //Click OK event
var oOriginRow=parseFloat(oOriginY.value)/parseFloat(oPixelSize.value); //The row number of the origin
var oOriginColumn=parseFloat(oOriginX.value)/parseFloat(oPixelSize.value);//Column number of the origin
var V1=0; //When drawing the grid, let the bottom horizontal line move up one unit by one, V1 plays a role as a sign, why not use i, because i may be a negative value
var oReallyStartRow=parseInt(oStartRow.value)+oOriginRow;//The starting row number relative to the origin
var oReallyEndRow=parseInt(oEndRow.value)+oOriginRow; //End row number relative to the origin
var oReallyStartColumn=parseInt(oStartColumn.value)+oOriginColumn;//The starting column number relative to the origin
var oReallyEndColumn=parseInt(oEndColumn.value)+oOriginColumn;//End column number relative to the origin
grideGraphicLayer.clear();//Before drawing the grid, clear the last gridGraphicLayer
for(var i=parseInt(oStartRow.value);i<parseInt(oEndRow.value)+1;i++) //The function to move the horizontal axis up one by one, i=oReallyStartRow was written before, i<oReallyEndRow cannot be done at this time Use the relative position, because the relative position is the coordinates of the line, and the position of the extension line must use the absolute position
{
var textFont=new Font('15px').setWeight(Font.WEIGHT_BOLD);//The horizontal axis label font
var textSymbol=new TextSymbol(i,textFont,new Color([0,0,0]));//The horizontal axis label style
textSymbol.setOffset(20,0); //The horizontal axis marks the offset
var k=0; //Define a k to find the line that needs to be extended, let its end point coordinate +i*k, of course, if it does not meet the conditions, then k=0, which is equivalent to not adding
if((i!=oOriginRow)&&(i%parseInt(oLable.value)==0))//Symbol condition of extension line
{
k=1; //After meeting the conditions, set 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); //The geometry of this graphic is the coordinates of the end point of the extension line, and the symbol is the text label
grideGraphicLayer.add(graphicLable); //Add the X-axis label graphic to gridGraphicLayer
}
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});//Define the line of the horizontal axis, note that this {"wkid":102100} is very important, you cannot use map.spatialReference, you must use the coordinate system code of your own published map
line.addPath([p1,p2]); //Add the above two points
var linesymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),1);
var graphicLine=new Graphic(line,linesymbol);
grideGraphicLayer.add(graphicLine);
V1++; //In order to make the horizontal axis move up, V1 needs +1 each time
}
var V2=0; //This is the rightward movement mark of the vertical axis, the same as V1
for(var i=parseInt(oStartColumn.value);i<parseInt(oEndColumn.value)+1;i++) //Translate the vertical axis, the same as the above
{
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); //Add the Y-axis label graphic to gridGraphicLayer
}
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));//In order to highlight the origin
var oGrideGraphic = new Graphic (oPt, oMarkerSymbol);
grideGraphicLayer.add(oGrideGraphic);
map.addLayer(grideGraphicLayer);
//Some definitions of coordinate axes, origin and their labels
var oo=changePoint(parseFloat(oOriginX.value),parseFloat(oOriginY.value)); //Define the origin of coordinates
var oX=changePoint(oReallyEndColumn*parseFloat(oPixelSize.value)+parseFloat(oPixelSize.value)*5,parseFloat(oOriginY.value));//The end point on the right side of the X axis, +parseFloat(oPixelSize.value)*5 is for longer axis
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); //Define the text style of the axis and origin
var textSymbol1=new TextSymbol("Origin",textFont1,new Color([0,0,0]));//Define the content of the origin label
textSymbol1.setOffset(0,-20); //Define the origin label offset distance
var textSymbol2=new TextSymbol("X-axis",textFont1,new Color([0,0,0]));//Define the content of the X-axis label
textSymbol2.setOffset(0,-20); //Define the X-axis label offset distance
var textSymbol3=new TextSymbol("Y-axis",textFont1,new Color([0,0,0]));//Define the content of the Y-axis label
textSymbol3.setOffset(-20,0); //Define the Y-axis label offset distance
var axis=new Polyline({"wkid":102100}); // define the line of the coordinate axis
// axis.addPath([oX1,oX]); //Why not directly connect the two endpoints of the coordinate axis at this time, because the length of the coordinate axis is calculated according to the position of the grid and the size of the grid Out, if the customer defines a grid that is far away from the coordinate axis, the phenomenon that the coordinate axis cannot be connected to the origin will occur.
// axis.addPath([oY1,oY]);
axis.addPath([oo,oX]); //The origin is connected to the right side of the X axis
axis.addPath([oo,oX1]); //The origin is connected to the left side of the X axis
axis.addPath([oo,oY]); //The origin is connected to the right side of the Y axis
axis.addPath([oo,oY1]); //The origin is connected to the left side of the Y axis
axis.addPath([X1,oX]); //Add X-axis arrow
axis.addPath([oX,X2]); //Add X-axis arrow
axis.addPath([Y1,oY]); //Add Y-axis arrow
axis.addPath([oY,Y2]); //Add Y-axis arrow
var lineSymbol1=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([0,0,0]),2);//Define the line style
var graphic1=new Graphic(axis,lineSymbol1); //This graphic contains axes and arrows
var graphic2=new Graphic(oo,textSymbol1); //This graphic is the label of the origin
var graphic3=new Graphic(oX,textSymbol2); //This graphic is the label of the X axis
var graphic4=new Graphic(oY,textSymbol3); //This graphic is the label of the Y axis
axisContentGraphicLayer.clear(); //Before drawing the axis, clear the last one
axisContentGraphicLayer.add(graphic1);
axisContentGraphicLayer.add(graphic2);
axisContentGraphicLayer.add(graphic3);
axisContentGraphicLayer.add(graphic4);
map.addLayer(axisContentGraphicLayer);//Add axisContentGraphicLayer to the map
}
})
</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>Input start row:</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>Enter label interval:</span><input type="text" id="lable">
<input type="button" id="determine" value="确定">
</body>
</html>
