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

相关推荐
暴富的Tdy1 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
℘团子এ1 小时前
js和html中,将Excel文件渲染在页面上
javascript·html·excel
胡西风_foxww3 小时前
【es6复习笔记】Promise对象详解(12)
javascript·笔记·es6·promise·异步·回调·地狱
秃头女孩y3 小时前
【React中最优雅的异步请求】
javascript·vue.js·react.js
dlnu20152506227 小时前
ssr实现方案
前端·javascript·ssr
轻口味9 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王9 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发9 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
真滴book理喻12 小时前
Vue(四)
前端·javascript·vue.js