arcgis前端(1)----->基础篇-Map基础的使用
前言
arcgis是什么？arcgis有什么用？为什么要用arcgis？关于arcgis相关的信息这里不再追述。这里从0开始学习arcgis的用法。本篇将从Map开始。
本篇读完能干什么？
看完本篇后，将可以在页面上显示一些常用的基础底图。例如：
等等.
一、基本语法
arcgis的引入/安装：
arcgis的安装和其它框架也大同小异：npm or cdn
使用cdn:
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.24/"></script>
使用npm引入:
npm install @arcgis/core
//使用
import Map from "@arcgis/core/Map";
二、加载地图
相关代码：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Intro to MapView - Create a 2D map | Sample | ArcGIS API for JavaScript 4.24</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<script>
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
// 创建一个地图
const map = new Map({
basemap: "topo-vector",/**
设置底图的类型，可以配置需要API密匙类型子类 和 不需要API密匙类型子类
需要API密匙类型即需要登录才能访问，不需要API密匙类型则不用。这里例举几种子类：
需要密匙的：arcgis-streets（街道），arcgis-streets-relief（街道（带浮雕）），arcgis-topographic（地形），arcgis-oceans（海洋）
不需要密匙的：streets-vector（世界街道），oceans（世界海洋），topo-vector（世界地形图）
具体详细的类型可以看官网api：https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#basemap
*/
});
// 创建一个map视图 后期视图上的操作都通过这个对象来操作
const view = new MapView({
container: "viewDiv",//html容器，即将地图添加到哪个容器里
map: map,
zoom: 4,
// center: [15, 65] // longitude, latitude 地图初始位置
logo: false //不显示Esri的logo
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>