作者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/cn.aspx?n=bbs/GIS/M.1501690317.A.2C5.html