ArcGIS for JavaScript 关于路径开发的一些记录（二）

又是高度集中开发路径模块的一天。真希望自己以后都可以如此的专注和高效（虽然知道很难一直都保持这样的状态，我会坚持的~哈哈哈）

言归正传，今天开发了途径点的功能和改进了些相关起点、终点的代码。先说一下我近点遇到的几个主要的问题（最近遇到问题都会把问题手写在纸上，这样能让自己更好的专注于问题本身，能在最短的时间内解决问题并且方便现在写博客)

1、如何像百度地图一样把途径点的个数控制在五个以内。代码如下：

ctMenuForMap.addChild(menuItem = new MenuItem({
	label: "设为途径点",
	onClick: function (evt) {
		var num = 0;
		flag ++; //falg为全局变量，目的是控制途径点的个数
		var symbol;

		clearRoutes();
		symbol = new PictureMarkerSymbol({
  			"width": 45,
  			"height": 69,
  			"type": "esriPMS"
		});
		switch (flag) {
			case 1:
				symbol.url = "pathwayPoint1.png";
				break;
			case 2:
				symbol.url = "pathwayPoint2.png";
				break;
			case 3:
				symbol.url = "pathwayPoint3.png";
				break;
			case 4:
				symbol.url = "pathwayPoint4.png";
				break;
			case 5:
				symbol.url = "pathwayPoint5.png";
				menuItem.disabled = true;
				break;
		}
		var graphic = new Graphic(geometryJsonUtils.fromJson(currentLocation.toJson()), symbol);
		routeParams.stops.features.push(
			map.graphics.add(graphic)
		);
		editToolbar.activate(Edit.MOVE, graphic);
		pathwayPrve = graphic;

		for (var i = routeParams.stops.features.length-1; i>=0; i--) {
			if (routeParams.stops.features[i].symbol.url === "originPoint.png") {
				num++;
			}
			if (routeParams.stops.features[i].symbol.url === "endPoint.png") {
				num ++;
			}
		}

		if (num == 2){
			routeTask.solve(routeParams, showRoute, errorHandler);
		}

	}
}));

flag为全局变量，用flag的大小来控制途径点的个数，由于每个途径点的图片是不一样的，因此才用了switch语句。

2、如何在onClick函数（onClick函数为MenuItem的方法）里面设置MenuItem（）构造函数的disabled属性。

解：命名menuItem = new MenuItem();然后在onClick里面用menuItem.disabled = true;来设置构造函数的属性。这样的话，当设置了5个途径点后再看菜单的话，途径点的选项就无法点击了。

3、如何对移动起点、途径点和终点。

editToolbar.activate(Edit.MOVE, graphic);

4、移动之后如何触发路径的再建立。

我贴出所有代码,里面有相关的注释。

