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

文章目录

    • [1 示例代码](#1 示例代码)
    • [2 SimpleMarkerSymbol相关属性](#2 SimpleMarkerSymbol相关属性)

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

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

1 示例代码

html 复制代码
<!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\] \[2\]

相关推荐
用户75794199497040 分钟前
基于JavaScript的简易Git
javascript
gzzeason43 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕77843 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽1 小时前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
自由逐风1 小时前
JS 处理长整型数字的坑:从雪花 ID 精度丢失说起
javascript
爱学习的茄子1 小时前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
云动雨颤1 小时前
流量分发代码实战|学会用JS控制用户访问路径
javascript
wzyoung1 小时前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
gnip1 小时前
项目开发流程之技术调用流程
前端·javascript
答案—answer1 小时前
three.js编辑器2.0版本
javascript·three.js·three.js 编辑器·three.js性能优化·three.js模型编辑·three.js 粒子特效·three.js加载模型