天地图SVG主题滤镜在线编辑

984 阅读1分钟

目前天地图商用暂时不收费,但是后续可能会收费,高德、百度、腾讯目前是5万1年,截至2025年1月2日官方只提供了2个主题色,目前已经调好几个主题色可以使用; 已经调好的几个样式

1.打卡在线网址

SVG在线调试

2.选择文件吧天地图截图放进去

建议截取2张天地图,一张为市级别,一张为区级别

在这里插入图片描述

3.可以点击左侧预设,然后开始调整

在这里插入图片描述

4.把样式放入天地图在线地址中验证效果

放入后点击运行 天地图 在这里插入图片描述

使用自定义预设

指定svg的id"mapDarkBlueFilter" 复制的你滤镜效果到defs下面并指定id css中使用

<head>
<style>
// 截至202512日,天地图加载的地图图片在这个div下面
#mapDiv .tdt-tile-pane {
    filter: url('#mapDarkBlue');
}
// 目前.tdt-tile-pane第一个子元素存放地图,第二个子元素存放地名
// 如果只想作用于地图而不是把地名和图标以前变掉可以这么写
#mapDiv .tdt-tile-pane > div:first-child {
	filter: url('#mapDarkBlue');
}
</style>
</head>
<body>
  <svg id="mapDarkBlueFilter" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	    <defs>
	      <!-- 复制你的滤镜效果 -->
	      <filter id="mapDarkBlue" ...>
	      	...
	      </filter >
       </defs>
</svg>
</body>