一、缘由
最近项目中用到了画圆和画扇形,所以写出来
二、Polygon
The first and last points of a ring must be the same
环的第一点和最后一点必须相同
A polygon contains an array of rings and a spatialReference.
边形包含环数组和空间引用
//3D polygon rings with m-values (note that the second ring does not have m-values defined for it)
const rings = [
[ // first ring
[-97.06138,32.837,35.1,4.8],
[-97.06133,32.836,35.2,4.1],
[-97.06124,32.834,35.3,4.2],
[-97.06138,32.837,35.1,4.8] // same as first vertex
], [ // second ring
[-97.06326,32.759,35.4],
[-97.06298,32.755,35.5],
[-97.06153,32.749,35.6],
[-97.06326,32.759,35.4] // same as first vertex
]
];
const polygon = new Polygon({
hasZ: true,
hasM: true,
rings: rings,
spatialReference: { wkid: 4326 }
});
//建议使用,也可以在polygon 中设置spatialReference
let polygon = {
type: "polygon", // autocasts as new Polygon()
rings: rings,
};
let fillSymbol = {
type: "simple-fill",
outline: {
color: [255, 255, 255, 0],
width: 1,
},
};
let polygonGraphic = new Graphic({
geometry: polygon,
symbol: fillSymbol,
});
//然后 GraphicsLayer.graphics.add(polygonGraphic);
//map.add(...)
三、Circle
圆是通过指定中心点和半径创建的多边形
适用于中心点的空间参考设置为Web墨卡托(wkid: 3857)或地理/测地(wkid: 4326)。当使用这些空间参考中的任何一个时,设置测地线为真以最小化失真。其他坐标系不会产生测地线圆。
只有wkid: 3857或者wkid: 4326时,在地图上看起来像个圆,否则就是个椭圆
geodesic设置为false,那么他就是看起来是个圆,但是实际测量时,半径不一致
let getCircle = new Circle({
center: point,//圆心
geodesic: true,//
numberOfPoints: 360,//这个值定义了沿圆曲线的点的数量
radius: radius,//半径
});
//用上述方法可以获取到圆上的360个点(其实有361个,因为第一个点需要跟最后一个点相同)
let polygonGraphic = new Graphic({
geometry: getCircle,//polygon,//getCircle,
symbol: fillSymbol,//样式
});
//然后GraphicsLayer.graphics.add(polygonGraphic);
//map.add(...)
四、扇形
//获取所有的点
let rings = JSON.parse(JSON.stringify(getCircle.rings[0]));
//根据起始角度和初始角度绘制,这就是 numberOfPoints设置 360的原因,如果存在小数点就四舍五入,或者设置更大的数值
//这里有点小小的逻辑问题,自测
let newRings = rings.splice(startAngle, Angle)
//将圆心添加到第一个和最后一个
newRings.unshift(point)
newRings.push(point)
//然后参考Polygon
效果图