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\]

相关推荐
Pu_Nine_912 分钟前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
树谷-胡老师2 小时前
公元前3400年至公元2024年全球国家地理边界演变数据集
数据库·arcgis·信息可视化
li35742 小时前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
快乐是Happy2 小时前
分享一个非常实用的防止重复提交操作
前端·javascript
可子是我的小猫2 小时前
【JS】模块(二)
javascript
云枫晖2 小时前
JS核心知识-执行上下文
前端·javascript
麦当_2 小时前
TanStack Router File-Based Router Mask 完全指南
前端·javascript·设计模式
珍珠奶茶爱好者2 小时前
vue二次封装ant-design-vue的table,识别columns中的自定义插槽
前端·javascript·vue.js
烛阴3 小时前
【TS 设计模式完全指南】用适配器模式优雅地“兼容”一切
javascript·设计模式·typescript
三脚猫的喵3 小时前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序