天地图svg滤镜自定义主题色

web前端进阶者

已于 2025-03-28 10:25:29 修改

阅读量1.4k

点赞数 16

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

于 2025-01-02 15:28:48 首次发布

本文链接：https://blog.csdn.net/u014708123/article/details/144885392

版权

要使用SVG Gradient Map Filter自定义天地图的主题颜色，并将其应用到天地图的图片上，本文自己调了几个常用主题，你也可以自己尝试调配自己的主题

建议：浅色的建议用地图原色去调试，深色的建议先指定地图样式为‘black’再进行调试效果会更好;

天地图Bug

当使用设置样式的时候一定要先指定中线点，不然会报错；

map = new T.Map("monitor_localtion_map_content", {
   
	projection: 'EPSG:4326',
	minZoom: 4,
	// 切记一定要指定中心点, 不然直接设置样式会报错
	center: new T.LngLat(116.40969, 39.89945),
	zoom: 18,
});
map.setStyle('black');

SVG效果在线调试

效果图_白色半透明1

在这里插入图片描述

效果图_白色半透明2

// 截至2025年1月2日地图图片放在这个div下面
// 所以如果有地图覆盖物的情况下建议这么使用
// 效果1
#mapDiv .tdt-tile-pane {
   
   filter: url('#mapFresh');
}
// 效果2,只改变地图图片样式，保留其它地标效果
 #mapDiv .tdt-tile-pane > div:first-child {
   
  filter: url('#mapLight');
}

<svg id="mapFreshFilter" 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="mapFresh" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
	<feColorMatrix type="matrix" values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
	<feComponentTransfer in="colormatrix" result="componentTransfer">
    		<feFuncR type="table" tableValues="0.36 1"/>
		<feFuncG type="table" tableValues="0.49 1"/>
		<feFuncB type="table" tableValues="0.41 1"/>
		<feFuncA type="table" tableValues="0 0.7"/>
  	</feComponentTransfer>
	<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>
   </defs>
</svg>

效果图_蓝色

.your-map-tile-class {
   
    filter: url('#custom-filter');
}

<body>
	<svg id="svgfilters" 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="custom-filter" x="-10%" y="-10%" width="120%" height="120%" filterUnits=

最低0.47元/天解锁文章