1.引用ArcGis for javascript核心类库的两种方式:

1.1.下载js包,解压缩放入项目中

1.1.1.下载核心类库压缩文件, 下载地址: https://developers.arcgis.com/downloads/

1.1.2.将下载好的文件解压缩放入项目

1.1.3.更改核心类库中的相关文件中的路径

　　1> 更改 ../arcgis_js_api/library/3.22/3.22/init.js 与 ../arcgis_js_api/library/3.22/3.22/dojo/dojo.js 文件

　　2> 将 "https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo" 改为 "http://ip:port/项目路径/arcgis_js_api/library/3.22/3.22/dojo/dojo"

1.2.引用在线js类库

  1.  // Reference the JavaScript API from our CDN and you are ready to get started:
  2.  <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
  3. 3 <script src="https://js.arcgis.com/3.23/"></script>

2.创建MAP实例

2.1.创建一个div存放地图

  1. <div id="myMap"></div>

2.2.使用dojo引入地图所需要的工具类,例如:

  1.  dojo.require('esri.layers.WebTiledLayer');   // 加载天地图
  2.  dojo.require('dojo.parser');
  3.  dojo.require('esri.request');
  4.  dojo.require('dojo.domReady!');
  5.  dojo.require('esri.layers.FeatureLayer');
  6.  dojo.require('esri.layers.GraphicsLayer');
  7.  dojo.require('esri.toolbars.navigation');
  8.  dojo.require('esri.dijit.OverviewMap');
  9.  dojo.require('esri.toolbars.draw');
  10.  dojo.require('esri.tasks.query');
  11.  dojo.require('esri.dijit.Scalebar');
  12.  dojo.require('dijit.dijit');
  13.  dojo.require('dijit.form.Button');
  14.  dojo.require('dijit.Toolbar');
  15.  dojo.require('dijit.layout.BorderContainer');
  16.  dojo.require('dijit.layout.ContentPane');
  17.  dojo.require('dijit.layout.AccordionContainer');
  18.  dojo.require('dojo.date.locale');
  19.  dojo.require('dojo.dom-style');

2.3.调用mapInit函数初始化地图

  1. dojo.ready(mapInit); // 初始化地图

2.4.在mapInit函数中处理地图的事件

2.4.1:初始化地图范围方式一:

  1.  function mapInit() {
  2.      // 初始化范围设置
  3.      startExtent = new esri.geometry.Extent(mixX, mixY, maxX, maxY,
  4.          new esri.SpatialReference({wkid: 4490})
  5.      );
  6.      esri.config.defaults.map.sliderLabel = null;
  7.      map = new esri.Map("map", {
  8.          logo: false,
  9.          slider: false,
  10.          extent: startExtent
  11.      });
  12.  }

2.4.2.初始化地图范围方式二:

  1.  esri.config.defaults.map.sliderLabel = null;
  2.  map = new esri.Map('myMap', {
  3.      logo: false,
  4.      slider: false,
  5.      maxZoom: z,
  6.      spatialReference: {
  7.          wkid: 4490,
  8.      },
  9.  });
  10.  point = new esri.geometry.Point(x, y);
  11.  map.centerAndZoom(point, z);

2.4.3.初始化地图范围方式三:(推荐)

  1.  esri.config.defaults.map.sliderLabel = null;
  2.  map = new esri.Map("map", {
  3.      center : [ x, y ],
  4.      zoom : z,
  5.      logo : false,
  6.      spatialReference : {
  7.          "wkid" : 4326
  8.      }
  9.  });

2.5.引入地图(瓦片图层或数据图层)

2.5.1.引入瓦片图层:

  1. <!-- 引入瓦片地图 -->
  2. arcGISTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(`http://ip:port/arcgis/rest/services/map/mapService/MapServer/`, {
  3.     id: 'arcGISTiledMapServiceLayer',
  4.     outFields: ['*'],
  5. });
  6. map.addLayers([arcGISTiledMapServiceLayer]);

