写在前面：越来越水系列o(*￣︶￣*)o，本来应该好好介绍一下KML的DOM，好好梳理一下Google Earth API Utility libraries扩展的API，哎没那个精力，还是就写点儿Demo过了吧！我打算开启下一个系列了(#^.^#)，每每回顾一年前的东西都感到头疼，现在手头主要在搞Qt的地图方案了。

还是老规矩，在GepWebBrowser控件中可以通过调用Google Earth API Utility libraries的API，来实现几何类型为Polyline和Polygon的PlaceMarker的绘制，示例代码如下：

bool bounce = false;
bool clockwise = true;Action<int> drawCallback = i => { /* 当你绘制完第i个点时希望后端做点儿什么... */ }
Action finishCallback = () => { /* 当你完成所有点的绘制时希望后端做点儿什么... */ }// 调用前端JS脚本中的GepBeginDrawPolyline方法
var uid = (string)Document.InvokeScript("GepBeginDrawPolyline", new object[] { bounce, clockwise, drawCallback, finishCallback });// 调用前端JS脚本中的GepBeginDrawPolygon方法
var uid = (string)Document.InvokeScript("GepBeginDrawPolygon", new object[] { bounce, clockwise, drawCallback, finishCallback });

再来看看前端JS怎么实现GepBeginDrawPolyline和GepBeginDrawPolygon：

// Polyline Placemark的列表
var polylinePlacemarks = {};
/*** 通过鼠标事件开始绘制多义线* @function* @param {Boolean} bounce 是否开启绘制点的弹跳效果* @param {Boolean} ensureCounterClockwise 是否对点进行逆时针存储* @param {Function} drawCallback 每当绘制一个节点就触发的回调函数，回调参数是节点的数组索引* @param {Function} finishCallback 完成绘制时触发事件(鼠标左键双击或单击起始点形成闭环时)* @return {String} 返回唯一ID*/
function GepBeginDrawPolyline(bounce, ensureCounterClockwise, drawCallback, finishCallback){var id = getUniqueId();polylinePlacemarks[id] = gex.dom.addLineStringPlacemark([], {id: id,style: {line: { width: 2, color: 'red' }}});var lineString = polylinePlacemarks[id].getGeometry();gex.edit.drawLineString(lineString, {bounce: bounce,drawCallback: drawCallback,finishCallback: finishCallback,ensureCounterClockwise: ensureCounterClockwise});return id;
}// Polygon Placemark的列表
var polygonPlacemarks = {};
/*** 通过鼠标事件开始绘制多义面* @function* @param {Boolean} bounce 是否开启绘制点的弹跳效果* @param {Boolean} ensureCounterClockwise 是否对点进行逆时针存储* @param {Function} drawCallback 每当绘制一个节点就触发的回调函数，回调参数是节点的数组索引* @param {Function} finishCallback 完成绘制时触发事件(鼠标左键双击或单击起始点形成闭环时)* @return {String} 返回唯一ID*/
function GepBeginDrawPolygon(bounce, ensureCounterClockwise, drawCallback, finishCallback){var id = getUniqueId();polygonPlacemarks[id] = gex.dom.addPolygonPlacemark([], {id: id,style: {poly: '8000ff00',line: { width: 1, color: 'blue' }}});var lineString = polygonPlacemarks[id].getGeometry().getOuterBoundary();gex.edit.drawLineString(lineString, {bounce: bounce,drawCallback: drawCallback,finishCallback: finishCallback,ensureCounterClockwise: ensureCounterClockwise});return id;
}

和绘制点图标时一样，上面两个函数中的style也可用放到参数列表中去，从后端通过JSon传参的方式传递过来解析。

来看看在谷歌地球上绘制的实际样子：

与此同时，Google Earth API Utility libraries还提供了编辑已有Polyline和Polygon的API。在GepWebBrowser控件中，可以通过如下示例代码实现：

string uid = [PlaceMarker Unique ID] // 前面绘制时返回的唯一ID
Action editCallback = () => { /* 当编辑发生时你想让后端做点儿什么... */ }// 开始编辑Polyline
Document.InvokeScript("GepBeginEditPolyline", new object[] { uid, editCallback });
// 停止编辑Polyline
Document.InvokeScript("GepEndEditPolyline", new object[] { uid });// 开始编辑Polygon
Document.InvokeScript("GepBeginEditPolygon", new object[] { uid, editCallback });
// 停止编辑Polygon
Document.InvokeScript("GepEndEditPolygon", new object[] { uid });

前端JS脚本实现GepBeginEditPolyline、GepEndEditPolyline、GepBeginEditPolygon和GepEndEditPolygon：

/*** 通过鼠标事件编辑指定的多义线* @function* @param {String} id 指定的多义线的ID* @param {Function} editCallback 编辑时触发的回调函数*/
function GepBeginEditPolyline(id, editCallback){if (!polylinePlacemarks[id]) {alert('无法编辑：该要素不存在!');return;}var lineString = polylinePlacemarks[id].getGeometry();gex.edit.editLineString(lineString, {editCallback: editCallback});
}/*** 停止通过鼠标事件编辑指定的多义线* @function* @param {String} id 指定的多义线的ID*/
function GepEndEditPolyline(id){if (polylinePlacemarks.length <= 0)return; var lineString = polylinePlacemarks[id].getGeometry();gex.edit.endEditLineString(lineString);
}/*** 通过鼠标事件编辑指定的多义面* @function* @param {String} id 指定的多义面的ID* @param {Function} editCallback 编辑时触发的回调函数*/
function GepBeginEditPolygon(id, editCallback){if (!polygonPlacemarks[id]) {alert('无法编辑：该要素不存在!');return;}var lineString = polygonPlacemarks[id].getGeometry().getOuterBoundary();gex.edit.editLineString(lineString, {editCallback: editCallback});
}
/*** 停止通过鼠标事件编辑指定的多义面* @function* @param {String} id 指定的多义面的ID*/
function GepEndEditPolygon(id){if (polygonPlacemarks.length <= 0)return; var lineString = polygonPlacemarks[id].getGeometry().getOuterBoundary();gex.edit.endEditLineString(lineString);
}

bingo！