显示你的位置

https://developers.arcgis.com/javascript/latest/tutorials/display-your-location/

概览

学习在地图上发现与追踪你的设备位置.

简单的说就是手机设备上的 H5 Geolocation API 可以获得用户的定位 (经纬度), 然后利用 ArcGIS 来显示当前位置.

其中使用到了 Locate 和 Track 小部件.

需要注意的是, 必须在 https 下运行. 可以借助与 localhost 来实现

要点

  • 使用 H5 的 API 获取经纬度
  • 使用 Locate 小部件来显示定位, 通过实现 goToOverride
  • 使用 Track 小部件来显示定位,使用 Graphic 来显示位置

补充: Geolocation API 的使用

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition((pos: GeolocationPosition) => {
    console.log('定位坐标: ', pos);
  })
} else {
  console.log('浏览器不支持 Geolocation 接口')
}

基本步骤

  1. 创建项目
  2. 获取 APIKey
  3. 修改 basemap 和 map position
  4. 获得你的位置
  5. 跟踪你的位置
  6. 运行 App

详细步骤

创建项目 (略)

设置 api key (略)

修改 basemap 以及地图的位置

在 map 对象中, 将 basemap 设置为 arcgis/navigation, 该 basemap 为定位做了优化. 并设置视图中的 缩放与经纬度.

const map = new Map({
  basemap: 'arcgis/navigation'
})
const view = new MapView({
  map: map,
  container: div.value,
  center: [-40, 28],
  zoom: 2
})

发现你的位置

Find your geolocation

ArcGIS 提供了 Locate 小部件 (widget), 该小部件使用 H5 的 API, 获得浏览器的定位. 将其添加到地图中, 使用该小部件来获取你的位置.

基本方式:

  1. 实例化小部件, 并进行配置.
  2. 调用 view (MapView 实例)的 ui.add 方法将其添加到页面中.
import Locate from '@arcgis/core/widgets/Locate'
const locate = new Locate({
  view: view, 
  useHeadingEnabled: false, // 控制地图不会旋转
  goToOverride: function (view, options) {
    options.target.scale = 1500 // 设置缩放比
    return view.goTo(options.target) // 定位
  }
})
view.ui.add(locate, 'top-left')

然后运行程序即可看到定位工具, 点击后即可进行定位, 当前位置会在一个蓝色小点上呈现, 单击小点有额外操作.

image-20231113113152426

image-20231113113156942

image-20231113113201652

跟踪你的位置

Track your location

Track 小部件可以跟踪你的位置, 并且默认会根据设备情况旋转地图.

通常只需要一个地理定位小部件, 因此移除 Locate 小部件, 添加 Track 小部件

const track = new Track({
  view: view,
  graphic: new Graphic({
    symbol: {
      type: "simple-marker",
      size: "12px",
      color: "green",
      outline: {
        color: "#efefef",
        width: "1.5px"
      }
    }
  }),
  useHeadingEnabled: false
});
view.ui.add(track, "top-left");

jk: 这里对这个类, 属性都有一些盲点

在 TS 的语法校验下, 该代码会报错, 语法校验显示只允许有 color 属性.

image-20231113145000568

2023年11月13日 原因已找到, ArcGis 遵循了 OOP 语言描述的类结构, 这里的 Symbol, Geometry 等都是抽象类, 需要具体的类来实现, 而具体类中已经定义了只读的 type 等属性, 而抽象类中有没有一些公共属性, 所以会报错. 这里是因为使用 SimpleMarkerSymbol 类型, 这里使用构造函数来实例化对象, 写成下面样子就可以了:

import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
// ...
const track = new Track({
  view: view,
  graphic: new Graphic({
    symbol: new SimpleMarkerSymbol({
      // type: "simple-marker", // 类型中已内置, 不用提供该属性
      size: "12px",
      color: "green",
      outline: {
        color: "#efefef",
        width: "1.5px"
      }
    })
  }),
  useHeadingEnabled: false
});
view.ui.add(track, "top-left");

置于类型引用的路径可以通过查阅文档来参考:

image-20231113175118592

然后运行程序:

image-20231113115958141

注意, 好像手机上要获取定位信息, 需要使用 https 协议.

Last Updated:
Contributors: jk