Hello earth（四）——让我们来画Polyline和Polygon吧！

写在前面：越来越水系列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！

转载于:https://my.oschina.net/HangXiaoZhuOSZone/blog/2966426