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] 表示半透明的红色。

模拟阴影效果：通过增加额外的图形（例如增加一个较大的半透明灰色圆形）来模拟阴影。