1.點
const point = {//點的坐標信息
type: "point",
longitude: -49.97,
latitude: 41.73
};
const markerSymbol = {//點的樣式
type: "simple-marker",
color: [226, 119, 40],
outline: {
color: [255, 255, 255],
width: 2
}
};
const pointGraphic = new Graphic({//創建點圖斑對象
geometry: point,
symbol: markerSymbol
});
2.線
const polyline = {//線的坐標信息
type: "polyline", // autocasts as new Polyline()
paths: [[-111.3, 52.68], [-98, 49.5], [-93.94, 29.89]]
};
const lineSymbol = {//線的樣式
type: "simple-line",
color: [226, 119, 40],
width: 4
};
const lineAtt = {//線的屬性
Name: "Keystone Pipeline",
Owner: "TransCanada",
Length: "3,456 km"
};
const polylineGraphic = new Graphic({//創建線圖斑對象並且綁定屬性以及彈出框信息
geometry: polyline,
symbol: lineSymbol,
attributes: lineAtt,
popupTemplate: {
title: "{Name}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "Name"
},
{
fieldName: "Owner"
},
{
fieldName: "Length"
}
]
}
]
}
});
3.面
const polygon = {//面的坐標信息
type: "polygon",
rings: [[-64.78, 32.3], [-66.07, 18.45], [-80.21, 25.78], [-64.78, 32.3]]
};
const fillSymbol = {//面的樣式
type: "simple-fill",
color: [227, 139, 79, 0.8],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
};
const polygonGraphic = new Graphic({//創建面圖斑
geometry: polygon,
symbol: fillSymbol
});
4.將上面創建的Graphic加入到地圖
第一中方式：view.graphics.addMany([pointGraphic, polylineGraphic, polygonGraphic]);
第二種方式： let graphicLayer = GraphicsLayer();
graphicLayer.addMany[pointGraphic, polylineGraphic, polygonGraphic]
graphicLayer.markId = "xxx";
view.map.add(graphicLayer);