显示地图

快速开始的第一个案例.

网址: https://developers.arcgis.com/javascript/latest/tutorials/display-a-map/

这里介绍如何使用 beasemap 层来显示一张地图.

jk 疑惑:

  1. 有哪些层可用, 分别什么含义?
  2. 有哪些地图类型? 各有什么局限性?

一个地图含有数个地理数据层. 一个地图含有一个 basemap 层, 以及可选的一个或多个数据层. 你可以展示一个指定的地图区域, 使用 map view 以及设置 location 和 zoom 级别.

jk:

地图由基本地图层 (basemap ) 和数个数据层 (data layer, 数据层是可选的) 构成.

要显示一个地图区域, 使用 map view, 同时设置位置 (location), 以及缩放比 (zoom).

本教程介绍如果使用地理 basemap 来创建并显示地图.

本教程中的代码, 也作为其他 2D 教程的入门教程.

注意: 要深入地图与层可以参考 地图 API 与位置服务中的 地图, 场景, 层的文档.

要点

  • Map 显示地图
  • MapView 为视口, 以及需要展示的小工具

前期准备

需要 API Key.

步骤

官方文档使用 CodePen 来描述代码, 这里略去

基本步骤分为

  1. 创建项目
  2. 添加 HTML
  3. 引用 API
  4. 导入模块
  5. 获得 API Key
  6. 创建地图 (map)
  7. 创建地图视图 (map view)
  8. 运行

1. 创建项目 (略)

这里采用 vue3 的项目, 与文档中描述的项目不一样.

文档采用的是纯 HTML 页面, 然后使用 script 引入 js.

2. 添加 HTML

添加 HTML, 页面中创建一个 div 用于放置地图, 然后设置 CSS, 让其无内外边距, 并占满整个视口.

需要注意的是, 不要省略 <!DOCTYPE html>, 在 CodePen 中默认是不包含这个标签的.

看过 npm 安装的包, 里面已经内置了 类型信息, 似乎可以直接通过 TS 进行开发.

最简单的开发方式是创建一个 vue 项目, 并启用 TS 功能.

这里给出一个 demo

<template>
  <div>
    <div id="viewDiv"></div>
  </div>
</template>

<style lang="scss" scoped>
#viewDiv {
  // margin: auto 10rem;
  width: 800px;
  height: 600px;
  border: 1px dashed red;
}
</style>

3. 引用 API

文档给出的是直接使用 CDN. 这里在 Vue 项目中使用 ES 模块, 按需引入即可.

4. 添加模块

按需引入

import Config from '@arcgis/core/config' // 配置, 这里用于设置 apiKey
import MapView from '@arcgis/core/views/MapView'
import Map from '@arcgis/core/Map'
import '@arcgis/core/assets/esri/themes/dark/main.css' // 全局样式

5. 获得 Api Key (略)

6. 创建 map

使用 Map 来设置 basemap 层, 以及 API key.

Config.apiKey = 'key...'
const map = new Map({
  basemap: 'arcgis/topographic' // 配置显示的层
})

官网文档使用库的版本是 4.28, 但模块包安装的时候是 4.27, 在使用 basemap 的时候需要修改为 arcgis-topographic, 否则不显示地图.

7. 创建 map view

使用 MapView 来设置地图显示的位置.

const mapView = new MapView({
  map: map,  // 要显示的地图
  center: [-118.805, 34.027], // 地图显示的经纬度
  zoom: 13, // 缩放
  container: div.value // 放置地图的 html 容器
})

这里的 div.value 为

<template>
  <div>
    <div id="viewDiv"></div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const div = ref<HTMLDivElement>()
</script>

注意代码需要放在 onMounted 中执行.

8. 运行程序

即可获得效果.

Last Updated:
Contributors: jk