如何使用ArcGIS JS绘制点？-酷北运营网

使用 ArcGIS JavaScript API 画点

ArcGIS JavaScript API 是一个强大的工具，可以帮助开发者在网页上创建交互式地图，本文将详细介绍如何使用 ArcGIS JavaScript API 绘制点。

1. 准备工作

确保你已经注册并获取了 ArcGIS 的 API Key，你可以在 [ArcGIS Developer](https://developers.arcgis.com/) 网站上找到相关信息。

创建一个新的 HTML 文件，并添加以下基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArcGIS JavaScript API Draw Point</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>
    <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/Graphic",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/geometry/Point",
            "esri/layers/GraphicsLayer"
        ], function(Map, MapView, Graphic, SimpleMarkerSymbol, Point, GraphicsLayer) {
            // Create the map and view
            const map = new Map({
                basemap: "streets"
            });
            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-118.80500, 34.02700], // Longitude, Latitude
                zoom: 13
            });
            // Create a point graphic
            const point = new Point({
                longitude: -118.80500,
                latitude: 34.02700,
                spatialReference: { wkid: 4326 }
            });
            const simpleMarkerSymbol = new SimpleMarkerSymbol();
            const pointGraphic = new Graphic({
                geometry: point,
                symbol: simpleMarkerSymbol,
                popupTemplate: {
                    title: "Sample Point",
                    content: "This is a sample point."
                }
            });
            // Add the point graphic to the view's graphics layer
            view.graphics.add(pointGraphic);
        });
    </script>
</body>
</html>

2. 解析代码

引入必要的模块

我们通过require 函数引入了多个 ArcGIS JavaScript API 模块，包括Map,MapView,Graphic,SimpleMarkerSymbol,Point 和GraphicsLayer。

创建地图和视图

使用Map 类创建一个地图对象，并设置基础地图为街道图（streets），然后使用MapView 类创建一个视图对象，并将其容器设置为 HTML 中的viewDiv，同时设置地图的中心坐标和缩放级别。

创建点要素

使用Point 类创建一个点对象，并设置其经纬度和空间参考系（EPSG:4326），然后使用SimpleMarkerSymbol 类创建一个简单标记符号，使用Graphic 类创建一个图形对象，并将点和符号关联起来，还设置了弹出窗口模板，以便在点击点时显示信息。

将点添加到视图中

使用view.graphics.add() 方法将点图形添加到视图的图形图层中。

3. 运行示例

保存上述 HTML 文件并在浏览器中打开，即可看到一个包含单个点的交互式地图，点击该点会弹出一个信息窗口，显示“这是一个样本点”。

相关问题与解答

问题 1: 如何在地图上绘制多个点？

解答: 要绘制多个点，可以创建一个点数组，并循环遍历该数组，为每个点创建一个Graphic 对象，然后将其添加到视图的图形图层中，以下是示例代码：

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/Graphic",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/geometry/Point",
    "esri/layers/GraphicsLayer"
], function(Map, MapView, Graphic, SimpleMarkerSymbol, Point, GraphicsLayer) {
    const map = new Map({
        basemap: "streets"
    });
    const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80500, 34.02700],
        zoom: 13
    });
    const points = [
        {longitude: -118.80500, latitude: 34.02700},
        {longitude: -118.81000, latitude: 34.03000},
        {longitude: -118.81500, latitude: 34.03500}
    ];
    points.forEach(pointCoord => {
        const point = new Point({
            longitude: pointCoord.longitude,
            latitude: pointCoord.latitude,
            spatialReference: { wkid: 4326 }
        });
        const simpleMarkerSymbol = new SimpleMarkerSymbol();
        const pointGraphic = new Graphic({
            geometry: point,
            symbol: simpleMarkerSymbol,
            popupTemplate: {
                title: "Point",
                content:Latitude: ${pointCoord.latitude}, Longitude: ${pointCoord.longitude}
            }
        });
        view.graphics.add(pointGraphic);
    });
});

问题 2: 如何自定义点的符号样式？

解答: 你可以通过修改SimpleMarkerSymbol 的属性来自定义点的符号样式，可以设置颜色、大小、形状等，以下是一个自定义符号样式的示例：

const customMarkerSymbol = new SimpleMarkerSymbol({
    color: [255, 0, 0], // Red color
    size: "12px", // Marker size
    outline: { // Outline of marker (optional)
        color: [255, 255, 255], // White color
        width: 2 // Outline width in pixels
    }
});

然后将这个自定义符号应用到点图形中：

const pointGraphic = new Graphic({
    geometry: point,
    symbol: customMarkerSymbol,
    popupTemplate: {
        title: "Custom Styled Point",
        content: "This is a custom styled point."
    }
});

以上就是关于“arcgis js 画点”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!