ArcGIS API for JavaScript学习记录

最新推荐文章于 2024-05-31 11:18:18 发布

CheryW

最新推荐文章于 2024-05-31 11:18:18 发布

阅读量329

点赞数

分类专栏： GIS 前端文章标签： arcgis javascript 学习

本文链接：https://blog.csdn.net/CheryW/article/details/128256817

版权

GIS 同时被 2 个专栏收录

16 篇文章 9 订阅

订阅专栏

前端

11 篇文章 0 订阅

订阅专栏

一、添加图形

主要是通过指定坐标值来添加图形到地图上。所有的图形要素全部都继承于esri/geometry/Geometry类，绘制的图形需要添加到GraphicsLayer图层上。

GraphicsLayer

使用 GraphicsLayer图层首先需要引入esri/layers/GraphicsLayer包，然后调用GraphicsLayer()初始化一个图形，再调用add(graphic)可以将图形添加到图层中。add方法中的参数类型为Graphic，而根据坐标值添加的图形是Geometry，需要将Geometry转化成Graphic：

new Graphic(geometry?, symbol?, attributes?, infoTemplate?)

添加点、线、面

添加点、线、面三种图形，使用前需要引入对应的类，esri/geometry/Point,esri/geometry/Polyline,esri/geometry/Polygon

/*
* 添加点
* */
this.addPoint = function (long, lat) {
    var point = new esri.geometry.Point(long,lat);
    var graphic = new esri.Graphic(point,_markerSymbol);
    this.graphicsLayer.add(graphic);
};

/*
* 添加线
* */
this.addLine = function (paths) {
    var line = new esri.geometry.Polyline(paths);
    var graphic = new esri.Graphic(line,_lineSymbol);
    this.graphicsLayer.add(graphic);
};

/*
* 添加面
* */
this.addPolygon = function (coordinates) {
    var polygon = new esri.geometry.Polygon(coordinates);
    var graphic = new esri.Graphic(polygon,_fillSymbol);
    this.graphicsLayer.add(graphic);
};

/*
* 清空添加的图形
* */
this.clearGeometry = function () {
    this.graphicsLayer.clear();
}

示例

