了解如何在地圖中顯示點(diǎn)、線和多邊形圖形。
圖形是用于在地圖或場景中顯示點(diǎn)、線、多邊形和文本的視覺元素。圖形由幾何圖形、符號(hào)和屬性組成，單擊時(shí)可以顯示彈出窗口。您通常使用圖形來顯示未連接到數(shù)據(jù)庫（即GPS位置）的地理數(shù)據(jù)。
在本教程中，您將學(xué)習(xí)如何將地圖上的點(diǎn)、線和多邊形顯示為圖形。
筆記
有關(guān)在應(yīng)用程序中實(shí)現(xiàn)圖形的更多背景信息，請(qǐng)?jiān)L問《映射API和位置服務(wù)》指南中的圖形、樣式和數(shù)據(jù)可視化。
步驟
創(chuàng)建新筆
若要開始，請(qǐng)完成“顯示地圖”教程或使用此筆。
設(shè)置API鍵
要訪問ArcGIS服務(wù)，您需要一個(gè)API密鑰。
轉(zhuǎn)到您的儀表板以獲取API密鑰。
在CodePen中，將apiKey設(shè)置為您的密鑰，這樣它就可以用于訪問basemap層和位置服務(wù)。
esriConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
basemap: "arcgis-topographic" // Basemap layer service
});
添加模塊
在require語句中，添加Graphics和GraphicsLayer模塊。
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) {
添加圖形層
圖形層是圖形的容器。它與地圖視圖一起用于顯示地圖上的圖形?？梢詫⒍鄠€(gè)圖形圖層添加到地圖視圖中。圖形圖層顯示在所有其他圖層的頂部。
創(chuàng)建并添加GraphicsLayer以存儲(chǔ)圖形。
const view = new MapView({
map: map,
center: [-118.80500,34.02700], //Longitude, latitude
zoom: 13,
container: "viewDiv"
});
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
添加點(diǎn)圖形
點(diǎn)圖形是使用點(diǎn)和標(biāo)記符號(hào)創(chuàng)建的。一個(gè)點(diǎn)用經(jīng)度（x）和緯度（y）坐標(biāo)定義，一個(gè)簡單的符號(hào)用顏色和輪廓定義。Point和SimpleMarkerSymbol類用于創(chuàng)建點(diǎn)圖形。
創(chuàng)建將用于創(chuàng)建圖形的點(diǎn)和simpleMarkerSymbol。
const point = { //Create a point
type: "point",
longitude: -118.80657463861,
latitude: 34.0005930608889
};
const simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // Orange
outline: {
color: [255, 255, 255], // White
width: 1
}
};
創(chuàng)建圖形并設(shè)置幾何圖形和符號(hào)特性。Graphic類在構(gòu)造時(shí)將自動(dòng)播放point和simpleMarkerSymbol。
const pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});
graphicsLayer.add(pointGraphic);
驗(yàn)證點(diǎn)圖形是否位于point Dume Beach。
添加線條圖形
直線圖形是使用多段線和直線符號(hào)創(chuàng)建的。多段線定義為一系列點(diǎn)和空間參照。Polyline和SimpleLineSymbol類用于創(chuàng)建線形圖形。
定義將用于創(chuàng)建圖形的多段線和simpleLineSymbol。
// Create a line geometry
const polyline = {
type: "polyline",
paths: [
[-118.821527826096, 34.0139576938577], //Longitude, latitude
[-118.814893761649, 34.0080602407843], //Longitude, latitude
[-118.808878330345, 34.0016642996246] //Longitude, latitude
]
};
const simpleLineSymbol = {
type: "simple-line",
color: [226, 119, 40], // Orange
width: 2
};
創(chuàng)建圖形并設(shè)置幾何圖形和符號(hào)特性。Graphic類將在創(chuàng)建多段線和simpleLineSymbol時(shí)自動(dòng)播放。
const polylineGraphic = new Graphic({
geometry: polyline,
symbol: simpleLineSymbol
});
graphicsLayer.add(polylineGraphic);
驗(yàn)證線條圖形是否沿Westward Beach定位。
添加多邊形圖形
多邊形圖形是使用多邊形和填充符號(hào)創(chuàng)建的。多邊形被定義為描述閉合邊界和空間參考的一系列點(diǎn)（環(huán)）。Polygon和SimpleFillSymbol類用于創(chuàng)建和顯示多邊形圖形。
定義將用于創(chuàng)建圖形的多邊形和simpleFillSymbol
// Create a polygon geometry
const polygon = {
type: "polygon",
rings: [
[-118.818984489994, 34.0137559967283], //Longitude, latitude
[-118.806796597377, 34.0215816298725], //Longitude, latitude
[-118.791432890735, 34.0163883241613], //Longitude, latitude
[-118.79596686535, 34.008564864635], //Longitude, latitude
[-118.808558110679, 34.0035027131376] //Longitude, latitude
]
};
const simpleFillSymbol = {
type: "simple-fill",
color: [227, 139, 79, 0.8], // Orange, opacity 80%
outline: {
color: [255, 255, 255],
width: 1
}
};
創(chuàng)建圖形并設(shè)置幾何圖形和符號(hào)特性。Graphic類將在創(chuàng)建多邊形和simpleFillSymbol時(shí)自動(dòng)播放它。
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
});
graphicsLayer.add(polygonGraphic);
驗(yàn)證多邊形圖形是否位于馬湖里維埃拉。
創(chuàng)建彈出窗口
單擊圖形時(shí)，可以顯示圖形的彈出窗口。創(chuàng)建多邊形圖形以顯示包含圖形名稱和描述的彈出窗口的代碼使用attributes和popupTemplate屬性。
在主函數(shù)中，定義popupTemplate和attributes。
const popupTemplate = {
title: "{Name}",
content: "{Description}"
}
const attributes = {
Name: "Graphic",
Description: "I am a polygon"
}
更新polygonGraphic以包含popupTemplate和屬性屬性。
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
attributes: attributes,
popupTemplate: popupTemplate
});
graphicsLayer.add(polygonGraphic);
完整代碼
<html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS Maps SDK for JavaScript Tutorials: Add a point, line, and polygon</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",
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) {
esriConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
basemap: "arcgis-topographic" //Basemap layer service
});
const view = new MapView({
map: map,
center: [-118.80500,34.02700], //Longitude, latitude
zoom: 13,
container: "viewDiv"
});
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
const point = { //Create a point
type: "point",
longitude: -118.80657463861,
latitude: 34.0005930608889
};
const simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // Orange
outline: {
color: [255, 255, 255], // White
width: 1
}
};
const pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});
graphicsLayer.add(pointGraphic);
// Create a line geometry
const polyline = {
type: "polyline",
paths: [
[-118.821527826096, 34.0139576938577], //Longitude, latitude
[-118.814893761649, 34.0080602407843], //Longitude, latitude
[-118.808878330345, 34.0016642996246] //Longitude, latitude
]
};
const simpleLineSymbol = {
type: "simple-line",
color: [226, 119, 40], // Orange
width: 2
};
const polylineGraphic = new Graphic({
geometry: polyline,
symbol: simpleLineSymbol
});
graphicsLayer.add(polylineGraphic);
// Create a polygon geometry
const polygon = {
type: "polygon",
rings: [
[-118.818984489994, 34.0137559967283], //Longitude, latitude
[-118.806796597377, 34.0215816298725], //Longitude, latitude
[-118.791432890735, 34.0163883241613], //Longitude, latitude
[-118.79596686535, 34.008564864635], //Longitude, latitude
[-118.808558110679, 34.0035027131376] //Longitude, latitude
]
};
const simpleFillSymbol = {
type: "simple-fill",
color: [227, 139, 79, 0.8], // Orange, opacity 80%
outline: {
color: [255, 255, 255],
width: 1
}
};
const popupTemplate = {
title: "{Name}",
content: "{Description}"
}
const attributes = {
Name: "Graphic",
Description: "I am a polygon"
}
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
attributes: attributes,
popupTemplate: popupTemplate
});
graphicsLayer.add(polygonGraphic);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
運(yùn)行應(yīng)用程序
在CodePen中，運(yùn)行代碼以顯示地圖。
地圖應(yīng)顯示所有三種圖形。當(dāng)您單擊多邊形時(shí)，它應(yīng)該顯示一個(gè)彈出窗口。文章來源：http://www.zghlxwxcb.cn/news/detail-645758.html
注明：翻譯自esri，僅供個(gè)人查閱使用，侵刪文章來源地址http://www.zghlxwxcb.cn/news/detail-645758.html
到了這里，關(guān)于ArcGIS API for JavaScript 4.x 教程（四） 添加點(diǎn)、線和多邊形的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
