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

今年毕业，进入公司的第一个任务就是单独负责一个项目的地图模块，用ArcGIS API for JavaScript来开发web地图。花了大概一个礼拜的时间学会了安装和搭建ArcGIS Server和ArcGIS DeskTop并且成功的发布了第一个本地的地图服务，之后花了大概1个月的时间来了解ArcGIS for JavaScript的官方API和Sample。由于官方的文档都是英文的，刚开始还真是很难看的懂（或许是当时太浮躁了）。但时间久了也就慢慢的进入状态了，每天都能够学到不同的知识点，这种从无到有的感觉还是蛮爽的。很快的，我发现网络上关于ArcGIS for JavaScript的中文资料和技术博客并不是特别的多，因此我买在当当上买了本相关的书（《Web GIS从基础到开发实践》里面有一些发开的实例和讲解，对于初学者有帮助的）。之后不久，当我投入到关于地图路径的开放后发现了许多网上和书上没有提及或是很难搜索到的问题。因此，我觉得我把我自己所解决掉的一些问题通过写博客的方式来记录下来，一是为了更好的巩固自己所学的技术知识方便之后的“温故”，二是为了给更多的初学者提供一些资料上的参考，为提高他们学习新技术的氛围出一份力。

言归正传，接下来先讲解以下两点：

1、发布路径网络分析服务；

这个步骤有网上有许多相关的讲解，非常的详细（可参考：http://www.cnblogs.com/potential/archive/2012/11/15/2771833.html）。

   2、仿百度的路径搜索操作；

这里我目前只解决了一个问题：右键可以设置起点可终点，无论是设置终点、起点的顺序路径都可以自动生成。效果图如下：

