当前位置：首页 > article >正文

ArcGIS Maps SDK for JavaScript：根据经纬度定位，并添加定位标记

article 2024/12/25 22:17:36

文章目录

- 1 示例代码
- 2 SimpleMarkerSymbol相关属性

在很多业务场景中，我们经常需要根据某个经纬度在地图上进行定位，并显示一个标记来指示该位置。本文将通过一个简单的例子，展示如何使用 ArcGIS Maps SDK for JavaScript 实现以下功能：

根据给定的经纬度定位。
在地图上添加一个标记，显示该位置。

1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ArcGIS JS API - Add Graphic to Map</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.23/"></script>
</head>
<body>
  <div id="viewDiv" style="width:100%; height:100%;"></div>
  <script>
    require([
      "esri/Map",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/views/MapView"
    ], function(Map, Graphic, GraphicsLayer, Point, SimpleMarkerSymbol, MapView) {

      // 创建地图对象
      const map = new Map({
        basemap: "streets-navigation-vector"
      });

      // 创建一个GraphicsLayer实例，用于添加图形
      const graphicsLayer = new GraphicsLayer();

      // 创建地图视图
      const view = new MapView({
        container: "viewDiv",  // 指定HTML容器
        map: map,
        center: [118.80500, 34.02700],  // 初始位置（经度，纬度）
        zoom: 13
      });

      // 将GraphicsLayer添加到地图
      map.add(graphicsLayer);

      // 创建一个点图形（指定经度和纬度）
      const point = new Point({
        longitude: 118.80500,
        latitude: 34.02700
      });

      // 创建符号（MarkerSymbol）
      const markerSymbol = new SimpleMarkerSymbol({
        color: "red", // 标记颜色
        style: "diamond",// 标记样式
        size: "12px",// 标记大小
        outline: {// 标记外轮廓
          color: [255, 255, 255],
          width: 2
        }
      });

      // 创建图形（Graphic），并指定点、符号
      const pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol
      });

      // 将图形添加到GraphicsLayer
      graphicsLayer.add(pointGraphic);

	  // 设置地图视图中心到定位的经纬度并设置缩放级别
	  view.goTo({
	    //center: [point.longitude, point.latitude],
	    center: point,
	    zoom: 14
	  });
    });
  </script>
</body>
</html>

2 SimpleMarkerSymbol相关属性

在这里插入图片描述

在这里插入图片描述更多信息参考
[1]https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html#style
[2] https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#goTo