天地图二,修改地图主题颜色,颜色可以随意定义。

天地图二,修改地图主题颜色,颜色可以随意定义。

天地图使用过程中,原官方文档中只支持map.setStyle的两种替换地图主题色,对项目的局限性很大。
这里采用的不是webGIS中openlayers的方式修改地图颜色,而是在设置基本主题后对页面进行强制修改主题色,下边是示例代码

	//设置主题色
	let example = document.getElementById("mapDiv");
	example.style.backgroundColor = mColor;

下边是完整代码示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图-地图API-范例-经纬度直投地图</title>
  

   <script type="text/javascript" src=" https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
    <style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
    <script>
        var map;
        var zoom = 12;
        function onLoad() {
            map = new T.Map('mapDiv', {
                projection: 'EPSG:4326'
            });
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
        }
      
      window.onload = function() {
      	onLoad()
      	//设置主题色
		let example = document.getElementById("mapDiv");
		example.style.backgroundColor = mColor;
      }
    </script>
</head>
<body>
<div id="mapDiv"></div>
<p>本示例演示如何显示经纬度直投地图。</p>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈攻城狮s

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值