Arcgis使用过程（一）——成功创建地图，地图的基本参数

知道要做地图项目是在去年年初，实际开始做地图项目是23年的9月份，这里想记录一下自己的学习以及使用的过程。

1、听说Arcgis

本来不知道要怎么做地图，想着能不能直接用百度地图和高德地图，但是因为我们需求是需要叠加好几层地图图层，所以不允许使用百度和高德。之后是有同事之前听说过Arcgis，所以提了建议，于是乎我就开始了Arcgis的研究之旅。

2、开始接触Arcgis------实现地图显示

谁懂啊，刚开始就发现Arcgis的文档是英文的，我就想打退堂鼓，可是这毕竟是工作，除非能拿出鞥好的解决方案，否则还得硬着头皮研究。之后就开始了使用有道翻译逐句查看文档之旅。（后面被公司老板推荐了一个翻译工具------DeepL，说是翻译英文更准确一点，用过但是还没有比较出来是否比有道好用，这里做一个推荐）。

接下来说说我学习Arcgis的过程：

（1）一切的一切都是从安装组件开始

安装Arcgis：npm install @arcgis/core

（2）实现地图的基本显示

使用环境：vite+vue3+typescript

代码实现

vue 复制代码

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 1、引入 地图 以及 视图
import Map from "@arcgis/core/Map.js";
import MapView from "@arcgis/core/views/MapView.js";

// 4、地图容器定义
const map = ref<HTMLDivElement | undefined>(undefined);

onMounted(() => {
  createMap();
});

// 创建地图函数
const createMap = () => {
  // 5、创建地图
  const myMap = new Map({
    basemap: "satellite" // basemap: 地图的底图  satellite：卫星图
  });

  // 6、创建视图
  const mapView = new MapView({
    map: myMap, // 创建的地图
    container: map.value, // 地图的容器
    zoom: 17, // 地图的缩放级别：1-19
    center: [108.942342, 34.260985], // 地图的中心点，当前中心点是西安钟楼
  });
}
</script>

<template>
  <!-- 2、创建地图容器 -->
  <div class="map" ref="map"></div>
</template>

<style scoped>
/* 3、设置地图容器的样式 */
.map {
  width: 100vw;
  height: 100vh;
}
</style>

代码效果

3、使用一些基本的参数

（1）Map的常用参数

参数	描述
basemap	基础图层
layers	图层集合（之后再详细描述）

basemap(还有更多可以探索，需要查询文档，我一直用的是卫星图)

取值	含义
satellite	卫星图
terrain	地形图
streets	道路图
dark-dray	深灰色图层

（2）MapView的常用参数

参数	描述
zoom	缩放级别（一般是1-17或1-19）
center	中心点位置（一般为经纬度，但实际上是Point类型的点对象）
constraints	限制条件（例如：minScale-放大比例相关）

修改zoom缩放级别

view(创建的视图).zoom = 15;

总结

以上就是使用Arcgis创建地图以及地图的一些基本的参数，接下来会探索图层的相关内容，包括有哪些常用的图层，根据不同的需求使用不同的图层。