如何在ArcGIS JS中加载图片？-酷北运营网

使用 ArcGIS JavaScript API 加载图片

ArcGIS JavaScript API 是 Esri 提供的一个强大的工具，用于在 Web 应用中创建交互式地图，除了地图数据外，API 还支持加载和显示图像，这可以用于各种用途，如叠加图层、背景图等，本文将详细介绍如何在 ArcGIS JavaScript API 中加载和显示图片。

1. 准备工作

首先确保你已经安装了 ArcGIS JavaScript API，你可以从 Esri 的官方网站下载并引用 API：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ArcGIS JS API Load Image</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.25/"></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/SceneView",
            "esri/layers/GraphicsLayer",
            "esri/Graphic",
            "esri/symbols/PictureMarkerSymbol"
        ], function(Map, SceneView, GraphicsLayer, Graphic, PictureMarkerSymbol) {
            const map = new Map({
                basemap: "streets"
            });
            const view = new SceneView({
                container: "viewDiv",
                map: map,
                camera: {
                    position: { lat: 34.0522, lon: -117.2437 },
                    tilt: 45,
                    rotation: 0
                },
                environment: {
                    lighting: { date: new Date().toISOString() }
                }
            });
            // 更多代码将在后续部分添加
        });
    </script>
</body>
</html>

2. 加载图片作为标记符号

要在地图上加载并显示图片，我们可以使用PictureMarkerSymbol，以下是如何实现这一功能的示例代码：

require([
    "esri/Map",
    "esri/views/SceneView",
    "esri/layers/GraphicsLayer",
    "esri/Graphic",
    "esri/symbols/PictureMarkerSymbol"
], function(Map, SceneView, GraphicsLayer, Graphic, PictureMarkerSymbol) {
    const map = new Map({
        basemap: "streets"
    });
    const view = new SceneView({
        container: "viewDiv",
        map: map,
        camera: {
            position: { lat: 34.0522, lon: -117.2437 },
            tilt: 45,
            rotation: 0
        },
        environment: {
            lighting: { date: new Date().toISOString() }
        }
    });
    const graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);
    const symbol = new PictureMarkerSymbol({
        url: "path/to/your/image.png", // 替换为你的图片路径
        width: "64px", // 设置图片宽度
        height: "64px" // 设置图片高度
    });
    const point = {
        type: "point",
        longitude: -117.2437,
        latitude: 34.0522
    };
    const graphic = new Graphic({
        geometry: point,
        symbol: symbol,
        popupTemplate: {
            title: "Sample Point",
            content: "This is a sample point with an image marker."
        }
    });
    graphicsLayer.add(graphic);
});

3. 加载图片作为底图图层

如果你希望将图片作为底图图层加载，可以使用TileLayer 或FeatureLayer，这里我们以TileLayer 为例：

require([
    "esri/Map",
    "esri/views/SceneView",
    "esri/layers/TileLayer"
], function(Map, SceneView, TileLayer) {
    const map = new Map({
        basemap: "streets"
    });
    const view = new SceneView({
        container: "viewDiv",
        map: map,
        camera: {
            position: { lat: 34.0522, lon: -117.2437 },
            tilt: 45,
            rotation: 0
        },
        environment: {
            lighting: { date: new Date().toISOString() }
        }
    });
    const tileLayer = new TileLayer({
        url: "path/to/your/tileset" // 替换为你的瓦片集 URL
    });
    map.add(tileLayer);
});

4. 加载动态图片（例如网络摄像头）

对于动态图片，比如网络摄像头流，可以使用ImageryLayer：

require([
    "esri/Map",
    "esri/views/SceneView",
    "esri/layers/ImageryLayer"
], function(Map, SceneView, ImageryLayer) {
    const map = new Map({
        basemap: "streets"
    });
    const view = new SceneView({
        container: "viewDiv",
        map: map,
        camera: {
            position: { lat: 34.0522, lon: -117.2437 },
            tilt: 45,
            rotation: 0
        },
        environment: {
            lighting: { date: new Date().toISOString() }
        }
    });
    const imageryLayer = new ImageryLayer({
        url: "path/to/your/live/camera/stream", // 替换为你的摄像头流 URL
        opacity: 0.5 // 设置透明度
    });
    map.add(imageryLayer);
});