arcgis api 3.x for js 入门开发系列十三地图最短路径分析(附源码下载)
前言
关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 3.x 的好素材。
内容概览
- 基于 arcgis api 3.x 实现地图最短路径分析
- 源代码 demo 下载
本篇实现地图最短路径分析功能效果,截图如下:

具体实现的思路
点击地图获取地名,调用了 arcgis 的地理编码服务,关于地理编码服务制作以及发布章节,感兴趣的请查看这里
点击地图获取地名的核心 js 代码: DCI.Route.locator = new esri.tasks.Locator(MapConfig.locatorUrl); DCI.Route.drawtool = new esri.toolbars.Draw(map, { showTooltips: true }); DCI.Route.drawtool.on("draw-end", DCI.Route.addToMap); //起点位置添加事件 $("#point1").bind("click", function (event) { DCI.Route.pointlayer.clear(); DCI.Route.map.graphics.clear(); DCI.Route.routeParams.stops.features = []; $("#routeStar").val(""); $("#routeEnd").val(""); DCI.Route.flag = true; DCI.Route.map.setMapCursor('crosshair'); DCI.Route.drawtool.activate(esri.toolbars.Draw.POINT); }) //终点位置添加事件 $("#point2").bind("click", function (event) { DCI.Route.flag = false; DCI.Route.map.setMapCursor('crosshair'); DCI.Route.drawtool.activate(esri.toolbars.Draw.POINT); }) /* *根据坐标点获取地名 */ addToMap: function (evt) { if (DCI.Route.flag) var stopSymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/route/NAStartLocx.png", 29, 30); else var stopSymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/route/NAEndLocx.png", 29, 30); var graphic = new esri.Graphic(evt.geometry, stopSymbol); //DCI.Route.map.graphics.add(graphic); DCI.Route.pointlayer.add(graphic); DCI.Route.drawtool.deactivate(); DCI.Route.map.setMapCursor('auto'); DCI.Route.locator.locationToAddress(evt.geometry, 500, DCI.Route.GetAddress, DCI.Route.GetAddresserror); }, /* *获取地名 */ GetAddress: function (evt) { if (DCI.Route.flag) $("#routeStar").val(evt.address.SingleKey); else $("#routeEnd").val(evt.address.SingleKey); }
- 最短分析实现的思路,就是设置路径分析函数执行的参数 routeParams
更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
arcgis api 3.x for js 入门开发系列十三地图最短路径分析(附源码下载)的更多相关文章
- arcgis api 3.x for js 入门开发系列十一地图统计图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列四地图查询(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列三地图工具栏(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js入门开发系列九热力图效果(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列八聚合效果(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列七图层控制(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载)
前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...
- openlayers4 入门开发系列之热力图篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之图层控制(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
随机推荐
- [Swift]LeetCode167. 两数之和 II - 输入有序数组 | Two Sum II - Input array is sorted
Given an array of integers that is already sorted in ascending order, find two numbers such that the ...
- [Swift]LeetCode752. 打开转盘锁 | Open the Lock
You have a lock in front of you with 4 circular wheels. Each wheel has 10 slots: '0', '1', '2', '3', ...
- [Swift]LeetCode959. 由斜杠划分区域 | Regions Cut By Slashes
In a N x N grid composed of 1 x 1 squares, each 1 x 1 square consists of a /, \, or blank space. Th ...
- [Swift]LeetCode1010. 总持续时间可被 60 整除的歌曲 | Pairs of Songs With Total Durations Divisible by 60
In a list of songs, the i-th song has a duration of time[i] seconds. Return the number of pairs of s ...
- docker常用指令01
1.进入交互式界面 docker run (--name=xx命名)-i -t ubuntu /bin/bash docker run --name=con1 -i -t ubuntu /bin/ba ...
- Mac下 .bash_profile 和 .zshrc 两者之间的区别
这是我碰到的需要 source 之后才能使用环境变量的问题,我就不细究了,说说我的看法. .bash_profile 中修改环境变量只对当前窗口有效,而且需要 source ~/.bash_profi ...
- Python内置函数(64)——tuple
英文文档: The constructor builds a tuple whose items are the same and in the same order as iterable‘s it ...
- node开发备注
设置环境变量 // 命令行启动: "scripts": { "start": "export NODE_ENV=dev && node ...
- Windows提权与开启远程连接
1.提权: 建立普通用户:net user 帐户 密码 /add 提权成管理员:net localgroup administrators 帐户 /add 更改用户密码:net user 帐户 密码 ...
- linux-php5.6-安装sftp扩展
一. 更新gc库,添加libssh2库 yum -y install libstdc libgomp cpp gcc libgfortran libssh2 libssh2-devel gcc-gfo ...