2.5.2.引入在线缓存地图:

  1. <!-- 引入缓存地图 -->
  2. arcGISDynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer('http://ip:port/arcgis/rest/services/map/mapService/MapServer/', {
  3.     id: 'arcGISDynamicMapServiceLayer',
  4.     outFields: ['*'],
  5. });
  6. map.addLayers([arcGISDynamicMapServiceLayer]);

2.5.3.引入数据图层:

  1. <!-- 引入数据图层 -->
  2. featureLayer = new esri.layers.FeatureLayer("http://ip:port/arcgis/rest/services/map/mapService/MapServer/0", {
  3.     mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
  4.     id: "featureLayer",
  5.     outFields: ["*"]
  6. });
  7. map.addLayers([featureLayer]);

2.5.4.引入graphic图层

  1. <!-- 引入graphic图层 -->
  2. graphicLayer = new esri.layers.GraphicsLayer({
  3. 　　id: 'graphicLayer', 
    　　outFields: ['*'], 
    }); 
    map.addLayers([graphicLayer]);

2.5.5.给地图设置比例尺

  1. scalebar = new esri.dijit.Scalebar({
  2.     map, // 地图对象
  3.     attachTo: 'bottom-right', // 控件的位置，右下角
  4.     scalebarStyle: 'line',  // line 比例尺样式类型
  5.     scalebarUnit: 'metric',   // 显示地图的单位，这里是km
  6. });

2.5.6.给地图上的图绑定事件

2.5.6.1.点击事件:

  1. <!-- 给地图的底图或数据图层绑定点击事件 -->
  2. dojo.connect(map, 'onClick', function() {
  3.     ......
  4. });

2.5.6.2.点击事件:

  1. <!-- 给地图绑定当地图的比例尺被改变时事件 -->
  2. dojo.connect(map, 'onZoomEnd', function() {
  3.     ......
  4. });

2.5.6.3.底图加载完成事件:

  1. <!-- 当地图加载完后事件 -->
  2. dojo.connect(map, 'onUpdateEnd', function() {
  3.     ......
  4. });

2.5.6.4.鼠标移入事件:

  1. <!-- 鼠标移入事件 -->
  2. dojo.connect(StreetLightsRtus, 'onMouseOver', function(evt) {
  3.     map.setMapCursor('pointer');
  4.     ......
  5. });

2.5.6.5.鼠标移出事件:

  1. <!-- 鼠标移出事件 -->
  2. dojo.connect(StreetLightsRtus, 'onMouseOut', function() {
  3.     map.setMapCursor('');
  4.     ......
  5. });

2.5.6.6.地图要素的框选

  1. <!-- 引入相关依赖 -->
  2. dojo.require('esri.toolbars.draw');
  3.  
  4. <!-- 加载框选工具Draw -->
  5. map.onLoad = initToolbar();
  6.  
  7. <!-- 禁用框选工具Draw -->
  8. draw.deactivate();
  9.  
  10. <!-- 框选 -->
  11. function initToolbar() {
  12.     draw = new esri.toolbars.Draw(map);
  13.     // 当完成框选范围时，在范围内找到点
  14.     dojo.connect(draw, 'onDrawEnd', function() {
  15.         <!-- 找到范围内的graphic要素 -->
  16.         if (graphicLayer !== undefined) {
  17.             for (let i = 0; i < graphicLayer.graphics.length; i += 1) {
  18.                 // 判断开关箱是否在框选范围
  19.                 obj = graphicLayer.graphics[i];
  20.                 if (obj.geometry !== undefined) {
  21.                     if (obj.visible && extent.contains(obj.geometry)) {
  22.                         rtuObjectArr.push(obj.attributes.id);
  23.                     }
  24.                 }
  25.             }
  26.         }
  27.         <!-- 找到范围内的feature要素 -->
  28.         if (featureLayer !== undefined) {
  29.             for (let i = 0; i < featureLayer.graphics.length; i += 1) {
  30.                 // 判断开关箱是否在框选范围
  31.                 obj = featureLayer.graphics[i];
  32.                 if (obj.geometry !== undefined) {
  33.                     if (obj.visible && extent.contains(obj.geometry)) {
  34.                         rtuObjectArr.push(obj.attributes.id);
  35.                     }
  36.                 }
  37.             }
  38.         }
  39.     });
  40. }

