ArcGIS API for JavaScript学习

官方示例代码：

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the visualization-vv-rotation sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-rotation/index.html
  -->
    <title>
      Visualize data with rotation | Sample | ArcGIS API for JavaScript 4.16
    </title>

    <style>
      html,body,#viewDiv {height: 100%;width: 100%;margin: 0;padding: 0;}
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.16/"></script>
    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer"
      ], function (Map, MapView, FeatureLayer) {
        // Create an arrow symbol using an SVG path
        // Since the arrow points downward, we set
        // the angle to 180 degrees to point to
        // 0 geographic degrees north

        const symbol = {
          type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
          path: "M14.5,29 23.5,0 14.5,9 5.5,0z",
          color: "#ffff00",
          outline: {
            color: [0, 0, 0, 0.7],
             0.5
          },
          angle: 180,
          size: 15
        };

        /******************************************************
         *
         * Create a SimpleRenderer where each feature will be
         * rendered with the same symbol (in this case, an arrow).
         * Set the symbol on the renderer and a "rotation"
         * visual variable that points to a field in the stream service
         * that contains heading information for each feature.
         * The "geographic" rotation type assumes 0 degrees is due north.
         *
         * The size visual variable resizes each symbol
         * based on the feature's wind speed.
         *
         *******************************************************/

        const rotationRenderer = {
          type: "simple", // autocasts as new SimpleRenderer()
          symbol: symbol,
          visualVariables: [
            {
              type: "rotation",
              field: "WIND_DIRECT",
              rotationType: "geographic"
            },
            {
              type: "size",
              field: "WIND_SPEED",
              minDataValue: 0,
              maxDataValue: 60,
              minSize: 8,
              maxSize: 40
            }
          ]
        };

        // Construct the layer and add it to the map

        const layer = new FeatureLayer({
          url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/weather_stations_010417/FeatureServer/0",
          renderer: rotationRenderer
        });

        const map = new Map({
          basemap: "satellite",
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          extent: {
            spatialReference: { wkid: 3857 },
            xmin: -41525513,
            ymin: 4969181,
            xmax: -36687355,
            ymax: 9024624
          }
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

1.引入框架样式和框架

2.地图框架容器

3.js代码

required([

"esri/Map",

"esri/views/MapView"

],function(Map, MapView){

const map = new Map({

basemap: "statelite",

layers: [layer]

});

const mapView = new MapView({

container: 'viewDiv',

map:map

});

</script>