console 命令行工具 X clear
console
<!--

To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developers dashboard.

Sign up for a free account and get an API key.

https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/

-->

<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: Add a point, line, and polygon</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.24/"></script>
  <script>
 var selected;
  require([
    "esri/config",
    "esri/Map",
    "esri/views/MapView",

    "esri/Graphic",
    "esri/layers/GraphicsLayer"

    ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) {

  esriConfig.apiKey = "AAPK3cc5216b395d4b5ca07d6d9023165e13Q5mK4odJ34a2Yi5O54VYXE9medXI0YMujSag7ceSbTaA2nXrFx9MMDfT4qyZHbrn";

  const map = new Map({
    basemap: "arcgis-topographic" //Basemap layer service
  });
})

  //地图拖动，重新给GraphicsLayer赋值坐标位置
  map.on("mouse-drag", function (e) {
    if (selected) {
    var lon = Math.round(e.mapPoint.getLongitude() * 1000) / 1000;  //经度
    var lat = Math.round(e.mapPoint.getLatitude() * 1000) / 1000;   //维度
    var pt = new Point(lon, lat, new SpatialReference({ wkid: 4326 })) //GPS使⽤的是WGS84坐标
    selected.setGeometry(pt);//给所要移动的图标从新赋值坐标
    }
  })
  map.on("mouse-up", function (evt) {
        console.log(1);
        selected = "";
        map.enablePan();
        //此处也可以写相关的移动标注之后相应的操作，⽐如保存数据库等
    })
  const view = new MapView({
    map: map,
    center: [-118.80500,34.02700], //Longitude, latitude
    zoom: 13,
    container: "viewDiv"
 });

 const graphicsLayer = new GraphicsLayer();
 map.add(graphicsLayer);

graphicsLayer.on("mouse-down", function (e) {
    map.disablePan();
    selected = e.graphic;
})
graphicsLayer.on("mouse-up", function (e) {
    console.log(2);
    map.enablePan();
    selected = "";
//此处可以写相关的移动标注之后相应的操作，⽐如保存数据库等
//alert("11");
})
 const point = { //Create a point
    type: "point",
    longitude: -118.80657463861,
    latitude: 34.0005930608889
 };
 const simpleMarkerSymbol = {
    type: "simple-marker",
    color: [226, 119, 40],  // Orange
    outline: {
        color: [255, 255, 255], // White
        width: 1
    }
 };

 const pointGraphic = new Graphic({
    geometry: point,
    symbol: simpleMarkerSymbol
 });
 graphicsLayer.add(pointGraphic);

    // Create a line geometry
 const polyline = {
    type: "polyline",
    paths: [
        [-118.821527826096, 34.0139576938577], //Longitude, latitude
        [-118.814893761649, 34.0080602407843], //Longitude, latitude
        [-118.808878330345, 34.0016642996246]  //Longitude, latitude
    ]
 };
 const simpleLineSymbol = {
    type: "simple-line",
    color: [226, 119, 40], // Orange
    width: 2
 };

 const polylineGraphic = new Graphic({
    geometry: polyline,
    symbol: simpleLineSymbol
 });
 graphicsLayer.add(polylineGraphic);

 // Create a polygon geometry
 const polygon = {
    type: "polygon",
    rings: [
        [-118.818984489994, 34.0137559967283], //Longitude, latitude
        [-118.806796597377, 34.0215816298725], //Longitude, latitude
        [-118.791432890735, 34.0163883241613], //Longitude, latitude
        [-118.79596686535, 34.008564864635],   //Longitude, latitude
        [-118.808558110679, 34.0035027131376]  //Longitude, latitude
    ]
 };

 const simpleFillSymbol = {
    type: "simple-fill",
    color: [227, 139, 79, 0.8],  // Orange, opacity 80%
    outline: {
        color: [255, 255, 255],
        width: 1
    }
 };

 const popupTemplate = {
    title: "{Name}",
    content: "{Description}"
 }
 const attributes = {
    Name: "Graphic",
    Description: "I am a polygon"
 }

 const polygonGraphic = new Graphic({
    geometry: polygon,
    symbol: simpleFillSymbol,

    attributes: attributes,
    popupTemplate: popupTemplate

 });
 graphicsLayer.add(polygonGraphic);

 });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>