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

web前端进阶者

已于 2025-01-03 09:20:39 修改

阅读量445

点赞数 4

分类专栏：天地图文章标签： javascript 前端

于 2025-01-02 15:49:13 首次发布

本文链接：https://blog.youkuaiyun.com/u014708123/article/details/144887961

版权

天地图专栏收录该内容

11 篇文章

订阅专栏

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

1.打卡在线网址

SVG在线调试

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

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

在这里插入图片描述

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

在这里插入图片描述

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

放入后点击运行
天地图

使用自定义预设

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

<head>
<style>
// 截至2025年1月2日，天地图加载的地图图片在这个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>