<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>Historic Topographic Maps</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="lib/leaflet/leaflet.css"/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
<style>
.leaflet-zoom-animated img {
-webkit-filter: invert(100%) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
-ms-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
-moz-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(1%) !important;
}
</style>
<script src="lib/leaflet/leaflet-src.js"></script>
<script src="lib/proj4/proj4.js"></script>
<script src="lib/proj4/proj4leaflet.js"></script>
<script src="lib/leaflet-tilelayer-colorizr/leaflet-tilelayer-colorizr.js"></script>
</head>
<body>
<div id="map"></div>
<script>
//L.CRS.EPSG4326
var map = L.map('map');
//高德、google图层,地图服务地址可替换成爬取离线部署的地图服务,如:http://106.53.28.207/baidu_sl/{z}/{x}/{y}.png
//高德URL:http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
//openstreetmap:https://tile.openstreetmap.org/{z}/{x}/{y}.png
//googleURL:xxxxxx
//以上地址如果不能访问到新版地图URL,可通过访问新版地图,通过F12-->network获取
L.tileLayer.colorizr("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 20,
minZoom: 1,
colorize: function (pixel) {
//console.log("pixel",pixel);
// 这个方法用来调整所有的图片上的rgb值,pixel是图片原有的rgb值
//祝大家能跳出自己喜欢得样式
pixel.r += 30;
pixel.g += 30;
pixel.b += 50;
pixel.a=255;
return pixel;
}
}).addTo(map);
var center_point = [24.522422570142833, 118.11471659369913];
map.setView(center_point, 12);
map.on("click", function (e) {
console.log(e.latlng);
})
</script>
</body>
</html>
18.(leaflet篇)leaflet自定义地图样式地图(插件实现).zip
版权申诉
5星 · 超过95%的资源 11 浏览量
2021-07-05
09:45:07
上传
评论
收藏 661KB ZIP 举报
地图之家家长
- 粉丝: 4759
- 资源: 138
最新资源
- 基于matlab主成分分析图像压缩重建系统代码14
- C语言《基于AT89C52单片机搭建的PID直流电机控制程序,主要用于Proteus电路仿真》+源代码
- C++《基于规划和汽车动力学的自动驾驶项目仿真(基于ROS的自动驾驶项目仿真,使用DWA路径规划算法和双PID控制器)》+源代码
- vos3000客户端2.1.7.03、2.1.8.05、2.1.9.07
- c++《用于船舶控制方法研究的3D船舶运动仿真软件》+源代码
- globalmapper24
- Python 小游戏 (贪吃蛇、五子棋、扫雷、俄罗斯方块)源码.zip
- Map data that can be used for 2D raster map path planning
- 关于电子技术数字电路的芯片模拟.zip
- 普中开发板proteus仿真电路V2.6
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
- 1
- 2
前往页