記錄自己用ArcGIS JavaScript 4.x實(shí)現(xiàn)以點(diǎn)(Point)為中心生成任意長(zhǎng)寬的矩形緩沖區(qū)的效果顷链。關(guān)鍵是通過中心點(diǎn)坐標(biāo)，長(zhǎng)焚刚，寬作為條件計(jì)算出各頂點(diǎn)坐標(biāo)來繪制出一個(gè)類型為矩形多邊形(polygon)的圖形点弯。下圖是演示效果:
?
繪制矩形緩沖相關(guān)代碼:
/**
* 繪制長(zhǎng)方形緩沖的方法
* 中心點(diǎn)-[lon,lat]
* 長(zhǎng)-width
* 寬-height
*/
function getRectangleBuffer (centerPt, width, height) {
var xieLineDis = Math.sqrt(width * width + height * height);
var Tdegs = deg(Math.atan(width / height)); //弧度轉(zhuǎn)換為度數(shù)
var coordTopLeft = distanceAngle({ lon: centerPt[0], lat: centerPt[1] }, -Tdegs, xieLineDis / 2); //左上角坐標(biāo)
var coordTopRight = distanceAngle({ lon: centerPt[0], lat: centerPt[1] }, Tdegs, xieLineDis / 2); //右上角
var coordBottomLeft = distanceAngle({ lon: centerPt[0], lat: centerPt[1] }, -(180 - Tdegs), xieLineDis / 2); //左下角
var coordBootomRight = distanceAngle({ lon: centerPt[0], lat: centerPt[1] }, 180 - Tdegs, xieLineDis / 2); //右下角
//構(gòu)建一個(gè)polygon所需的環(huán)形數(shù)組
var points = [
[coordTopLeft.lon, coordTopLeft.lat],
[coordTopRight.lon, coordTopRight.lat],
[coordBootomRight.lon, coordBootomRight.lat],
[coordBottomLeft.lon, coordBottomLeft.lat]
]
//右上角的點(diǎn)，用來同步放大矩形
var scalePt = new Point({
longitude: coordTopRight.lon,
latitude: coordTopRight.lat,
spatialReference: view.spatialReference
})
var scaleSym = {
type: "simple-marker",
color: [266, 266, 266, 0.8]
}
scaleGp = new Graphic({
geometry: scalePt,
symbol: scaleSym,
attributes: {
name: "rectangleGp"
}
})
view.graphics.add(scaleGp)
var polygon = new Polygon({
rings: points
})
var recsymbol = {
type: "simple-fill",
color: [267, 267, 0]
}
var rectangleGp = new Graphic({
geometry: polygon,
symbol: recsymbol
})
return rectangleGp;
}
image.gif
完整demo下載地址:https://download.csdn.net/download/lf5566fl/12089174