2.5.6.7.图层的显示与隐藏

2.5.6.7.1.图层的显示
  1. arcGISTiledMapServiceLayer.show();
  2. arcGISDynamicMapServiceLayer.show();
  3. featureLayer.show();
  4. graphicLayer.show();
2.5.6.7.2.图层的显示
  1. arcGISTiledMapServiceLayer.hide();
  2. arcGISDynamicMapServiceLayer.hide();
  3. featureLayer.hide();
  4. graphicLayer.hide();

2.6.graphicLayer图层数据的增`删`改

2.6.1.添加要素

  1. <!-- 新增要素 -->
  2. function mapAddGraphic() {
  3.     point = new esri.geometry.Point(x, y);
  4.     symbol = new esri.symbol.PictureMarkerSymbol("../../../xxx.png", 16, 16);
  5.     attributes = {
  6.         "id": 1,
  7.         "name":"新增测试"
  8.     }
  9.     graphic = new esri.Graphic(point, symbol, attributes);
  10.     graphicLayer.add(graphic);
  11. }

2.6.2.更改要素

  1. <!-- 更改要素 -->
  2. function mapModifyGraphic() {
  3.     point = new esri.geometry.Point(x, y);
  4.     symbol = new esri.symbol.PictureMarkerSymbol("../../../xxx.png", 16, 16);
  5.     attributes = {
  6.         "id": 1,
  7.         "name":"更改测试"
  8.     }
  9.     graphic = new esri.Graphic(point, symbol, attributes);
  10.     for (let i = 0; i < graphicLayer.graphics.length; i += 1) {
  11.         if (graphicLayer.graphics[i].attributes.id === attributes.id) {
  12.             graphicLayer.remove(graphicLayer.graphics[i]);
  13.         }
  14.     }
  15.     graphicLayer.add(graphic);
  16. }

2.6.3.删除要素

  1. <!-- 删除要素 -->
  2. function mapDeleteGraphic(graphic) {
  3.     for (let i = 0; i < graphicLayer.graphics.length; i += 1) {
  4.         if (graphicLayer.graphics[i].attributes.id === graphic.id) {
  5.             graphicLayer.remove(graphicLayer.graphics[i]);
  6.         }
  7.     }
  8. }

2.7.featureLayer图层数据的增`删`改

featureLayer图层数据的增`删`改对应的要修改ArcGis Server端的数据,所以该featureLayer引用的数据链接在发布图层的时候必须开启Feature Access功能

2.7.1.添加要素

  1. <!-- 1.引入dojo依赖 -->
  2. dojo.require('esri.dijit.editing.Add');
  3.  
  4. <!-- 2.进行添加 -->
  5. function mapAddFeature() {
  6.     featureLayer = new esri.layers.FeatureLayer(`${layerUrl}1`, {
  7.         mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
  8.         outFields: ['*'],
  9.     });
  10.     point = new esri.geometry.Point(x, y);
  11.     symbol = new esri.symbol.PictureMarkerSymbol("../../../xxx.png", 16, 16);
  12.     attributes = {
  13.         "id": 1,
  14.         "name":"新增测试"
  15.     }
  16.     graphic = new esri.Graphic(point, symbol, attributes);
  17.     RtuAdd = new esri.dijit.editing.Add({
  18.         featureLayer,             // 给哪一个要素图层添加要素
  19.         addedGraphics: [graphic], // 用于添加的要素
  20.     });
  21.     // 执行添加函数
  22.     RtuAdd.performRedo();
  23.     featureLayer.refresh();
  24.     graphic.setSymbol(symbol);
  25.     featureLayer.add(graphic);
  26. }

