使用繪圖管理器製作GeoJSON檔案範例

Edit Code :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>繪圖編輯</title>
<script type="text/javascript" src="https://api.tgos.tw/TGOS_API/tgos?ver=2&AppID=yvVqdWXFilCK3qjmyOOlWMG/LMMyt+7fi6bzUlAvoWSO9KrpNhiUgQ==&APIKey=cGEErDNy5yN/1fQ0vyTOZrghjE+jIU6uucLNPgCatTr/ebYyFEk6e7N1TKc1kZj8ozx7kKodYm25S35cjKTSN5YhFsywcWG016q+d/+wuNSH47X2wrMcvtzIJOinOgfaBO/lbjQ0swgDT/OdQXPfy9PXJ7aYpbqjW4J1O0ZmxyKYqSomh8RneShXybDL6jU2LN4nRuv9hR25Qmc5SRU5ppGLFUZJQRpkj/Pp76yiXJuYeZxhqfttbHmF6CrnDHKzFZsANY4im5MCScqRReC21n6qNXIhaSkcMNa1P2TvvyhQ+BT/RXZABY10q5D/Www2spV/YVJM7OTP+UKOLP1TXfZ2mrdHrS8jzn4aOKMnh79nS8usyQQ02OAdJ54VLBlL7fmYa9Iw7ZjBkeXkJ/4U/MVsYhse4yR7rUrDYAeFjyVdRACV2YmqdEPo1e5g/Ybz8ybmQxw/Aht1BZFO9e0AqcOAWx0KqA0yLyA4VlRYyo/rv2YA+HSDnw==" charset="utf-8"></script>
<script type="text/javascript"> 
	var pMap = null;
    var pDrawingManager = null;
    var currentGraphic = null;
    
    //---- 繪圖工具 ----
    
    function InitWnd() {
		var pOMap = document.getElementById("OMap");
		pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3826);
        pDrawingManager = new TGOS.TGDrawing();
        pDrawingManager.setMap(pMap);

// 設定編修時, 選到的那個圖形 callback function
        pDrawingManager.setGraphicSelectedCallback(onGraphicSelected);
        
        function onGraphicSelected(p) {
            if (p !== undefined) {
                currentGraphic = p;
                var geojson = currentGraphic.geoJsonProperties;
                // 選到圖形時, getDrawingMode() 會由 "EDIT" 轉變為 "MODIFY".
            }
        }
		
		var btn = document.createElement("BUTTON");
		btn.innerHTML = "編輯";
		document.getElementById("pro").appendChild(btn);
        
        TGOS.TGEvent.addListener(pDrawingManager, 'overlay_complete', function (e) {
            TGOS.TGEvent.addListener(e.overlay, 'click', function () {
				document.getElementById("pro").style.display = "";
				btn.onclick = function(){
					pDrawingManager.setGeoJsonProperties(e.overlay, document.getElementById("gj").value); //選取到的圖形設定JSON屬性
					getGraphicsGeoJson(); 
					return false;
				};
            });
            pDrawingManager.setDrawingMode(TGOS.TGOverlayType.NONE); //取消所有模式
			document.getElementById("pro").style.display = "none";
        });
	};
    
    function clearAllGraphics() {
        pDrawingManager.clearAllGraphics(); //清除所有繪圖
    };
    
    function getGraphicsGeoJson() {
        var str1 = pDrawingManager.getGeoJson("<br />");  //取得所有JSON，預設會以 \r\n 做為換行字元
        document.getElementById("res").innerHTML = str1;
    };
    
</script>            
</head>
<body style="margin:5px" onload="InitWnd();">
	<div id="OMap" style="position:absolute; top:5px; left:5px; width:640px; height:480px; border:1px solid #000000;"></div>
	<div style="position:absolute;top:490px; left:5px;">
		<input type="button" value="移除所有繪圖" onclick="clearAllGraphics();"style="color:red;height:30px;font-size:16px;font-family:Microsoft JhengHei"/>
		<br />
        <input type="button" value="取得 GeoJson" onclick="getGraphicsGeoJson();"style="height:30px;font-size:16px;font-family:Microsoft JhengHei"/>
		<br />
	</div>
    <div id="res" style="position:absolute;top:0px; left:650px;height:350px;overflow-y:auto;">

</div>
	<div id="pro" style="display:none;width:100px;height:100px;left:650px;top:360px;position: absolute;">
		屬性內容: 
		<textarea id="gj" cols="35" rows="5">{}</textarea>
		<br>
		
	</div>
</html>