使用ArcGIS 4.11有一段時(shí)間了京痢。有時(shí)候官方的許多API的開(kāi)箱即用的部件還是不太能夠滿足需求些椒。最近還發(fā)現(xiàn)官方的測(cè)量面積工具在IE內(nèi)核下不能正常運(yùn)行朱躺。那么自定義實(shí)現(xiàn)是必不可少的了怎抛。實(shí)現(xiàn)自定義測(cè)量并不難揍拆，網(wǎng)上也有許多成熟的例子可以參考和借鑒拢操。自己的實(shí)現(xiàn)供各位參考參考锦亦，也是做一個(gè)筆記記錄。
實(shí)現(xiàn)的效果圖:
?
?
我的實(shí)現(xiàn)思路如下:
1.使用Draw繪制圖形令境。測(cè)距使用polyline類型杠园，測(cè)面積使用polygon類型。
2.繪制過(guò)程中舔庶，使用geometryEngine下的方法計(jì)算測(cè)量值抛蚁。geodesicLength()測(cè)量線總長(zhǎng)陈醒，geodesicArea()測(cè)量面積。
3.顯示測(cè)量信息瞧甩。測(cè)量時(shí)保持顯示的是最新的測(cè)量值钉跷。
4.添加編輯節(jié)點(diǎn)，實(shí)現(xiàn)拖拽編輯圖形肚逸。通過(guò)繪制過(guò)程中可以獲取到的頂點(diǎn)數(shù)組然后構(gòu)建graphic添加上去尘应。
5.drag拖拽事件監(jiān)聽(tīng)編輯節(jié)點(diǎn)，拖拽時(shí)保持圖形同步更新
下面是按照以上思路實(shí)現(xiàn)的部分代碼吼虎。
document.getElementById("sketch_polyline_btn").addEventListener("click", function() {
graphicsLayer.removeAll();
txtLayer.removeAll();
editLayer.removeAll();
var action = draw.create("polyline", {
mode: "click"
})
// 獲取焦點(diǎn)
view.focus();
// 頂點(diǎn)添加事件
action.on("vertex-add", createPolyline);
//頂點(diǎn)移除事件
action.on("vertex-remove", createPolyline);
// 鼠標(biāo)移動(dòng)事件
action.on("cursor-update", createPolyline);
// 繪制完成事件
action.on("draw-complete", createPolyline);
})
function createPolyline(event) {
var graphic = null;
var editGps = [];
var vertices = event.vertices;
graphicsLayer.removeAll()
//還未按下鼠標(biāo)選定起點(diǎn)犬钢，鼠標(biāo)移動(dòng)的時(shí)候
if(vertices.length == 1) {
addEditPt(graphicsLayer, event.vertices[0], 0)
}
//大于兩個(gè)點(diǎn)，顯示線
if(vertices.length >= 2) {
//線
var line = new Polyline({
paths: vertices,
spatialReference: view.spatialReference
})
// 生成繪制的圖形
graphic = new Graphic({
geometry: line,
symbol: {
type: "simple-line", // autocasts as new SimpleFillSymbol
color: "#ff5502",
width: 2,
cap: "round",
join: "round"
}
});
graphicsLayer.add(graphic)
calLength(line.paths, view)
}
//每次單擊添加頂點(diǎn)時(shí)添加一個(gè)可移動(dòng)的編輯節(jié)點(diǎn)
if(event.type == "vertex-add") {
var addGp = addEditPt(editLayer, vertices[event.vertexIndex], event.vertexIndex)
editGps.push(addGp)
console.log(editGps)
}
if(event.type == "cursor-update") {
}
if(event.type == "draw-complete") {
graphic.attributes = {
"drawId": "draw"
}
console.log(graphic)
}
}
//計(jì)算距離
function calLength(verties, view) {
var polyline = new Polyline({
paths: verties,
spatialReference: view.spatialReference
})
if(view.spatialReference.isWebMercator) {
polyline = webMercatorUtils.webMercatorToGeographic(polyline);
}
var length = geometryEngine.geodesicLength(polyline, "meters");
var content = "距離:" + length + "米";
var txtPt = new Point({
x: verties[0][0][0],
y: verties[0][0][1],
spatialReference: view.spatialReference
})
createTextGraphic(content, txtPt);
}
//計(jì)算面積
function calArea(geom, view) {
if(view.spatialReference.isWebMercator) {
geom = webMercatorUtils.webMercatorToGeographic(geom);
}
var area = geometryEngine.geodesicArea(geom, "square-kilometers");
if(area < 0) {
// simplify the polygon if needed and calculate the area again
var simplifiedPolygon = geometryEngine.simplify(geom);
if(simplifiedPolygon) {
area = geometryEngine.geodesicArea(simplifiedPolygon, "square-meters");
}
}
var content = "面積:" + area.toFixed(4) + "平方千米";
createTextGraphic(content, geom.centroid);
}
//生成顯示文本圖形
function createTextGraphic(content, point) {
txtLayer.removeAll();
var txtSym = {
type: "text",
text: content,
color: [255, 0, 0],
font: {
size: 16,
}
}
var txtGp = new Graphic({
geometry: point,
symbol: txtSym
})
txtLayer.add(txtGp);
}
這樣便實(shí)現(xiàn)了一個(gè)基本的測(cè)量工具思灰。功能比較簡(jiǎn)單點(diǎn)玷犹，有需要可以做得更加豐富點(diǎn)。像百度那樣每一段都有距離提示洒疚，可刪除節(jié)點(diǎn)等
