套疊幾何圖層物件範例

Edit Code :

<!DOCTYPE html>
<html style="width: 100%; height: 100%">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <script type="text/javascript" src="https://api.tgos.tw/TGOS_API/tgos?ver=2&AppID=yourID&APIKey=yourkey" charset="utf-8"></script>
	
    <script type="text/javascript">
        var mapDiv, pMap;
        function onload() {
			mapDiv = document.getElementById("mapDiv");
			pMap = new TGOS.TGOnlineMap(mapDiv, TGOS.TGCoordSys.EPSG3826);
			
			pData = new TGOS.TGData({map: pMap});  //建立幾何圖層物件
			pData.loadGeoJson('https://api.tgos.tw/TGOS_API/images/TGOS.json',{idPropertyName:"GEOJSON"},function(graphic){  //指定資料來源
			
			var style1 =  {
					fillColor: "#00aa00",
					strokeColor: "#000088",
					strokeWeight: 2
				}
			var style2 =  {
				fillColor: "#FFFFFF",
				strokeColor: "#FFFFFF",
				strokeWeight: 1
			}
			var style3 =  {
				fillColor: "#bbccbb",
				strokeColor: "#bbccbb",
				strokeWeight: 1
			}
			var style4 =  {
				fillColor: "#0000aa",
				strokeColor: "#aa0000",
				strokeWeight: 1
			}
				pData.overrideStyle(graphic[0], style1);
				pData.overrideStyle(graphic[1], style2);
				pData.overrideStyle(graphic[2], style3);
				pData.overrideStyle(graphic[3], style4);
				pData.setMap(pMap);  //設定呈現幾何圖層物件的地圖物件
			});
		};
		document.addEventListener("DOMContentLoaded", onload);
    </script>
</head>
<body style="margin: 0; width: 600pt; height: 480pt">
    <div id="mapDiv" style="width: 100%; height: 100%; border: 0;">
    </div>
</body>
</html>

<!DOCTYPE html>
<html style="width: 100%; height: 100%">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <script type="text/javascript" src="https://api.tgos.tw/TGOS_API/tgos?ver=2&AppID=yourID&APIKey=yourkey" charset="utf-8"></script>
	
    <script type="text/javascript">
        var mapDiv, pMap;
        function onload() {
			mapDiv = document.getElementById("mapDiv");
			pMap = new TGOS.TGOnlineMap(mapDiv, TGOS.TGCoordSys.EPSG3826);
			
			pData = new TGOS.TGData({map: pMap});  //建立幾何圖層物件
			pData.loadGeoJson('https://api.tgos.tw/TGOS_API/images/TGOS.json',{idPropertyName:"GEOJSON"},function(graphic){  //指定資料來源
			
			var style1 =  {
					fillColor: "#00aa00",
					strokeColor: "#000088",
					strokeWeight: 2
				}
			var style2 =  {
				fillColor: "#FFFFFF",
				strokeColor: "#FFFFFF",
				strokeWeight: 1
			}
			var style3 =  {
				fillColor: "#bbccbb",
				strokeColor: "#bbccbb",
				strokeWeight: 1
			}
			var style4 =  {
				fillColor: "#0000aa",
				strokeColor: "#aa0000",
				strokeWeight: 1
			}
				pData.overrideStyle(graphic[0], style1);
				pData.overrideStyle(graphic[1], style2);
				pData.overrideStyle(graphic[2], style3);
				pData.overrideStyle(graphic[3], style4);
				pData.setMap(pMap);  //設定呈現幾何圖層物件的地圖物件
			});
		};
		document.addEventListener("DOMContentLoaded", onload);
    </script>
</head>
<body style="margin: 0; width: 600pt; height: 480pt">
    <div id="mapDiv" style="width: 100%; height: 100%; border: 0;">
    </div>
</body>
</html>

<!DOCTYPE html>
<html style="width: 100%; height: 100%">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <script type="text/javascript" src="https://api.tgos.tw/TGOS_API/tgos?ver=2&AppID=yourID&APIKey=yourkey" charset="utf-8"></script>
	
    <script type="text/javascript">
        var mapDiv, pMap;
        function onload() {
			mapDiv = document.getElementById("mapDiv");
			pMap = new TGOS.TGOnlineMap(mapDiv, TGOS.TGCoordSys.EPSG3826);
			
			pData = new TGOS.TGData({map: pMap});  //建立幾何圖層物件
			pData.loadGeoJson('https://api.tgos.tw/TGOS_API/images/TGOS.json',{idPropertyName:"GEOJSON"},function(graphic){  //指定資料來源
			
			var style1 =  {
					fillColor: "#00aa00",
					strokeColor: "#000088",
					strokeWeight: 2
				}
			var style2 =  {
				fillColor: "#FFFFFF",
				strokeColor: "#FFFFFF",
				strokeWeight: 1
			}
			var style3 =  {
				fillColor: "#bbccbb",
				strokeColor: "#bbccbb",
				strokeWeight: 1
			}
			var style4 =  {
				fillColor: "#0000aa",
				strokeColor: "#aa0000",
				strokeWeight: 1
			}
				pData.overrideStyle(graphic[0], style1);
				pData.overrideStyle(graphic[1], style2);
				pData.overrideStyle(graphic[2], style3);
				pData.overrideStyle(graphic[3], style4);
				pData.setMap(pMap);  //設定呈現幾何圖層物件的地圖物件
			});
		};
		document.addEventListener("DOMContentLoaded", onload);
    </script>
</head>
<body style="margin: 0; width: 600pt; height: 480pt">
    <div id="mapDiv" style="width: 100%; height: 100%; border: 0;">
    </div>
</body>
</html>