foreword
The company has been busy recently, and I don’t have time to post some blog posts. Recently, the project needs to display the map on a large screen. Most of the large screens use a dark blue base map. At present, Tiantu does not provide dark blue tiles, and comes with its own JS API. Only black and indigo are supported, but the project requires a sky map. The search engine searched for a solution, and there were all kinds of bells and whistles, and finally decided to use CSS filter to solve this problem, and recorded the solution in the blog.
inspiration
https://blog.csdn.net/Corey_mengxiaodong/article/details/84619875
Through the introduction of this blog post, the direction is roughly determined, that is to use filter:url() plus the function of the predefined effect to adjust the final effect.
method
- Open: CSS Filter Editor
- Upload the screenshot of the sky map to the editor, adjust the presets below and the parameters on the right
- Place the svg preset in the <body>, add the CSS generated by the CSS Code column in the editor to the canvas of the sky map
If the preset does not have the desired effect, you can use the SVG Gradient Map Filter to call up one yourself
Show results
The final display effect after adjustment, who would have thought that this turned out to be a map of the sky?
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。