2.7.2.更改要素

  1. <!-- 1.引入dojo依赖 -->
  2. dojo.require('esri.dijit.editing.Update');
    dojo.require('esri.tasks.query');
  3.  
  4. <!-- 2.进行更改 -->
  5. function mapModifyFeature() {
  6.     featureLayer = new esri.layers.FeatureLayer(`${layerUrl}1`, {
  7.         mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
  8.         outFields: ['*'],
  9.     });
  10.     query = new esri.tasks.Query();
  11.     query.returnGeometry = true;
  12.     query.outFields = ['*'];
  13.     query.where = `id=1`;
  14.     queryTask = new esri.tasks.QueryTask(`${layerUrl}`);
  15.     queryTask.execute(query, (results) => {
  16.         if (results.features.length > 0) {
  17.             oldGraphic = results.features[0];
  18.             point = new esri.geometry.Point(x, y);
  19.             symbol = new esri.symbol.PictureMarkerSymbol("../../../xxx.png", 16, 16);
  20.             newGraphic = new esri.Graphic(point, symbol, oldGraphic.attributes);
  21.             newGraphic.attributes.id = 1;
  22.             newGraphic.attributes.name = "更改测试";
  23.             newGraphic.attributes.x = x;
  24.             newGraphic.attributes.y = y;
  25.             RtuUpdate = new esri.dijit.editing.Update({
  26.                 featureLayer,
  27.                 postUpdatedGraphics: [newGraphic], // 修改之后的要素
  28.                 preUpdatedGraphics: [oldGraphic],  // 修改之前的要素
  29.             });
  30.             RtuUpdate.performRedo();
  31.             featureLayer.refresh();
  32.             for (let i = 0; i < graphicLayer.graphics.length; i += 1) {
  33.                 if (graphicLayer.graphics[i].attributes.id === oldGraphic.id) {
  34.                     graphicLayer.remove(graphicLayer.graphics[i]);
  35.                 }
  36.             }
  37.             featureLayer.add(newGraphic);
  38.         } else {
  39.             mapAddFeature();
  40.         }
  41.     });
  42. }

2.7.3.删除要素

  1. <!-- 1.引入dojo依赖 -->
  2. dojo.require('esri.dijit.editing.Delete');
    dojo.require('esri.tasks.query');
  3.  
  4. <!-- 2.进行更改 -->
  5. function mapDeleteLamp() {
  6.     featureLayer = new esri.layers.FeatureLayer(`${layerUrl}1`, {
  7.         mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
  8.         outFields: ['*'],
  9.     });
  10.     query = new esri.tasks.Query();
  11.     query.returnGeometry = true;
  12.     query.outFields = ['*'];
  13.     query.where = `id=1`;
  14.     queryTask = new esri.tasks.QueryTask(`${layerUrl}`);
  15.     queryTask.execute(query, (results) => {
  16.         graphic = results.features[0];
  17.         RtuDelete = new esri.dijit.editing.Delete({
  18.             featureLayer,
  19.             deletedGraphics: [graphic],
  20.         });
  21.         RtuDelete.performRedo();
  22.         featureLayer.refresh();
  23.         for (let i = 0; i < featureLayer.graphics.length; i += 1) {
  24.             if (featureLayer.graphics[i].attributes.id === id) {
  25.                 featureLayer.remove(featureLayer.graphics[i]);
  26.             }
  27.         }
  28.     });
  29. }

3.1.根据经纬度数组在地图上画线

  1. polylineJson = { "paths": [[[120.140524529883, 30.3270758041052], [120.140235682031, 30.3270525737175], [120.139817472998, 30.3270240400276], [120.139431404836, 30.3270008815856]]]};
  2. xlPolyline = new esri.geometry.Polyline(polylineJson);
  3. xlSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#00FF00'), 4);
  4. xlGraphic = new esri.Graphic(xlPolyline, xlSymbol);
  5. polylineLayer.add(xlGraphic);