require([
  "esri/map",
  "esri/SpatialReference",
  "esri/layers/FeatureLayer",
  "esri/geometry/Point",
  "esri/tasks/FeatureSet",
  "esri/graphic",
  "dojo/domReady!",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/Color",
  "esri/graphic",
  "esri/layers/GraphicsLayer",
],function (Map, SpatialReference, FeatureLayer, Point, FeatureSet, Graphic, Color, SimpleMarkerSymbol,Graphic, GraphicsLayer) {
  var map = new Map("map", {
      basemap: "osm",
      center: [106.853, 39.687],
      zoom: 3
  });
 function addPointGraphicsLayer(a) {
   //png符号
   var symbol1 = {
       "type": "esriPMS",
       "url": " ", //图片位置   真正点的坐标在图片中心点，如果要将图片上移，yoffset为正，右移 xoffset为正
       "width": 15, //当前图片宽度
       "height": 17,//当前图片高度
       "xoffset": 0,
       "yoffset": 0
   };
   //gif符号
   var symbogif = {
       "type": "esriPMS",
       "url": "", //图片位置   真正点的坐标在图片中心点，如果要将图片上移，yoffset为正，右移 xoffset为正
       "width": 30, //当前图片宽度
       "height": 30,//当前图片高度
       "xoffset": 0,
       "yoffset": 0
   };
   var symbol;
   if (a == 1) {
       symbol = symbol1
   }
   else symbol = symbogif;
   var pointjson =
       [    //以下为数组，这里只写了一个。
           {
               "geometry": {
                   "x": 116.31075939030517, "y": 40.04059194613418,  //经纬度
                   "spatialReference": { "wkid": 4326 }
               },
               "attributes": {
                   "Name": "",
                   "Address": ""
               },
               "symbol": symbol,
               "infoTemplate": {  //点击该点显示的信息窗口内容
                   "title": "企业信息",
                   "content": "名称: ${Name} <br/>地址: ${Address}"
               }
           }
       ];
    var graphic = new Graphic("企业", null, pointjson, null, true);
    map.addLayer(graphic)
    // addGraphic("企业", null, pointjson, null, true);
}

//叠加线图层
function addPolyline() {
  var Polyline = [{//线图层的数据
       "geometry": {
           //必填，构成线的结点坐标，根据结点顺序绘制线，所以一定要注意点顺序
           "paths": [[[-29787466.330565456, 4060315.5557630984],
           [-28495986.30065946, 4060315.5557630984],
           [-28427498.72331596, 4422321.321721597],
           [-28114412.655459963, 3991827.978419599],
           [-27654567.493296463, 4079883.4350040983],
           [-27546944.157470964, 3933124.3406965993]]],
           "spatialReference": { "wkid": 102100 }//可选，坐标系
       },
       "attributes": {//属性字段，根据实际情况添加属性字段
           "ObjectID": 1,
           "Name": "线"
       },
       "symbol": {//必选，线符号
           "width": 3,//可选，线的宽度，默认为1
           "style": "esriSLSSolid",//可选，线样式默认为esriSLSSolid，实线
           "type": "esriSLS",//必选，边线类型，此处是指线
           "color": [0, 206, 209]//必选，线的颜色
       }
   }];
   var graphic = new Graphic(Polyline);
   map.graphics.add(graphic)
 }
 //叠加面图层
function addPolygon() {
  //面图层的数据
  var polygon = [{
    geometry: {
        //必填，构成面的结点坐标，根据结点顺序绘制面，所以一定要注意点顺序
        "rings": [[[-26852284.444415465, 3541766.7558766007], [-27380617.183922466, 2847107.0428211037],
        [-28280739.62900846, 2475317.3372421055], [-28642745.39496696, 2954730.3786466033],
        [-29092806.617509957, 3385223.721948602], [-28946047.523202457, 3629822.2124611004],
        [-28280739.62900846, 3893988.5822145995], [-27742622.94988096, 3688525.8501841],
        [-27615431.734814465, 3884204.6425940995], [-27400185.063163463, 3688525.8501841],
        [-26852284.444415465, 3541766.7558766007]]],
        "spatialReference": { "wkid": 102100 }//坐标系
    },
    attributes: {
        OBJECTID: 1,
        name: '面1'
    },
    symbol: {//可选，默认渲染符号，即不在渲染区间的值使用此符号
        "color": [255, 165, 0, 200],//必选，符号颜色
        "outline": {//可选，符号边线设置
            "color": [255, 0, 0],//必选，边线颜色
            "width": 1,//必选，边线宽度
            "type": "esriSLS"
            //                    "style": "esriSLSNull"//可选，边线样式,当前设置时不显示边线，默认为：esriSFSSolid，显示边线
        },
        "type": "esriSFS",//必选，符号类型，此处是指面符号，点符号为："esriSMS"
        "style": "esriSFSSolid"//必选，填充样式
    },
    "infoTemplate": {  //点击该面显示的信息窗口内容
         "title": "面信息",
         "content": "OBJECTID: ${OBJECTID}"
     }
  },
  {
     geometry: {
         "type": "polygon",
         "rings": [[[-30472024.28830262, 5253956.189464113], [-29532766.08473462, 5058277.397054112],
         [-29571901.843216617, 4666919.812234111], [-29963259.42803662, 3923340.40107611],
         [-30628567.32223062, 4353833.74437811], [-30472024.28830262, 5253956.189464113]]],
         "spatialReference": { "wkid": 102100 }
     },
     attributes: {
         OBJECTID: 2,
         name: '面2'
     },
     symbol: {//可选，默认渲染符号，即不在渲染区间的值使用此符号
         "color": [255, 69, 0, 200],//必选，符号颜色
         "outline": {//可选，符号边线设置
             "color": [139, 26, 26],//必选，边线颜色
             "width": 1.5,//必选，边线宽度
             "type": "esriSLS"//必选，边线类型，此处是指线
             //                        "style": "esriSFSSolid"//可选，边线样式
         },
         "type": "esriSFS",//必选，符号类型，此处是指面符号，点符号为："esriSMS"
         "style": "esriSFSSolid"//必选，符号样式
     },
     "infoTemplate": {  //点击该面显示的信息窗口内容
         "title": "面信息",
         "content": "OBJECTID: ${OBJECTID} <br/>"
     }
  }];
  var graphic = new Graphic(polygon);
  map.graphics.add(graphic)
}
	// 地图加载完成后执行函数
	map.on('load', () => {
	    console.log('load');
	    addPointGraphicsLayer(1)
	    addPolyline()
	    addPolygon()
	})
})

二、画扇形

/*
*center是中心点;radius是半径, startAngle, endAngle是开始角度和结束角度（正北为0度）,pointNum为弧面上点的个数
*/
function getPoints(center, radius, startAngle, endAngle, pointNum) {
	var sin;
	var cos;
	var x;
	var y;
	var angle;
	
	var points = new Array();
	points.push(center);
	for ( var i = 0; i <= pointNum; i++) {
		angle = startAngle + (endAngle - startAngle) * i
				/ pointNum;
		sin = Math.sin(angle * Math.PI / 180);
		cos = Math.cos(angle * Math.PI / 180);
		x = center[0] + radius * sin;
		y = center[1] + radius * cos;
		points[i] = [ x, y ];
	}
	
	var point = points;
	point.push(center);
	return point;
}

给扇形添加颜色

