kikita & Maps

Part 1 中我们准备了底图，Part 2 中我们获取了位置，现在终于开张了，“您有新的 ‘ 饿了乎 ’ 订单到了！” 我们给外卖小哥规划下路线吧！

1 Routing Service

首先，HERE Map API 中提供了一个叫做 Platform 的类，实例化Platform后，我就可以借以访问 HERE Routing Service。 有关 Routing API 的帮助文档，点这里。

1
2
3
4
5
6

var platform = new H.service.Platform({
		app_id: '[YOUR APP ID HERE]',
		app_code: '[YOUR APP CODE HERE]'
});

var router = platform.getRoutingService();

2 Request Route

在发请求之前，需要先至少定义起点和终点，或者必要的时候增加途经点，这些点是通过 WayPointParameterType 对象传递。

为了让代码更简洁易维护，我们在 scripts 目录下创建一个 route.js文件，取代开始直接在 app.js中直接调用 Routing Service 的繁琐。如下，在 route.js 中增加一个用于封装 底图、platform对象、路径规划参数的 HERERoute函数，这个函数也会在浏览器控制台返回简单的错误日志。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// build a function to take the map and platform objects as parameters
function HERERoute (map, platform, routeOptions) {
// access the routing service by calling getRoutingService()
    var router = platform.getRoutingService();
// error handling    
    var onSuccess = function(result) {
      console.log('Route found!', result);
    };
    var onError = function(error) {
      console.error('Oh no! There was some communication error!', error);
    }
  
    router.calculateRoute(routeOptions, onSuccess, onError);
  }

3 Drawing the Route

现在我们可以在控制台看到 response，如何将 route 绘制到地图上呢？

在 Part 1 地图底图准备好的基础之上，我们增加一个获取浏览器当前位置并持续更新的功能，来解决“Where am I ？”的问题。

具体可以通过浏览器的 Geolocation API 来实现。在app.js 脚本中，使用 navigator.geolocation 对象来访问此API。 navigator.geolocation 对象有这样几个方法：getCurrentPosition()，watchPosition()，clearWatch()， 可以帮助我们实现开始的需求。

1 获取位置

首先，通过 getCurrentPosition() 一次性获取浏览器当前位置，在 app.js 中使用如下代码

1

navigator.geolocation.getCurrentPosition(success[, error[, options]]);

各个浏览器都有 Geolocation API 的支持，建议参考相关的帮助文档。这个Demo建议在 Firefox 中测试，因为Chrome似乎禁用从本地文件访问位置。你可以根据需要增加获取位置是否成功后的行为，详情查看 Firefox的开发者文档。

2 持续更新位置

watchPosition() 用于持续“关注” 客户端位置的变化，在每次变化之后，都会将新的位置返回。在 app.js 中增加如下代码，用于在当前位置不断地显示“冰激凌”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function updatePosition (event) {
  var coordinates = {
    lat: event.coords.latitude,
    lng: event.coords.longitude
  };
  var iconUrl = './images/icecream.svg';
  var iconOptions = {
    size: new H.math.Size(26, 34),
    anchor: new H.math.Point(14, 34)
  };
  var markerOptions = {
    icon: new H.map.Icon(iconUrl, iconOptions)
  };
   var marker = new H.map.Marker(coordinates, markerOptions);
  map.addObject(marker);
  map.setCenter(coordinates);
}
// Action
navigator.geolocation.watchPosition(updatePosition);

Quick Start for HERE Map Javascript API

HERE 官网有一个很有趣的Tutorial， Who wants ice cream !?

如果你注册了HERE Developer 账号，很可能会被推送到这个教程的小广告。

假设你是冰激凌店的老板，那么用HERE Map 做个交互式的地图小网页，边测试边记录。

Let’s get our hands dirty……

1. 准备资源

准备如下结构的目录和文件：

1
2
3
4
5
6
7
8

WhoWantsIceCream
|--base_map_set_up.html
|--scripts
	|--app.js
|--images
	|--icecream.svg
|--styles
	|--main.css

2. 设计页面

HTML 的 head 中引用 HERE Map JS API 以及必要的 CSS；

因为工作的事情，最近忙于切换节奏适应新环境，有一个月没来 kikitaMap “巡检”了。果然昨天发现了小故障，七牛云存储的存储空间的临时域名失效了，之上的我的图床也就挂了。涉及到的对象：碎碎念 、Visual Musing 中的全部图片和 Tech Notes 的小部分博客中图片。Just too bad …

