前言

关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 3.x 的好素材。

内容概览

  1. 基于 arcgis api 3.x 实现地图最短路径分析
  2. 源代码 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 入门开发系列十三地图最短路径分析(附源码下载)的更多相关文章

  1. arcgis api 3.x for js 入门开发系列十一地图统计图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  2. arcgis api 3.x for js 入门开发系列四地图查询(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  3. arcgis api 3.x for js 入门开发系列三地图工具栏(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. arcgis api 3.x for js入门开发系列九热力图效果(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  5. arcgis api 3.x for js 入门开发系列八聚合效果(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  6. arcgis api 3.x for js 入门开发系列七图层控制(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载)

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...

  8. openlayers4 入门开发系列之热力图篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. openlayers4 入门开发系列之图层控制(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

随机推荐

  1. HTTP协议概念与特点,HTTP的状态码,HTTPS是什么?

    很多人在打开网页的时候,在浏览器地址栏里都会看到http  ,在Java WEB里,HTTP也是个重点内容,今天我们就来详细了解和学习HTTP . HTTP是Hyper Text Transfer P ...

  2. [Swift]LeetCode153. 寻找旋转排序数组中的最小值 | Find Minimum in Rotated Sorted Array

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  3. [Swift]LeetCode246.对称数 $ Strobogrammatic Number

    A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...

  4. [Swift]LeetCode496. 下一个更大元素 I | Next Greater Element I

    You are given two arrays (without duplicates) nums1 and nums2 where nums1’s elements are subset of n ...

  5. [C#]批量修改文件后缀名

    代码: /// <summary> /// 修改文件后缀 /// </summary> /// <param name="extension"> ...

  6. BBS论坛(二十二)

    22.1.七牛js上传轮播图图片 (1)common/zlqiniu.js 'use strict'; var zlqiniu = { 'setup': function (args) { var d ...

  7. How does the vuejs add the query and walk the object?

    让这个老实返回的页面添加特殊路由,这个页面常常都是登录注册.这次我们根据登录举例. 省略 { path:'/login?url=:url', name:'loginfirst', component: ...

  8. linux-centerOs6.8安装nginx与配置

    一:安装nginx 1.安装gcc(命令:yum install gcc)备注:可以输入gcc -v查询版本信息,查看是否自带安装 2.安装pcre(命令:yum install pcre-devel ...

  9. Elasticsearch Search API

    当执行一个搜索时,它将这个搜索请求广播给所有的索引分片.可以通过提供路由参数来控制要搜索哪些分片.例如,当检索tweets这个索引时,路由参数可以设置为用户名: curl -X POST " ...

  10. Unity 本地坐标到世界坐标,世界坐标到本地坐标

    世界=>本地 public GameObject mTarget; public GameObject mPar; //这个注意一定要是mTarget的第一父物体. // Use this fo ...