function drawPoint() {
	var clon = 116.570132;
	var clat = 24.80105;
	var apoint1 = getPoints([clon, clat], 2, -30, 45, 60);
	apoint1[apoint1.length] = apoint1[0];
	// 填充颜色主要使用SimpleFillSymbol这个类
	var s111 = new esri.symbol.SimpleFillSymbol(
		esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
		new esri.symbol.SimpleLineSymbol(
			esri.symbol.SimpleLineSymbol.STYLE_NULL, 
			new dojo.Color([255,0,0]),
			2
		),
		new dojo.Color([255,255,0,0.5])
	);
	var otherInfo = new esri.InfoTemplate("地理位置:${name}","经度：${lon}</br>纬度：${lat}");
	var polygon2 = new esri.geometry.Polygon(apoint1);
	var gr3 = new esri.Graphic(polygon2, s111, {"lon": 12,"lat": 444,"name": 5555}, otherInfo);
	var g1 = new GraphicsLayer();
	g1.add(gr3);
	linemap.addLayer(g1);
}

三、添加WFS服务

<script>
  var map;
  require(["esri/map",
      'esri/layers/WMSLayer',
      'esri/layers/WMSLayerInfo',
      'esri/geometry/Extent',
      "esri/InfoTemplate", "esri/layers/WFSLayer",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/config",
      "dojo/domReady!"
  ], function(Map,
			  WMSLayer,
			  WMSLayerInfo,
			  Extent,
			  InfoTemplate,
			  WFSLayer,
			  ArcGISTiledMapServiceLayer,
			  ArcGISDynamicMapServiceLayer,
			  esriConfig) {
	  // 设置ArcGIS JS API代理
	  esriConfig.defaults.io.proxyUrl = "http://127.0.0.1/ArcGISProxy/proxy.ashx";
	  esriConfig.defaults.io.alwaysUseProxy = false;
	
	  map = new Map("map", {
	      center: [120.111, 36.004],
	      zoom: 15
	  });

     //使用ArcGIS Server自带的一个地图服务作为底图
      map.addLayer(new ArcGISDynamicMapServiceLayer('底图服务地址'));

      var url = "wfs服务地址";
      var opts = {
          "url": url,
          "version": "1.1.0",
          "name": "地图服务里面的图层名称",    //地图服务里面的图层名称
          "wkid": 3857,              //发布的地图服务的坐标系
          "maxFeatures": 1000
      };
      var layer = new WFSLayer();  // 创建WFS地图图层
      layer.fromJson(opts);
      map.addLayer(layer);
  });
</script>

四、添加WMS服务

3.x加载WMS图层

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Map with WMS</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.39/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

  </style>
  <script src="https://js.arcgis.com/3.39/"></script>
  <script>
    var map;
    require([
      'esri/map', 'esri/layers/WMSLayer','esri/layers/WMSLayerInfo','esri/geometry/Extent','dojo/_base/array', 'dojo/dom', 'dojo/dom-construct','dojo/parser',"esri/InfoTemplate","esri/toolbars/draw","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol", "esri/graphic", "esri/Color","dojo/on","esri/geometry/Polyline","esri/symbols/PictureMarkerSymbol","esri/dijit/BasemapGallery", "esri/symbols/SimpleFillSymbol","esri/geometry/Polygon", "esri/symbols/Font",'dojo/domReady!'], function (Map, WMSLayer, WMSLayerInfo, Extent, array, dom, domConst, parser,InfoTemplate, Draw, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, Color, on, Polyline, PictureMarkerSymbol,BasemapGallery, SimpleFillSymbol, Polygon, Font) {
  ///加载图层
  map = new Map('map', {
    basemap: "osm",
    center: [121.07, 37.686],
    zoom: 14
  });

  //构建图层
  var layer1 = new WMSLayerInfo({
    name: 'shelby:wanhuaShpGroup',
    title: 'satellite'
  });
  var resourceInfo = {
    extent: new Extent(-126.40869140625, 31.025390625, -109.66552734375, 41.583203125, {//左下角到右上角的点坐标
      wkid: 4326//坐标系设置为GCS_WGS_1984
    }),
    layerInfos: [layer1]
  };
  var wmsLayer = new WMSLayer('geoserver中wms服务地址', {
    resourceInfo: resourceInfo,
    visibleLayers: ['shelby:wanhuaShpGroup'],//geoserver中发布图层的名称（工作区：图层名字）
  });
  map.addLayers([wmsLayer]);
});
  </script>
</head>

<body class="claro">
    <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
    </div>
  </div>
</body>
</html>

4.x加载WMS图层

在4.x中，WMSLayerInfo不再是对象，不能new

let layer = new WMSLayer({
  url: "wms服务地址",
  sublayers: [{
      name: "工作区：图层名字",
      //legendUrl: // url to the legend
  }]
});
map.add(layer);