Слои объектов, согласно ESRI, один слой, который может быть создан из «Картографического сервиса или Сервиса объектов; Элементы портала ArcGIS Online или ArcGIS Enterprise; или из множества клиентских функций. Слой может быть либо пространственным (имеет географические объекты), либо непространственным (таблица).». Для упрощения у вас есть один набор данных, содержащий точки, линии или полигоны (пространственные данные), которые могут содержать атрибуты для дальнейшего обогащения. набор данных.
В этой демонстрации мы сосредоточимся на слоях объектов, но вы можете увидеть краткий обзор всех типов слоев от ESRI здесь. Сегодня мы сосредоточимся на том, чтобы узнать больше о том, что они собой представляют и что мы можем с ними сделать, чтобы начать становиться опаснее в наших навыках веб-картографирования ГИС.
В первой статье этой серии рассказывается, как создать нашу первую веб-карту, и мы будем использовать ее, чтобы взять оттуда наш код.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Add Web-Map Tutorial</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.27/"></script>
<script>
require(["esri/config", "esri/Map", "esri/views/MapView"], function(esriConfig, Map, MapView) {
esriConfig.apiKey = "AAPKa00357ac596c4526a5a150c54634c8dbtbEsP1xHa3X68Xs0gqUrrP-yPU5u3tuYkN5jhLC5bOOOjyycCGwQFxevruIKgg68";
const map = new Map({
basemap: "arcgis-dark-gray"// Basemap layer service
});
const view = new MapView({
map: map,
center: [-74.006, 40.712], // Longitude, latitude
zoom: 13, // Zoom level
container: "viewDiv" // Div element
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Если вы пытаетесь изучить ArcGIS JavaScript SDK, вы, скорее всего, будете использовать векторные слои чаще, чем любые другие типы пространственных данных. Вы можете выполнять такие вещи, как запросы, всплывающие окна, редактирование и рендеринг.
Продолжая с того места, где мы остановились в Уроке 1, давайте получим некоторые данные, чтобы добавить их на нашу карту Нью-Йорка. Существует множество отличных ресурсов для бесплатных данных ГИС, но для Нью-Йорка я рекомендую Открытые данные Нью-Йорка. Вы можете фильтровать данные Карты, что обязательно даст вам данные, которые можно добавить на нашу карту.
Чтобы начать работу с некоторыми полезными данными, я скачаю Данные жалоб полиции Нью-Йорка за 2023 год. Нам нужно скачать это, сначала нажав кнопку экспортировать в верхней части страницы, а затем загрузив данные через шейп-файл.
Затем откройте свою учетную запись разработчиков ArcGIS, где мы можем хранить данные и получать к ним доступ через URL-адрес. Помните, вам нужно создать бесплатную учетную запись разработчика здесь.
На панели инструментов разработчика нажмите «Слои» на верхней панели, а затем выберите «Импорт данных».
Добавьте свои .ZIPPED, оставьте их .ZIPPED!!! Добавьте свои шейп-файлы .ZIPPED, дайте им имя и добавьте метаданные для отличников.
Повторите этот процесс, если вы хотите загрузить и добавить больше слоев. Когда вы успешно загрузите свои слои, вы получите святой Грааль, красивый нетронутый URL, который позволяет нам ссылаться на него в нашем приложении!
Когда вы увидите в списке Наследование доступа для модуля, вы хотите включить его в свой набор данных. Вы не обязаны добавлять его в свой требуемый оператор, но он может иметь дополнительное преимущество, облегчая чтение вашего кода. Итак, давайте будем хорошими самаритянами в программировании и добавим это в оператор требования.
Добавьте модуль FeatureLayer в ваше заявление о требованиях.
require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], function(esriConfig, Map, MapView,FeatureLayer)
Затем, после ваших модулей «Map» и «MapView», добавьте класс «FeatureLayer», установив его в переменную. Я назвал свой «cL», потому что это наш «уровень жалоб».
const cL = new FeatureLayer({
url: "YOUR_URL_FROM_YOUR_DEVELOPER_ACCOUNT",
});
Затем добавьте векторный слой на карту, следуя схеме 1.) Сначала создайте его. 2.) Затем добавьте его на дисплей. В этом случае мы создали наш векторный слой, а затем добавили его на нашу веб-карту.
map.add(cL);
Для испытания повторите этот шаг, чтобы добавить дополнительные слои. Если у вас возникнут проблемы, возможно, ваши слои настроены как частные в вашей учетной записи разработчика. Вы можете сделать их общедоступными на данный момент, просто не делитесь своими URL-адресами.
И точно так же у нас есть миллионы жалоб, визуализированных на веб-карте!
Наконец, добавьте пользовательский шаблон всплывающего окна к нашему пространственному слою, чтобы сделать веб-карту более интерактивной. Используя наши поля из пространственного слоя, мы можем узнать больше о наших точках.
const cL = new FeatureLayer({
url: "https://services8.arcgis.com/iwUICPhW6IlV9RNt/arcgis/rest/services/nypd_complaint_map_year_to_date_1/FeatureServer/0",
popupEnabled: true,
popupTemplate: {
title: "{CMPLNT_FR_DT}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "CMPLNT_NUM",
label: "Complaint Number",
},
{
fieldName: "OFNS_DESC",
label: "Offense",
},
{
fieldName: "BORO_NM",
label: "Borough",
},
],
},
],
},
});
Нажмите на карту, чтобы начать узнавать о жалобах по всему городу!
Вот наш готовый код для справки:
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<title>Add Web-Map Tutorial</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.27/"></script>
<script>
require([
"esri/config",
"esri/layers/FeatureLayer",
"esri/Map",
"esri/views/MapView",
], function (esriConfig, FeatureLayer, Map, MapView) {
esriConfig.apiKey =
"YOUR_API_KEY";
const cL = new FeatureLayer({
url: "YOUR_URL",
popupEnabled: true,
popupTemplate: {
title: "{CMPLNT_FR_DT}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "CMPLNT_NUM",
label: "Complaint Number",
},
{
fieldName: "OFNS_DESC",
label: "Offense",
},
{
fieldName: "BORO_NM",
label: "Borough",
},
],
},
],
},
});
const map = new Map({
basemap: "arcgis-dark-gray", // Basemap layer service
});
const view = new MapView({
map: map,
center: [-74.006, 40.712], // Longitude, latitude
zoom: 13, // Zoom level
container: "viewDiv", // Div element
});
map.add(cL);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
На этом все! Оставайтесь с нами, скоро появятся новые блоги! Пожалуйста, поставьте лайк и оставьте комментарий ниже, если вам понравился контент или что вы хотели бы увидеть в будущих демонстрациях.
