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 官网在线例子 ...
随机推荐
- .net core2.1 使用 dynamic 类型报错
在net core2.0项目中使用 dynamic 无法编译通过 异常信息:缺少编译器要求的成员"Microsoft.CSharp.RuntimeBinder.CSharpArgumentI ...
- [Swift]LeetCode32. 最长有效括号 | Longest Valid Parentheses
Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...
- [Swift]LeetCode674. 最长连续递增序列 | Longest Continuous Increasing Subsequence
Given an unsorted array of integers, find the length of longest continuous increasing subsequence (s ...
- C# listview展示表格格式
有时候我们需要展示表格格式的数据,首先想到的是用datagridview控件,比如更改datagridview某一行的数据,这样操作起来就比较麻烦,而listview属于轻量级,刷新和更改相对来说效率 ...
- scala的map操作
新建一个不定参数的 map: var cs = mutable.Map.empty[String, String] 对其进行赋值: cs += (key -> value) 读取里面所有的 ke ...
- BBS论坛(八)
8.1.发送邮箱验证码功能 (1)cms/resetemail.html {% from 'common/_macros.html' import static %} {% block head %} ...
- javascript ES6 新特性之 Promise,ES7 async / await
es6 一经推出,Promise 就一直被大家所关注.那么,为什么 Promise 会被大家这样关注呢?答案很简单,Promise 优化了回调函数的用法,让原本需要纵向一层一层嵌套的回调函数实现了横向 ...
- Linux(2)---记录一次线上服务 CPU 100%的排查过程
Linux(2)---记录一次线上服务 CPU 100%的排查过程 当时产生CPU飙升接近100%的原因是因为项目中的websocket时时断开又重连导致CPU飙升接近100% .如何排查的呢 是通过 ...
- C#版[击败100.00%的提交] - Leetcode 6. Z字形变换 - 题解
版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...
- WebSocket刨根问底(一)
年初的时候,写过两篇博客介绍在Spring Boot中如何使用WebSocket发送消息[在Spring Boot框架下使用WebSocket实现消息推送][在Spring Boot框架下使用WebS ...