使用 ArcGIS API for JavaScript 添加图层
ArcGIS API for JavaScript 是一个强大的工具，用于在网页中展示地理数据，通过该 API，你可以方便地在地图上添加各种类型的图层，包括矢量图层、瓦片图层和影像图层等，本文将详细介绍如何使用 ArcGIS API for JavaScript 添加不同类型的图层，并提供一些常见问题的解答。
1. 引入 ArcGIS API for JavaScript
需要在 HTML 文件中引入 ArcGIS API for JavaScript，你可以通过 CDN 链接来引入：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ArcGIS API for JavaScript Add Layers</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/layers/FeatureLayer"
], function(Map, MapView, TileLayer, FeatureLayer) {
var map = new Map({
basemap: "streets-navigation-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [116.397, 39.907], // Longitude, Latitude
zoom: 5
});
// 示例代码将在后续部分中添加
});
</script>
</body>
</html>
2. 添加瓦片图层（Tile Layer）
瓦片图层是最常见的图层类型之一，通常用于显示底图，以下代码演示了如何添加一个瓦片图层：
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer"
], function(Map, MapView, TileLayer) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [116.397, 39.907], // Longitude, Latitude
zoom: 5
});
// 添加瓦片图层
var tileLayer = new TileLayer({
url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
});
map.add(tileLayer);
});
3. 添加矢量图层（Feature Layer）
矢量图层用于显示点、线、面等几何要素，以下代码演示了如何添加一个矢量图层：
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {
var map = new Map({
basemap: "streets-navigation-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [116.397, 39.907], // Longitude, Latitude
zoom: 5
});
// 添加矢量图层
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/Specialty/Soil_Survey_Area/FeatureServer/0",
outFields: ["*"],
popupTemplate: { // 自定义弹出窗口模板
title: "{NAME}",
content: "{DESCRIPTION}"
}
});
map.add(featureLayer);
});
4. 添加动态图层（Dynamic Layer）
动态图层可以实时更新数据，例如实时交通信息或气象数据，以下代码演示了如何添加一个动态图层：
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GraphicsLayer",
"esri/Graphic"
], function(Map, MapView, GraphicsLayer, Graphic) {
var map = new Map({
basemap: "streets-navigation-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [116.397, 39.907], // Longitude, Latitude
zoom: 5
});
// 创建动态图层并添加图形元素
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
var point = {
type: "point",
longitude: 116.397,
latitude: 39.907,
};
var simpleMarkerSymbol = {
type: "simple-marker", // autocasts as new SimpleFillSymbol()
color: [226, 119, 40], // orange, can be hex or rgb
size: "12px",
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255], // white, can be hex or rgb or array of numbers
width: 2
}
};
var pointSymbol = {
type: "text", // autocasts as new TextSymbol()
text: "Sample Point",
font: { // autocasts as new Font()
size: 12,
family: "sans-serif"
},
color: "black",
haloColor: "white",
haloSize: "1px",
backgroundColor: "white"
};
var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol,
textSymbol: pointSymbol,
popupTemplate: { // autocasts as new PopupTemplate()
title: "Sample Point",
content: "This is a sample point."
}
});
graphicsLayer.add(pointGraphic);
});
常见问题与解答
问题1：如何在地图上添加多个图层？
答：你可以在map.add 方法中多次调用不同的图层对象。
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/layers/FeatureLayer"
], function(Map, MapView, TileLayer, FeatureLayer) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [116.397, 39.907], // Longitude, Latitude
zoom: 5
});
// 添加第一个图层：瓦片图层
var tileLayer = new TileLayer({
url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
});
map.add(tileLayer);
// 添加第二个图层：矢量图层
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/Specialty/Soil_Survey_Area/FeatureServer/0",
outFields: ["*"]
});
map.add(featureLayer);
});
问题2：如何为图层设置透明度？
答：你可以通过图层对象的opacity 属性来设置透明度。
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer"
], function(Map, MapView, TileLayer) {
var map = new Map({
basemap: "streets-navigation-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [116.397, 39.907], // Longitude, Latitude
zoom: 5
});
// 添加瓦片图层并设置透明度为0.5
var tileLayer = new TileLayer({
url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
opacity: 0.5 // 设置透明度为0.5（50%）
});
map.add(tileLayer);
});
到此，以上就是小编对于“arcgis js添加图层”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/684598.html
微信扫一扫 