3.2.跟据经纬度在地图上画圆

  1. point = new esri.geometry.Point(x, y);
  2. symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, (r)),
  3.     new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
  4.         new dojo.Color([255, 0, 0]), 0.1),
  5.     new dojo.Color([255, 0, 0, 0.6]));
  6. graphic = new esri.Graphic(point, symbol, item);
  7. schoolElectricityLayer.add(graphic);

3.3.根据经纬度数组在地图上画面

  1. polygonJson ={
  2.     rings: [[
  3.         [120.193451, 30.283218], [120.194453, 30.263535], [120.165335, 30.264035], [120.161023, 30.278568],
  4.         [120.168414, 30.280866], [120.166471, 30.288568], [120.162369, 30.288824], [120.158991, 30.295311],
  5.         [120.172835, 30.300009], [120.16372, 30.314242], [120.164879, 30.317144], [120.192948, 30.352787],
  6.         [120.20639, 30.3569], [120.21079, 30.35175], [120.218307, 30.351427], [120.217978, 30.340206],
  7.         [120.209947, 30.336802], [120.209419, 30.328492], [120.203206, 30.327809], [120.213779, 30.326153],
  8.         [120.209763, 30.321596], [120.19666, 30.318027], [120.194544, 30.307804], [120.19983, 30.308465],
  9.         [120.191775, 30.295249], [120.193451, 30.283218]]],
  10.     spatialReference: {wkid: 4326}
  11. };
  12.  
  13. polygon = new esri.geometry.Polygon(polygonJson);
  14. symbol = new esri.symbol.SimpleFillSymbol(
  15.     esri.symbol.SimpleFillSymbol.STYLE_SOLID,
  16.     new esri.symbol.SimpleLineSymbol(
  17.         esri.symbol.SimpleLineSymbol.STYLE_SOLID,
  18.         new dojo.Color("#ff0000"), 1),
  19.     new dojo.Color([172, 148, 85, 0.25]));
  20. graphic = new esri.Graphic(polygon, symbol, {行政区: "下城区"});
  21. polygonLayer.add(graphic);

3.4.根据经纬度定位地图中心

  1. function mapSetPointAndZoom(x, y, z) {
  2.     point = new esri.geometry.Point(x, y);
  3.     map.centerAndZoom(point, z);
  4. }

3.5.根据经纬度数数组在地图上进行轨迹运动

3.5.1.创建按钮事件:

  1. <div id="myMap">
  2.     <span>
  3.         <input type="button" id="runningStark" value="设置起点" onclick="runningStark()"/>
  4.         <input type="button" id="openTool"   value="开启" onclick="openTool()"/>
  5.         <input type="button" id="closeTool"  value="暂停" onclick="closeTool()"/>
  6.         <input type="button" id="continueTool"  disabled="disabled" value="继续" onclick="continueTool()"/>
  7.         <input type="button" id="returnTool" disabled="disabled" readonly value="返回" onclick="returnTool()"/>
  8.     </span>
  9. </div>

