官方示例代码：
<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.引入框架样式和框架
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/dark/main.css"/>
<script src="https://js.arcgis.com/4.16/"></script>
2.地图框架容器
<div id="viewDiv"></div>
3.js代码
<script>
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>