解决方法建议

这种情况下只能发工单联系技术支持了，七牛的技术支持回复比较及时，给出了解决方案，如下：

有两种方式来获取文件：

1. 您需要先新建一个同区域存储空间，会分配一个新的测试域名到新空间。
   通过qshell batchcopy 到有域名的同区域空间然后再进行qdownload下载操作
   1）qshell listbucket 原bucket名 list.txt
   ​ （list出全部文件，listbucket的文档）

2）cat list.txt | awk '{print $1}' >list_final.txt
​ （用awk获取list结果的第一列）
3）qshell batchcopy 原bucket名 新bucket名 list_final.txt
​ （复制到新bucket的文件和原bucket文件名一致，batchcopy的文档）
4）qshell qdownload newfilelist.txt
​ （newfilelist.txt为下载的配置文档）

qshell安装包及文档请参考
https://developer.qiniu.com/kodo/tools/1302/qshell

如果您不熟悉命令行工具的安装使用，也可以结合文档最后提供的视频教程
https://developer.qiniu.com/kodo/tools/1302/qshell#9

2. 使用工具qrsctl
   https://developer.qiniu.com/kodo/tools/1300/qrsctl
   qrsctl get <bucket> <file> <file>

实践过程

选择了第一种方式，问题解决，因为看起来像是批量的。

按照提示下载的zip包类似 qshell-v2.2.0.zip 这样的名字，里面包含了Windows，Linux，Mac各操作系统使用的程序。

我以Mac为例，使用Mac自带的 Commandline 访问解压之后的文件夹 qshell-v2.2.0。

在上一篇博客中提到工具还有投影坐标系支持和切片方案（.xml）自动获取的问题尚未解决，更新这篇的目的在于说明问题已经找到了workaround，并且新的版本已经在上周五（9.21）发布了。

问题诊断过程

这两个问题其实本质上是一个问题。

我们知道，当需要生成矢量切片的地图的坐标系不是 3857（web mercator）时，ArcGIS Pro 提供的 Create Vector Tile Package / Index 工具可以自动生成与地图的坐标系统一致的切片方案（.xml）文件，默认放置于 C:\Users\当前用户\AppData\Local\ESRI\Geoprocessing 下。
这是个极好的功能，但是通过python调用此工具时，这个功能是没有提供接口的。此处的疑惑，也咨询了Esri US 的工程师，确实arcpy没有提供像工具UI中的自动计算功能。

在最初的版本中，我尝试使用arcpy.GenerateMapServerCacheTilingScheme_server() 来生成xml文件，可以应对地理坐标系的地图。也是这个过程中遇到了切片原点传参失败这个坑。
投影坐标系的切片原点不像是地理坐标系一样简单粗暴，不同的投影方法都会导致不同的原点坐标，我想过将常用坐标系枚举出来，可是从工具的通用角度来讲，不是个好事。最佳的解决方法还是想办法生成相同的xml，至少可以获取工具生成的xml。

在上个版本的局部更新矢量切片工具中，我和马老师还自命名了“Advanced Vector Tile Package”的矢量切片包，我们在矢量切片包中还打包塞入了切片方案和切片索引面。这样，局部工具在更新这种包时，可以自动解析原包获取xml和index。但是，需要用户事先使用我们定制的 Create Advanced Vector Tile Package 工具来创建矢量切片包。

解决方法

考虑到用户在更新矢量切片之前，已经做过该地图的矢量切片，那么在User那个目录下已经有了对应的xml文件，那么我只要代码中获取了地图的坐标系，然后按照xml的命名规则顺藤摸瓜并顺手牵羊即可。
现实总是比想象骨感。ArcGIS Pro 的 arcpy 中提供的 Map 对象竟然没有提供查询其坐标系统的属性或方法…… 测试基于ArcGIS Pro 2.2.1，写这篇时的最新版本。相信新的版本早晚会有的。好在我还是找到了一个workaround：从map的defaultCamera属性中获取，如下图左边最下部分所示。（现在没有测试环境，图出自讨论时的聊天记录，将就看吧）

使用这个思路之后，解决了本文开头提到的问题，但是要求用户本机user目录下事先有相关的xml文件，没有的话需要打开创建矢量切片工具自动生产一次。

工具的相关代码都进行了更新，采用了新的逻辑，目前可以支持矢量切片工具自身支持的全部坐标系统。并同时保留了，上个版本的局部更新工具中可以自动解析 Advanced Vector Tile Package 功能。