常用的查詢功能

[info] 小提示：

程式碼連結：我是連結

有時會需要透過某個方式去取得標註的對象及細節。以下讓我們來實作一個變更標註顏色的功能。

首先我們先建立一個通用的函式，以Id根據類型去改變顏色屬性

function ChangeColor(custom, matchId, color) {
    for (var i = 0; i < matchId.length; ++i)
    {
        var param = custom.GetEntityParam(matchId[i]);
        switch (param.Type)
        {
            case "POINT":
                custom.UpdateEntity(matchId[i], { FillColor: color });
            break;
            case "POLYLINE":
                custom.UpdateEntity(matchId[i], { StrokeColor: color });
            break;
            case "POLYGON":
                custom.UpdateEntity(matchId[i], { FillColor: color });
            break;
            case "TEXT":
                param.TextStyle.FillColor = color;
                custom.UpdateEntity(matchId[i], { TextStyle: param.TextStyle });
            break;
        }
    }
}

點擊查詢

先建立滑鼠的點擊事件，將滑鼠點及位置轉換成世界坐標，並根據此點取得所選取的所有標註，接著根據查詢出來的所有Id，呼叫ChangeColor改變顏色

document.querySelector("#MyMap canvas").onclick = function(evt)
{
    var p = new GeoPoint(evt.offsetX, evt.offsetY);
    mapView.WindowToViewport(p);
    var matchId = [];
    matchId = custom.SelectEntityAtPoint(p);
    ChangeColor(custom, matchId, "#FFFF00");
}

距離查詢

讓我們再新增一個按鈕

<div id="MyControl" style="position: absolute;z-index: 1;">
    <button>ChangeColorByDistance</button>
</div>

以文字所在點為中心，取得範圍2000000公尺(2000公里)內的圖形Id，並改變他們的顏色

document.querySelectorAll('#MyControl button')[0].onclick = function()
{
    var p = new GeoPoint(-2100000.0, 7000000.0);
    var matchId = custom.SelectEntityByDistance(p, 2000000);
    ChangeColor(custom, matchId, "#00FFFF");
};