var editToolbar;
var currentLocation
require(["esri/map", "esri/geometry/Point", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/draw", "esri/toolbars/edit",
	"esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
	"esri/symbols/PictureMarkerSymbol", "esri/graphic", "esri/geometry/jsonUtils", "esri/tasks/RouteTask", "esri/tasks/FeatureSet",
	"esri/tasks/RouteParameters", "esri/Color", "dojo/parser", "dijit/Menu",
	"dijit/MenuItem", "dijit/MenuSeparator", "dijit/form/Button",
	"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"],
	function (
		Map, Point, ArcGISDynamicMapServiceLayer, Draw, Edit, SimpleMarkerSymbol, SimpleLineSymbol,
		SimpleFillSymbol, PictureMarkerSymbol, Graphic, geometryJsonUtils, RouteTask, FeatureSet, RouteParameters, Color, parser, Menu,
		MenuItem, MenuSeparator
	) {
		var routes = [];
		var flag1, flag2 = false;
		var originPrve, pathwayPrve, endPrve;
		var graphic1, graphic2, graphic3;
		var flag = 0, x = 0, y = 0;
		var editToolbar;

		parser.parse();

		var map = new Map("mapDiv");
		var url = "http://localhost:6080/arcgis/rest/services/china1/MapServer";
		var agoLayer = new ArcGISDynamicMapServiceLayer(url);
		map.addLayer(agoLayer);

		routeTask = new RouteTask("http://localhost:6080/arcgis/rest/services/road/NAServer/Route");
        routeParams = new RouteParameters();
        routeParams.stops = new FeatureSet();

        routeSymbol = new SimpleLineSymbol().setColor(new Color([0, 0, 255, 0.5])).setWidth(5);

        map.on("click", pointMove);
		map.on("load", createToolbarMenu);

		//使各个点移动结束后触发路径的再建立
		function pointMove (evt) {
			if (originPrve) {

				editToolbar.on("graphic-move-stop", function (originPrve) {
					var num = 0;
					clearRoutes();

					for (var i = routeParams.stops.features.length-1; i>=0; i--) {
						if (routeParams.stops.features[i].symbol.url === "originPoint.png") {
							num++;
						}
						if (routeParams.stops.features[i].symbol.url === "endPoint.png") {
							num ++;
						}
					}

					if (num == 2){
						routeTask.solve(routeParams, showRoute, errorHandler);
					}
				});
			}

			if (pathwayPrve) {
				editToolbar.on("graphic-move-stop", function (pathwayPrve) {
					var num = 0;
					clearRoutes();

					for (var i = routeParams.stops.features.length-1; i>=0; i--) {
						if (routeParams.stops.features[i].symbol.url === "originPoint.png") {
							num++;
						}
						if (routeParams.stops.features[i].symbol.url === "endPoint.png") {
							num ++;
						}
					}

					if (num == 2){
						routeTask.solve(routeParams, showRoute, errorHandler);
					}
				});
			}

			if (endPrve) {
				editToolbar.on("graphic-move-stop", function (endPrve) {
					var num = 0;
					clearRoutes();

					for (var i = routeParams.stops.features.length-1; i>=0; i--) {
						if (routeParams.stops.features[i].symbol.url === "originPoint.png") {
							num++;
						}
						if (routeParams.stops.features[i].symbol.url === "endPoint.png") {
							num ++;
						}
					}

					if (num == 2){
						routeTask.solve(routeParams, showRoute, errorHandler);
					}
				});
			}
		}		

		function createToolbarMenu () {
			editToolbar = new Edit(map);

			createMapMenu();
		}

		function createMapMenu() {
			var ctMenuForMap = new Menu({
				onOpen: function (box) {
					currentLocation = getMapPointFromMenuPosition(box);
				}
			});

			ctMenuForMap.addChild(new MenuItem({
				label: "设为起点",
				onClick: function (evt) {//起点只	能有一个
					var num = 0;

					if (flag1) {
						for (var i = routeParams.stops.features.length-1; i>=0; i--) {
							if (routeParams.stops.features[i].symbol.url === "originPoint.png") {
								routeParams.stops.features.splice(i, 1)[0];
							}
						}

						map.graphics.remove(originPrve)
						clearRoutes();
					}
					var symbol = new PictureMarkerSymbol({
  						"url": "originPoint.png",
  						"height": 63,
  						"width": 45,
  						"type": "esriPMS"
					});
					var graphic = new Graphic(geometryJsonUtils.fromJson(currentLocation.toJson()), symbol);
					routeParams.stops.features.push(
						map.graphics.add(graphic)
					);

					originPrve = graphic;
					editToolbar.activate(Edit.MOVE, originPrve);

					flag1 = true;

					//只有在起点和终点都设立之后才可以生成路径
					for (var i = routeParams.stops.features.length-1; i>=0; i--) {
						if (routeParams.stops.features[i].symbol.url === "originPoint.png") {
							num++;
						}
						if (routeParams.stops.features[i].symbol.url === "endPoint.png") {
							num ++;
						}
					}

					if (num == 2){
						routeTask.solve(routeParams, showRoute, errorHandler);
					}
				}
			}));

			ctMenuForMap.addChild(menuItem = new MenuItem({
				label: "设为途径点",
				onClick: function (evt) {
					var num = 0;
					flag ++; //falg为全局变量，目的是控制途径点的个数
					var symbol;

					clearRoutes();
					symbol = new PictureMarkerSymbol({
  						"width": 45,
  						"height": 69,
  						"type": "esriPMS"
					});
					switch (flag) {
						case 1:
							symbol.url = "pathwayPoint1.png";
							break;
						case 2:
							symbol.url = "pathwayPoint2.png";
							break;
						case 3:
							symbol.url = "pathwayPoint3.png";
							break;
						case 4:
							symbol.url = "pathwayPoint4.png";
							break;
						case 5:
							symbol.url = "pathwayPoint5.png";
							menuItem.disabled = true;
							break;
					}
					var graphic = new Graphic(geometryJsonUtils.fromJson(currentLocation.toJson()), symbol);
					routeParams.stops.features.push(
						map.graphics.add(graphic)
						);
					editToolbar.activate(Edit.MOVE, graphic);
					pathwayPrve = graphic;

					for (var i = routeParams.stops.features.length-1; i>=0; i--) {
						if (routeParams.stops.features[i].symbol.url === "originPoint.png") {
							num++;
						}
						if (routeParams.stops.features[i].symbol.url === "endPoint.png") {
							num ++;
						}
					}

					if (num == 2){
						routeTask.solve(routeParams, showRoute, errorHandler);
					}

				}
			}));

			ctMenuForMap.addChild(new MenuItem({
				label: "设为终点",
				onClick: function (evt) {
					var num = 0;

					if (flag2) {//终点只能有一个
						for (var i = routeParams.stops.features.length-1; i>=0; i--) {
							if (routeParams.stops.features[i].symbol.url === "endPoint.png") {
								routeParams.stops.features.splice(i, 1)[0];
							}
						}
						map.graphics.remove(endPrve)
						clearRoutes();
					}

					var symbol = new PictureMarkerSymbol({
  						"url": "endPoint.png",
  						"width": 45,
  						"height": 61,
  						"type": "esriPMS"

					});
					var graphic = new Graphic(geometryJsonUtils.fromJson(currentLocation.toJson()), symbol);
					routeParams.stops.features.push(
						map.graphics.add(graphic)
						);
					editToolbar.activate(Edit.MOVE, graphic);

					endPrve = graphic;
					flag2 = true;

					for (var i = routeParams.stops.features.length-1; i>=0; i--) {
						if (routeParams.stops.features[i].symbol.url === "originPoint.png") {
							num++;
						}
						if (routeParams.stops.features[i].symbol.url === "endPoint.png") {
							num ++;
						}
					}

					if (num == 2){
						routeTask.solve(routeParams, showRoute, errorHandler);
					}
				}
			}));

			ctMenuForMap.startup();
			ctMenuForMap.bindDomNode(map.container);
		}

		function getMapPointFromMenuPosition (box) {
			var x = box.x, y = box.y;
			var screenPoint = new Point(x - map.position.x, y - map.position.y);
			return map.toMap(screenPoint);
		}

		function showRoute (result) {

			var routeResults = result.routeResults;
			routes.push(
				map.graphics.add(routeResults[0].route.setSymbol(routeSymbol))
				);
			var msgs = ["服务器消息："];
		    for (var i = 0; i < result.messages.length; i++) {
		        msgs.push(result.messages[i].type + " : " + result.messages[i].description);
		    }
		    if (msgs.length > 1) {
		        alert(msgs.join("\n - "));
		    }
		}

		function clearRoutes() {
    		for (var i = routes.length - 1; i >= 0; i--) {
        		map.graphics.remove(routes.splice(i, 1)[0]);
    		}
    		routes = [];
		}

		function errorHandler(err) {
    		alert("发生错误\n" + err.message + "\n" + err.details.join("\n"));
		}

	})

未解决的问题：

1、我目前是通过“Click”地图的事件来触发pointMove（），我需要解决的是在任何一个graphic开始移动的时候就触发pointMove（）。

2、在创建了一个新的点之后，之前创建的点就不能够被拖拽了，即只有新建的点才有被拖拽的功能，即是editToolbar.activate(Edit.MOVE, graphic);这个方法在其他店创建之后便被其他点的graphic给更换了（代码里我是用不同的全局变量放到这个方法里面即如originPrve = graphic;editToolbar.activate(Edit.MOVE, originPrve);，但是也没有）。

3、目前我只能把点设置在公路图层上面，不能像百度地图一样在地图上随意的设置点虽然我大概了解实现这一功能的原理，但还是不知道怎么去做。。。这或许是在开发路径模块中遇到最大的问题了~

最后，Stick to write blog！