文章目录
- 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>javascript">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});// 将图形添加到GraphicsLayergraphicsLayer.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
