作者abcdragon (香蕉龍)
看板GIS
標題[請益] Google Maps圖台怎麼套疊TGOS圖層或主題地圖？
時間Thu Aug 3 00:11:49 2017
聽說全臺有70~80個網站使用TGOS MAP API介接的服務
我在TGOS MAP API有看到一則API使用範例：
https://api.tgos.tw/TGOS_MAP_API/docs/site/web/ThemeMapforGoogle
上傳網路呈現如下：
https://goo.gl/kmXKX8
可是它看起來整個都是Google Maps的內容
沒看到任何TGOS的圖層或主題地圖
請問各位有人知道程式碼要怎麼修改
才會呈現出TGOS的圖層或主題地圖？
使用TGOS MAP API (Lite)可以嗎？
請問以下 上色部分的程式碼 該怎麼改？
或是哪個段落還需要改呢？
服務名稱代碼和服務圖層代碼列表要到哪裡找？
對TGOS MAP API毫無頭緒
能請各位高手指點迷津嗎？
謝謝
<!--程式碼範例-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>GoogleMaps之主題地圖代理程式</title>
<script src="
https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script
src="/TGOS_MAP_API/Web/Sample_Codes/TGOSMapAPI/QuickExample/TGThemeLayer_Google/TGThemeLayer_GoogleMaps.js"></script>
<script>
var map;
var agentLayer;
function initialize() {
// 建立圖台的地圖物件
var myLatLng = new google.maps.LatLng(25.036, 121.551);
var mapOptions = {
zoom: 17,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById('TGMap'),
mapOptions);
//+=======
// 建立 TGOS 主題地圖
var appID = "
yourID";
var apiKey = "
yourkey";
var opts = {
// 圖台的地圖物件, 若此時未設定, 仍可用 agentLayer.setMap(map) 將
圖層加入圖台
map: map,
// 圖台的坐標系統
crs: TGOS.CoordSys.EPSG4326, // Google 只能用 EPSG4326 和圖台溝通
// 圖層名稱
title: "主題圖層",
// 圖層透明度
opacity: 1.0,
// 預設是否顯示
visible: true
};
agentLayer = new TGOS.TGThemeAgent(
// 申請的 appID 和 apiKey
new TGOS.TGKey(
appID, apiKey),
// 服務名稱代碼
TGOS.TGMapServiceId.SCHOOL,
// 服務圖層代碼列表
new Array(
TGOS.TGMapId.SCHOOL.SCHOOL_B, TGOS.TGMapId.SCHOOL.SCHOOL_C,
TGOS.TGMapId.SCHOOL.SCHOOL_D, TGOS.TGMapId.SCHOOL.SCHOOL_E,
TGOS.TGMapId.SCHOOL.SCHOOL_F),
// 其他的地圖設定
opts);
//+===============================
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
function setOpacity() { // 設定透明度
var val = document.getElementById("opacity").value;
agentLayer.setOpacity(parseFloat(val));
}
function getLegend() { // 取得圖例
var oLegend = document.getElementById('legend');
agentLayer.getThemeLegend(oLegend);
oLegend.style["display"]="";
}
function visibleLegend() { // 隱藏圖例
var oLegend = document.getElementById('legend');
oLegend.style["display"]="none";
}
</script>
</head>
<body>
<div style="height: 450px; width: 650px" id="TGMap"></div>
<div id ="panel">
<input type="button" value="顯示" onclick="agentLayer.show();"></input>
<input type="button" value="隱藏" onclick="agentLayer.hide();"></input>
<input type="text" id="opacity" value="1.0" size="5"/>
<input type="button" value="設定透明度" onclick="setOpacity();">
<input type="button" value="取得圖例" onclick="getLegend();"></input>
<input type="button" value="隱藏圖例" onclick="visibleLegend();"></input>
<div id="legend" style="display:none;">
</div>
</div>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.228.250.55
※ 文章網址: https://webptt.com/m.aspx?n=bbs/GIS/M.1501690317.A.2C5.html