Js代码如下（注：途径点功能尚未完成，只是写了起点和终点的逻辑功能）：

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, flag3 = false;
		var originPrve, endPrve;
		var graphic1, graphic2, graphic3;

		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("load", createToolbarMenu);

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

			createMapMenu();
		}

		function createMapMenu() {
			var ctMenuForMap = new Menu({
				onOpen: function (box) {
					currentLocation = getMapPointFromMenuPosition(box);
					editToolbar.deactivate();
				}
			});
			ctMenuForMap.addChild(new MenuItem({
				label: "设为起点",
				onClick: function (evt) {//起点只能有一个

					if (flag1) {
						// routeParams.stops.features.pop(
						// 	map.graphics.remove(originPrve)
						// );
						if (routeParams.stops.features.length == 2) {
							if (flag3) {
								routeParams.stops.features.splice(1, 1)[0];
							}else {
								routeParams.stops.features.splice(0, 1)[0];
							}
						}else {
							routeParams.stops.features.splice(0, 1)[0];
						}

						// console.log(routeParams.stops.features[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;
					flag1 = true;
					flag3 = true;

					if (routeParams.stops.features.length == 2){
						routeTask.solve(routeParams, showRoute, errorHandler);
					}
				}
			}));

			ctMenuForMap.addChild(new MenuItem({
				label: "设为途径点",
				onClick: function (evt) {
					var symbol = new SimpleMarkerSymbol({
  						"size": 12,
						"angle": -40,
						"style": "esriSMSCross",
						"outline": {
						  "color": [0,255,0],
						  "width": 1,
						  "type": "esriSLS",
						  "style": "esriSLSSolid"
						}
					});
					var graphic = new Graphic(geometryJsonUtils.fromJson(currentLocation.toJson()), symbol);
					map.graphics.add(graphic);
				}
			}));

			ctMenuForMap.addChild(new MenuItem({
				label: "设为终点",
				onClick: function (evt) {

					if (flag2) {//终点只能有一个
						// routeParams.stops.features.pop(
						// 	map.graphics.remove(endPrve)
						// );
						// console.log(routeParams.stops.features.splice(0, 1)[0]);
						// console.log(routeParams.stops.features.length);
						if (routeParams.stops.features.length == 2) {
							if (flag3) {
								routeParams.stops.features.splice(0, 1)[0];
							}else {
								routeParams.stops.features.splice(1, 1)[0];
							}
						}else {
							routeParams.stops.features.splice(0, 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)
						);
					endPrve = graphic;
					flag2 = true;
					flag3 = false;
					if (routeParams.stops.features.length == 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"));
		}

	})

其中routeParams.stops.features.splice(1, 1)[0];的意思是删除stops中第‘1’个点。

routeParams.stops.features.splice(0, 1)[0];的意思是删除stops中第‘0’个点。

flag1，flag2，flag3的设立是逻辑所需要，这个点就留给正在开发的朋友自己的思考咯。

其实在用splice之前我用的是routeParams.stops.features.pop();该方法也有删除stop点的功能，但其删除的只是上一个stop，这样的话就会出现显示效果出错（因为我们点击起点和终点的先后是随意的）。

以上是我不断翻阅API和调试所得出的结果，或许对于正在开始路径开发的朋友会有所帮助。（第一次写博客，表达方式还不够成熟，见谅）

HTML代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>mapMenu</title>
	<link rel="stylesheet" type="text/css" href="http://localhost:8080/gisapi/library/3.9/3.9/js/esri/css/esri.css">
	<link rel="stylesheet" type="text/css" href="http://localhost:8080/gisapi/library/3.9/3.9/js/dojo/dijit/themes/claro/claro.css">
	<script type="text/javascript" src="http://localhost:8080/gisapi/library/3.9/3.9/init.js"></script>
	<script type="text/javascript" src="RoutetTask.js"></script>
</head>
<body class="claro">
	<div id="mapDiv" style="width: 900px; height: 600px; border: 1px solid #000;"></div>
</body>
</html>

Stick to write blog！

时间： 2024-10-29 10:20:06

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

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

最近被一个bug困扰了两天~ 我新发布了一个NAserver(路径分析服务),但是放在之前的代码里面发现不能生成路径.经过我的调试发现并没有代码并没有报错,并且能够返回所生成路径的Graphic layer,但路径就是不能在地图上显示出来! 期间我的解决办法是思考可能造成这个现象的各种原因(写在纸上),然后逐一调试.排除,到最后把我所能够想到的所有可能的原因都排除了... 无可奈何,我开始通过各种Arcgis for Javascript相关的QQ群.甚至是Google到国外的一些论坛去翻阅有没

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

又是高度集中开发路径模块的一天.真希望自己以后都可以如此的专注和高效(虽然知道很难一直都保持这样的状态,我会坚持的~哈哈哈) 言归正传,今天开发了途径点的功能和改进了些相关起点.终点的代码.先说一下我近点遇到的几个主要的问题(最近遇到问题都会把问题手写在纸上,这样能让自己更好的专注于问题本身,能在最短的时间内解决问题并且方便现在写博客) 1.如何像百度地图一样把途径点的个数控制在五个以内.代码如下: ctMenuForMap.addChild(menuItem = new MenuItem({

全国首部arcgis for javascript 二次开发视频教程

百度传课:http://www.chuanke.com/2873165-137674.html 51cto:http://edu.51cto.com/course/course_id-3949.html 网易云课堂:http://study.163.com/course/courseMain.htm?courseId=1270003 CSDN:http://edu.csdn.net/course/detail/1071 课程主要内容: 1.arcgis 基础 2.webgis基础 3.dojo基

arcgis api for js入门开发系列二不同地图服务展示(含源代码)

上一篇介绍了arcgis api离线部署,这篇开始正式介绍arcgis api for js开发:想要学习webgis开发,首先得熟悉了解前端技术,比如界面布局设计的html+css,核心的是javascript(js),arcgis api就是js写的,就是说想要开发gis功能前提下,你得熟悉了解js,不然你连源代码都看不懂.在这里,推荐esri官网的arcgis api for js:https://developers.arcgis.com/javascript/3/jsapi/:里面详细

seajs实现JavaScript 的 模块开发及按模块加载

seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http://seajs.org/docs/#docs 首先看看seajs是怎么进行模块开发的.使用seajs基本上只有一个函数"define" fn.define = function(id, deps, factory) { //code of function- } 使用define函数来进行定

[转]全 Javascript 的 Web 开发架构：MEAN

引言 最近在Angular社区的原型开发者间,一种全Javascript的开发架构MEAN正突然流行起来.其首字母分别代表的是:(M)ongoDB——NoSQL的文档数据库,使用JSON风格来存储数据,甚至也是使用JS来进行sql查询:(E)xpress——基于Node的Web开发框架:(A)agular——JS的前端开发框架,提供了声明式的双向数据绑定:(N)ode——基于V8的运行时环境(JS语言开发),可以构建快速响应.可扩展的网络应用. MEAN的支持者宣称,如果整个开发栈均能使用JS,

《ArcGIS Runtime SDK for Android开发笔记》——离在线一体化技术：离线矢量数据同步

1.前言 上一篇文章中我们实现了离线要素的编辑操作,这一篇中主要介绍离在线一体化技术中最后一个环节离线数据的同步功能,通过对数据的上传,服务器端的版本化管理,实现数据生产管理的整个流程. 转载请注明出处:http://www.cnblogs.com/gis-luq/p/5858062.html 2.demo实现过程 2.1.Demo UI实现 activity_main.xml <?xml version="1.0" encoding="utf-8"?>

JavaScript获取路径

1.设计源码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript获取路径</title

ArcGIS for JavaScript 3.9 本机IIS部署

arcgis 官方网站经常会打不开,天朝人民都懂得!因为将arcgis for javascript 配置到本机访问 首先esri中国下载最新版3.9的API: http://support.esrichina-bj.cn/2011/0223/960.html 下载到本机后 将压缩包解压 复制这个arcgis_js_v39_api/arcgis_js_api到iis的根目录(当然你可以复制到你的项目所在的目录下). 即:C:\Inetpub\wwwroot\目录下 172.16.5.238 为我