ArcGIS JavaScript API 是 Esri 提供的一个功能强大的工具，用于在网页上创建动态地图应用程序，本文将详细介绍如何使用 ArcGIS JavaScript API 在 Web 应用中添加不同类型的图层。
1. 引入ArcGIS JavaScript API
需要在 HTML 文件中引入 ArcGIS JavaScript API，可以通过 CDN 方式引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ArcGIS JavaScript API Example</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.23/"></script>
</head>
<body>
<div id="viewDiv" style="height: 100vh; width: 100%;"></div>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol"
], function(Map, MapView, TileLayer, Point, SimpleMarkerSymbol) {
const map = new Map({
basemap: "streets"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80500, 34.02700], // Longitude, latitude
zoom: 13
});
});
</script>
</body>
</html>
2. 添加瓦片图层（Tile Layer）
瓦片图层是最常见的一种图层类型，通常用于显示基础地理信息，以下是如何添加一个瓦片图层的示例代码：
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer"
], function(Map, MapView, TileLayer) {
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80500, 34.02700],
zoom: 13
});
// 添加瓦片图层
const tileLayer = new TileLayer({
url: "https://services.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) {
const map = new Map({
basemap: "streets"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80500, 34.02700],
zoom: 13
});
// 添加要素图层
const featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/fLeHFrFqVDQbIQUq/ArcGIS/rest/services/Live_Feed/FeatureServer/0"
});
map.add(featureLayer);
});
4. 添加图形图层（Graphics Layer）
图形图层允许我们在地图上绘制自定义的几何图形，如点、线、多边形等，以下是一个添加图形图层并绘制一个点的示例：
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol"
], function(Map, MapView, GraphicsLayer, Graphic, Point, SimpleMarkerSymbol) {
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80500, 34.02700],
zoom: 13
});
// 创建图形图层
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
// 创建一个点符号
const pointSymbol = new SimpleMarkerSymbol({
color: [226, 119, 40], // 橙色
outline: { // 轮廓样式
color: [255, 255, 255], // 白色
width: 2
}
});
// 创建一个点几何对象
const point = new Point({
longitude: -118.80500,
latitude: 34.02700,
spatialReference: { wkid: 4326 } // WGS 84坐标系
});
// 创建一个图形对象并添加到图形图层中
const pointGraphic = new Graphic({
geometry: point,
symbol: pointSymbol
});
graphicsLayer.add(pointGraphic);
});
5. 添加动态图层服务（Dynamic Layer Service）
动态图层服务允许我们访问实时数据或频繁更新的数据，以下是一个添加动态图层服务的示例：
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer"
], function(Map, MapView, TileLayer) {
const map = new Map({
basemap: "satellite"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80500, 34.02700],
zoom: 13
});
// 添加动态图层服务
const dynamicLayer = new TileLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer"
});
map.add(dynamicLayer);
});
相关问题与解答栏目
问题1：如何在ArcGIS JavaScript API中添加多个图层？
答：可以通过多次调用map.add() 方法来添加多个图层。
const map = new Map({ basemap: "streets" });
const view = new MapView({ container: "viewDiv", map: map, center: [-118.80500, 34.02700], zoom: 13 });
const tileLayer = new TileLayer({ url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" });
const featureLayer = new FeatureLayer({ url: "https://services.arcgis.com/fLeHFrFqVDQbIQUq/ArcGIS/rest/services/Live_Feed/FeatureServer/0" });
map.add(tileLayer);
map.add(featureLayer);
这样，就可以在同一个地图上同时显示瓦片图层和要素图层。
问题2：如何在ArcGIS JavaScript API中移除一个图层？
答：可以使用map.remove() 方法来移除指定的图层。
const map = new Map({ basemap: "streets" });
const view = new MapView({ container: "viewDiv", map: map, center: [-118.80500, 34.02700], zoom: 13 });
const tileLayer = new TileLayer({ url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" });
map.add(tileLayer); // 先添加图层
map.remove(tileLayer); // 然后移除该图层
各位小伙伴们，我刚刚为大家分享了有关“arcgis js 添加图层”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/687445.html
微信扫一扫 