3.5.2.准备数据:

  1. polylineJson = { // 测试数据
  2.     "paths": [[
  3.         [120.140524529883, 30.3270758041052], [120.140235682031, 30.3270525737175], [120.139817472998, 30.3270240400276], [120.139431404836, 30.3270008815856],
  4.         [120.139123789931, 30.3270506635574], [120.138809475077, 30.3271387683396], [120.138707810317, 30.3269174361909], [120.138343646942, 30.3268787653429],
  5.         [120.138002517003, 30.3268448321235], [120.137661679343, 30.3268103188413], [120.137338229176, 30.3267788839385], [120.137012494731, 30.3267463536615],
  6.         [120.136655150015, 30.3267106370864], [120.136298906969, 30.3266752415693], [120.135942734070, 30.3266398667366], [120.135580169689, 30.3266049748399],
  7.         [120.135589970501, 30.3265466502079], [120.135493511916, 30.3265342665433], [120.135307094147, 30.3265103346844], [120.135237810377, 30.3265014403893],
  8.         [120.135230226394, 30.3265702421231], [120.134855343999, 30.3265328932786], [120.134527389128, 30.3265009583527], [120.134170643361, 30.3264658119479],
  9.         [120.133820501315, 30.3264309839029], [120.133472301805, 30.3263960002753], [120.133120725341, 30.3263816030287], [120.132775043034, 30.3263553985830],
  10.         [120.132400386369, 30.3263183069445], [120.132396155958, 30.3263859143786], [120.132103850213, 30.3263658298193], [120.131776976327, 30.3263433701506],
  11.         [120.131677380907, 30.3263365272092], [120.131652148628, 30.3259547497121]
  12.     ]],
  13.     "spatialReference":{"wkid":4326}
  14. };

3.5.3.设置起点:

  1. function runningStark(){
  2.     // 创建路线
  3.     xlPolyline = new esri.geometry.Polyline(polylineJson);
  4.     xlSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,new dojo.Color("#0000FF"),3);
  5.     xlGraphic = new esri.Graphic(xlPolyline,xlSymbol);
  6.     map.graphics.add(xlGraphic);
  7.  
  8.     // 创建起点
  9.     qdPoint = new esri.geometry.Point(120.140524529883, 30.3270758041052,new esri.SpatialReference({wkid:4490}));
  10.     qdSymbol = new esri.symbol.PictureMarkerSymbol("/demo0607/images/car.png",10,20);
  11.     qdGraphic = new esri.Graphic(qdPoint,qdSymbol);
  12.     map.centerAndZoom(qdPoint,17); // 定位到起点
  13.     map.graphics.add(qdGraphic);
  14. }

3.5.4.开始轨迹:

  1. function openTool(){
  2.     if(typeof(moving)!="undefined"){
  3.         clearInterval(moving); //清除移动
  4.     }
  5.     points = polylineJson.paths[0];
  6.     qdGraphic.geometry.x = points[0][0];
  7.     qdGraphic.geometry.y = points[0][1];
  8.     map.graphics.refresh();
  9.     move(0,1);
  10.     document.getElementById("closeTool").disabled=false;
  11.     document.getElementById("continueTool").disabled=true;
  12.     document.getElementById("returnTool").disabled=true;
  13. }

3.5.5.暂停轨迹

  1. function closeTool(){
  2.     clearInterval(moving);
  3.     document.getElementById("continueTool").disabled=false;
  4.     document.getElementById("returnTool").disabled=false;
  5. }

3.5.6.继续轨迹

  1. function continueTool(){
  2.     if(typeof(moving)!="undefined"){
  3.         clearInterval(moving); // 清除移动
  4.     }
  5.     move(startNum,endNum);
  6.     document.getElementById("returnTool").disabled=true;
  7. }

3.5.7.返回起点

  1. function returnTool(){
  2.     qdGraphic.geometry.x = points[0][0];
  3.     qdGraphic.geometry.y = points[0][1];
  4.     qdGraphic.symbol.angle=0;
  5.     map.graphics.refresh();
  6.     $("continueTool").disabled=true;
  7. }

3.5.8.相关工具函数

