ArcGIS JS API 4.x(三) MapView和SceneView使用GraphicsLayer和Graphic

        MapView使用Graphic和3.x版本的使用方式类似,Graphic的坐标信息包括xy,SceneView使用的Graphic的坐标信息包括z。

1、MapView添加Graphic

        1.1  创建point的Graphic

// 创建点几何,
var point = {
        type: "point", // autocasts as new Point()
        longitude: -49.97,
        latitude: 41.73
    };
// 创建点的样式
var markerSymbol = {
    type: "simple-marker",
    color: [226, 119, 40],
    outline: {
        color: [255, 255, 255],
        width: 2
    }
};

// 创建点的Graphic,4.x版本 创建对象更简便,直接使用json键值对即可。。
var pointGraphic = new Graphic({
    geometry: point,
    symbol: markerSymbol
});

        1.2 创建Polyline的Graphic

    // 创建线几何
var polyline = {
        type: "polyline", // 直接根据字符串确定几何类型
        paths: [
            [-111.30, 52.68],
            [-98, 49.5],
            [-93.94, 29.89]
        ]
    };

// 创建线 样式
var lineSymbol = {
    type: "simple-line", //指定线的样式的字符串
    color: [226, 119, 40],
    width: 4
};

// 创建属性信息
var lineAtt = {
    Name: "Keystone Pipeline",
    Owner: "TransCanada",
    Length: "3,456 km"
};

var polylineGraphic = new Graphic({
    geometry: polyline,
    symbol: lineSymbol,
    attributes: lineAtt,
    popupTemplate: {   //infowindow
        title: "{Name}",
        content: [{
            type: "fields",
            fieldInfos: [{
                fieldName: "Name"
            }, {
                fieldName: "Owner"
            }, {
                fieldName: "Length"
            }]
        }]
    }
});

        1.3 创建Polygon的Graphic

    // 创建Polygon几何
var polygon = {
        type: "polygon",
        rings: [
            [-64.78, 32.3],
            [-66.07, 18.45],
            [-80.21, 25.78],
            [-64.78, 32.3]
        ]
    };

// 创建Polygon 样式
var fillSymbol = {
    type: "simple-fill", 
    color: [227, 139, 79, 0.8],
    outline: { 
        color: [255, 255, 255],
        width: 1
    }
};

var polygonGraphic = new Graphic({
    geometry: polygon,
    symbol: fillSymbol
});

1.4  view里面添加graphic,和3.x的map.graphics.add类似。

        view.graphics.addMany([pointGraphic, polylineGraphic, polygonGraphic]);

2、SceneView添加Graphic

//在SceneView里面的geometry的点是三维的,包括xyz坐标。 

var point = {
          type: "point", 
          x: -0.178,
          y: 51.48791,
          z: 1010
        };

//Polyline Polygon都具有z坐标。

你可能感兴趣的:(ArcGIS,JS,API,4.x,ArcGIS,JS,API,4.x)