Каталог статей
В этом руководстве рассказывается, как создать простую карту в виде 2D-карты с использованием модуля AMD.
1 SDK AMD Citation ArcGIS Maps для JavaScript
В теге <head> укажите ссылку на ArcGIS Maps SDK для JavaScript, используя теги <script> и <link>:
<!DOCTYPE html>
<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</title>
<!-- 从 CDN 加载 ArcGIS Maps SDK for JavaScript -->
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
<!-- 引用 main.css 样式表 -->
<script src="https://js.arcgis.com/4.27/"></script>
</head>
</html>
<script>
Отметьте для загрузки ArcGIS Maps SDK для JavaScript из CDN. При выпуске новой версии API обновите номер версии, чтобы он соответствовал недавно выпущенной версии.
<link>
Тег ссылается на таблицу стилей main.css, которая содержит определенные стили для деталей и компонентов Esri.
2 Загрузите соответствующий модуль
В тегах <body>
внутри тегов <script>
загружайте определенные модули из API. Загрузите следующие модули, используя синтаксис из фрагмента ниже:
<script>
require([ "esri/Map", "esri/views/MapView" ], (Map, MapView) => {
// Code to create the map and view will go here
});
</script>
Размещение кода JavaScript
<script>
внутри тегов полезно для создания простых страниц или экспериментов, но не подходит для более крупных приложений. При создании больших приложений весь JavaScript следует размещать в отдельных файлах .js.
Глобальная require()
функция используется для загрузки модуля AMD API.
3 Создайте карту
Новые карты создаются Map
с помощью , который является ссылкой на класс Map, загруженный Map
из модуля . Вы можете указать свойства карты, передав объект конструктору, например .esri/Map
Map
basemap
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
const map = new Map({
basemap: "topo-vector"
});
});
Другие basemap
включают:
satellite
(спутник)hybrid
(смешивание)gray-vector
(серый вектор)dark-gray-vector
(темно-серый вектор)oceans
(океан)streets-vector
(уличный вектор)osm
national-geographic
(Национальная география)streets-night-vector
(вектор уличной ночной сцены).
4 Создайте 2D-вид
Ссылка на представление Views
как на узел контейнера файлов HTML позволяет пользователю просматривать карту на странице HTML. Создайте новый MapView
и установите его свойства, передав объект его конструктору:
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv", // Reference to the DOM node that will contain the view
map: map // References the map object
});
});
В этом фрагменте мы container
устанавливаем атрибут для имени узла DOM, содержащего карту, в этом случае мы используем <div>
атрибут id элемента. map
Свойство ссылается на объект карты, который мы создали на предыдущем шаге. См. документацию MapView для получения информации о других свойствах, которые можно установить для вида, включая центр карты center
и масштаб , которые можно использовать для определения начального экстента вида.zoom
Доступны два типа просмотра: вид карты (для просмотра 2D-карт) и вид сцены (для просмотра 3D-карт). Нажмите здесь , чтобы узнать больше о создании карт в 3D-виде.
5 Определите содержание страницы
Теперь JavaScript, необходимый для создания карты и представления, готов! Следующим шагом будет добавление соответствующего HTML-кода для просмотра карты.
В этом примере HTML очень прост: добавьте тег <body>, который определяет, что отображается в браузере, и добавьте элемент <body> <div>
в тело, где будет создано представление.
<body>
<div id="viewDiv"></div>
</body>
<div>
Идентификатор должен соответствовать идентификатору, переданному свойству контейнера viewDiv
в MapView в конструкторе .container
6 стилей CSS
Используйте <head>
теги внутри <style>
тегов для стилизации содержимого страницы. Чтобы карта заполнила окно браузера, <style>
добавьте в тег страницы следующий CSS:
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
7 полный код
код:
<!DOCTYPE html>
<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</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<!-- 从 CDN 加载 ArcGIS Maps SDK for JavaScript -->
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
<!-- 引用 main.css 样式表 -->
<script src="https://js.arcgis.com/4.27/"></script>
</head>
<body>
<!-- 存放地图内容的div -->
<div id="viewDiv"></div>
<script>
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
// 创建Map对象,指定地图
const map = new Map({
basemap: "topo-vector"
});
// 创建MapView对象
const view = new MapView({
container: "viewDiv", // viewDiv为容器div的id
map: map, // 地图所在的Map对象
zoom: 4, // 初始LOD缩放等级(0-23) level of detail (LOD)
// scale: 50000000, // 设置初始比例尺为 1:50,000,000 zoom和scale选其一即可
center: [108, 32] // 地图初始中心位置经纬度 [longitude,latitude]
});
});
</script>
</body>
</html>
Отображение результата:
Справочная ссылка:
https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/