3.5.8.1.根据序列点坐标 进行移动

  1. function move(start,end){
  2.     startX = points[start][0];
  3.     startY = points[start][1];
  4.     endX = points[end][0];
  5.     endY = points[end][1];
  6.  
  7.     p = (endY - startY) / (endX - startX);//斜率
  8.     var v = 0.000315;//距离  距离越小 位置越精确
  9.     moving = setInterval(function(){
  10.         startNum = start;
  11.         endNum = end;
  12.         if(endNum == points.length - 1){
  13.             document.getElementById("closeTool").disabled=true;
  14.             document.getElementById("continueTool").disabled=true;
  15.             document.getElementById("returnTool").disabled=false;
  16.         }
  17.         //分别计算 x,y轴方向速度
  18.         if(Math.abs(p) == Number.POSITIVE_INFINITY){//无穷大
  19.             qdGraphic.geometry.y += v;
  20.         } else {
  21.             if(endX < startX){
  22.                 //qdGraphic.geometry.x -= (1 / Math.sqrt(1 + p * p)) * v;
  23.                 //qdGraphic.geometry.y -= (p / Math.sqrt(1 + p * p)) * v;
  24.                 qdGraphic.geometry.x = endX;
  25.                 qdGraphic.geometry.y = endY;
  26.                 //计算汽车角度
  27.                 qdGraphic.symbol.angle = calculateXAndYVision(startX, startY, endX, endY); //// (Math.PI / 2 - Math.atan(p)) * 180 / Math.PI+180
  28.             } else {
  29.                 //qdGraphic.geometry.x += (1 / Math.sqrt(1 + p * p)) * v;
  30.                 //qdGraphic.geometry.y += (p / Math.sqrt(1 + p * p)) * v;
  31.                 qdGraphic.geometry.x = endX;
  32.                 qdGraphic.geometry.y = endY;
  33.                 //计算汽车角度
  34.                 qdGraphic.symbol.angle = calculateXAndYVision(startX, startY, endX, endY); ////(Math.PI / 2 - Math.atan(p)) * 180 / Math.PI
  35.             }
  36.         }
  37.         //图层刷新
  38.         map.graphics.refresh();
  39.         //if (Math.abs(qdGraphic.geometry.x - endX) <= 0.01 && Math.abs(qdGraphic.geometry.y - endY) <= 0.01) {
  40.             clearInterval(moving);
  41.             startNum = start++;
  42.             endNum = end++;
  43.             if (end < points.length){
  44.                 move(start, end);
  45.             }
  46.         //}
  47.     }, 300);
  48. }

3.5.8.2.计算x和y的视角

  1. function calculateXAndYVision(startX, startY, endX, endY){
  2.     tan = Math.atan(Math.abs((endY - startY)/(endX - startX))) * 180 / Math.PI + 90;
  3.     if (endX > startX && endY > startY){ // 第一象限
  4.         return - tan + 180;
  5.     } else if (endX > startX && endY < startY){ // 第二象限
  6.         return tan;
  7.     } else if (endX < startX && endY > startY){ // 第三象限
  8.         return tan - 180;
  9.     } else if (endX < startX && endY < startY){ // 第四象限
  10.         return - tan;
  11.     }
  12. }

