ArcGIS 4.x 绘图

1、 绘制点

require(["esri/Graphic","esri/geometry/Point","esri/symbols/SimpleMarkerSymbol","esri/Map","esri/views/MapView"
], function(Graphic, Point, SimpleMarkerSymbol, Map, MapView) {var map = new Map({basemap: "streets-navigation-vector"});var view = new MapView({container: "viewDiv",map: map,center: [-118.80500, 34.02700], // 经度, 纬度zoom: 13});var point = new Point({longitude: -118.80500,latitude: 34.02700});var pointSymbol = new SimpleMarkerSymbol({color: "red",size: 8,outline: {color: "white",width: 2}});var pointGraphic = new Graphic({geometry: point,symbol: pointSymbol});view.graphics.add(pointGraphic);
});

2、绘制线条

require(["esri/Graphic","esri/geometry/Polyline","esri/symbols/SimpleLineSymbol","esri/Map","esri/views/MapView"
], function(Graphic, Polyline, SimpleLineSymbol, Map, MapView) {var map = new Map({basemap: "streets-navigation-vector"});var view = new MapView({container: "viewDiv",map: map,center: [-118.80500, 34.02700],zoom: 13});var polyline = new Polyline({paths: [[-118.80500, 34.02700],[-118.80900, 34.02900],[-118.81500, 34.02500]]});var lineSymbol = new SimpleLineSymbol({color: "blue",width: 3});var polylineGraphic = new Graphic({geometry: polyline,symbol: lineSymbol});view.graphics.add(polylineGraphic);
});

3、绘制面

require(["esri/Graphic","esri/geometry/Polygon","esri/symbols/SimpleFillSymbol","esri/Map","esri/views/MapView"
], function(Graphic, Polygon, SimpleFillSymbol, Map, MapView) {var map = new Map({basemap: "streets-navigation-vector"});var view = new MapView({container: "viewDiv",map: map,center: [-118.80500, 34.02700],zoom: 13});var polygon = new Polygon({rings: [[-118.80500, 34.02700],[-118.80900, 34.02900],[-118.81500, 34.02500],[-118.80500, 34.02700]]});var fillSymbol = new SimpleFillSymbol({color: [51, 51, 204, 0.5], // 半透明蓝色outline: {color: "white",width: 2}});var polygonGraphic = new Graphic({geometry: polygon,symbol: fillSymbol});view.graphics.add(polygonGraphic);
});

4、添加阴影效果

var shadowSymbol = new SimpleMarkerSymbol({color: [50, 50, 50, 0.5], // 半透明灰色size: 12,outline: null // 去除边框
});var shadowGraphic = new Graphic({geometry: point,symbol: shadowSymbol
});view.graphics.add(shadowGraphic);

5、 样式设置：颜色、线宽、填充样式
设置点样式：

var pointSymbol = new SimpleMarkerSymbol({color: [255, 0, 0], // 红色size: 10,outline: {color: [255, 255, 255], // 白色边框width: 2}
});

设置线条样式：

var lineSymbol = new SimpleLineSymbol({color: [0, 0, 255], // 蓝色width: 3
});

设置面样式：

var fillSymbol = new SimpleFillSymbol({color: [0, 255, 0, 0.3], // 半透明绿色outline: {color: [255, 255, 255], // 白色边框width: 2}
});

6、透明度和模拟阴影效果

透明度设置：通过设置 color 数组的最后一个值来调整透明度，例如 [255, 0, 0, 0.5] 表示半透明的红色。模拟阴影效果：通过增加额外的图形（例如增加一个较大的半透明灰色圆形）来模拟阴影。