关于ArcGis for javascript的使用的更多相关文章

  1. Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式

    原文:Arcgis for Javascript API下类似于百度搜索A.B.C.D marker的实现方式 多说无益,首先贴两张图让大家看看具体的效果: 图1.百度地图搜索结果 图2.Arcgis ...

  2. ArcGIS For JavaScript API 默认参数

    “esri.config”的是在1.3版中的的“esriConfig”的替代品.如果您使用的是1.2或更低的版本,您应该参阅默认API v1.2和更低的配置.对于版本1.3或更高版本,您可以使用“es ...

  3. arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现

    图层控制是非常多GIS系统里面必须的一个小功能,本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层控制的实现方式.首先看图: 实现效果 ...

  4. Arcgis for javascript不同的状态下自己定义鼠标样式

    俗话说:爱美之心.人皆有之. 是的.没错,即使我仅仅是一个做地图的,我也希望自己的地图看起来好看一点. 在本文,给大家讲讲在Arcgis for javascript下怎样自己定义鼠标样式. 首先.说 ...

  5. Arcgis for javascript map操作addLayer具体解释

    本节的内容非常easy.说说Arcgis for Javascript里面map对象的addLayer方法.在for JS的API中,addLayer方法有两种.例如以下图: watermark/2/ ...

  6. Arcgis for Javascript之featureLayer图和属性互操作性

    说明:主要实现加载FeatureLayer并显示属性表,而要实现联动属性表与地图,首先,看看实施后的效果: 显示效果 如上图所看到的,本文章主要实现了下面几个功能:1.FeatureLayer属性表的 ...

  7. 利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup

    1.引言 由于Arcgis for javascript API不可以绘制Geojson,并且提供的Popup一般只可以弹出一个,在很多专题图制作中,会遇到不少的麻烦.因此本文结合了两个现有的Arcg ...

  8. ArcGIS for JavaScript学习（一）

    一  API准备 从网上下载开发包:ArcGIS for JavaScript(百度网盘地址) sdk中含有API的帮助和例子 2.离线部署(以IIS为例) 配置IIS(详见网络):解压离线包,包中的 ...

  9. arcgis for JavaScript API 4.5与4.3的区别

    arcgis 4.5与4.3区别: 鉴于本人使用4.3时间比较久,而arcgis for JavaScript API于9月28日推出了4.5版本,但是直接更换4.5的init.js会出现意想不到的错 ...

  10. ArcGIS for JavaScript继承TiledMapServiceLayer来实现“动态切图”

    这种方式可以提高出图速度于效果,算法见http://blog.newnaw.com/?p=633,我用ArcGIS for JavaScript API来实现.具体代码为: function init ...

随机推荐

  1. BZOJ3408: [Usaco2009 Oct]Heat Wave 热浪

    最短路模板.选迪杰. #include<stdio.h> #include<string.h> #include<stdlib.h> #include<alg ...

  2. ES6__变量的解构赋值

    /* 变量的解构赋值 */ /* 基本概念 : 本质上就是一种匹配模式,只要等号两边的模式相同,那么左边的变量就可以被赋予对应的值. 结构赋值主要分为: 1. 数组的解构赋值 2. 对象的结构赋值 3 ...

  3. Codeforces Round #295 D. Cubes [贪心 set map]

    传送门 D. Cubes time limit per test 3 seconds memory limit per test 256 megabytes input standard input ...

  4. apache + DSO -动态共享对象(DSO)

    http://www.jinbuguo.com/apache/menu22/dso.html

  5. HDU 1074 Doing Homework【状态压缩DP】

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1074 题意: 给定作业截止时间和完成作业所需时间,比截止时间晚一天扣一分,问如何安排作业的顺序使得最 ...

  6. P1455 搭配购买

    洛谷——P1455 搭配购买 题目描述 明天就是母亲节了,电脑组的小朋友们在忙碌的课业之余挖空心思想着该送什么礼物来表达自己的心意呢?听说在某个网站上有卖云朵的,小朋友们决定一同前往去看看这种神奇的商 ...

  7. CentOS里route命令详解

    Route 功能简述:linux系统中的route命令能够用于IP路由表的显示和操作.它的主要作用是创建一个静态路由让指定一个主机或者一个网络通过一个网络接口,如eth0.当使用"add&q ...

  8. Windows7系统下优化固态硬盘

    一.AHCI硬盘模式可提高硬盘性能,确定你的固态硬盘是运行在AHCI模式下,打开“HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Servicesmsahci” ...

  9. 各项异性滤波简单介绍Anisotropic Filtering(AF)

    本文主要整理简绍来自互联网的各项异性滤波的知识. 原文链接:http://www.linuxgraphics.cn/graphics/using_anisotropic_texture_filteri ...

  10. Linux经常使用命令（更新中）

    文件类: 1.创建目录:mkdir 例:sudo mkdir test 2.创建空文件:touch 例:sudo touch test.txt 3.删除文件:rm 删除文件不须要确认:rm -f 例: ...