<!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>
<script src="lib/leaflet/leaflet-src.js"></script>
<script src="lib/proj4/proj4.js"></script>
<script src="lib/proj4/proj4leaflet.js"></script>
<script src="data/xiamen.js"></script>
</head>
<body>
<div id="map"></div>
<input type="button" value="隐藏图层" onclick="hideLayer()"
style="cursor:pointer;position:absolute;left:100px;top:50px;z-index:9999;background:blue;color:white;border:none;font-size:24px">
<input type="button" value="显示图层" onclick="showLayer()"
style="cursor:pointer;position:absolute;left:100px;top:100px;z-index:9999;background:blue;color:white;border:none;font-size:24px">
<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
//openstreetmap二版:https://tile-b.openstreetmap.fr/hot/{z}/{x}/{y}.png
new L.TileLayer('http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
maxZoom: 20,
minZoom: 1,
attribution: 'ⓒ 2012 Daum'
}).addTo(map);
var center_point=[24.622422570142833,118.11471659369913];
map.setView(center_point, 11);
var geoMapTileLayer=null;
var markerArr=[];
function addGeojson(){
console.log("叠加geojson图层");
geoMapTileLayer=L.geoJSON(xiamenjson, {
style: function (feature) {
console.log("feature:",feature);
var option={};
option.weight = 1;
option.fillColor = getColor();
option.fillOpacity = 0.7;
option.color = "rgba(255,255,255,0.65)";
return option;
},
onEachFeature: function (feature, layer) {
//console.log("feature",feature);
}
});
geoMapTileLayer.addTo(map);
var myIcon = L.icon({
iconUrl: 'images/poi.png',
iconSize: [42, 34],
iconAnchor: [21, 17],
});
var pointsTempArr = [
{lat: 24.451455729348496, lng: 118.13742834091108},
{lat: 24.85268188204102, lng: 118.09170454842627},
{lat: 24.649432577405833, lng: 118.07709114892064}
];
for (var i = 0; i < pointsTempArr.length; i++) {
var markerTemp = L.marker([pointsTempArr[i].lat, pointsTempArr[i].lng], {icon: myIcon}).addTo(map);
markerArr.push(markerTemp);
}
}
//文件数据读取
function readFile(filePath) {
// 创建一个新的xhr对象
let xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
// eslint-disable-next-line
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
const okStatus = document.location.protocol === 'file' ? 0 : 200;
xhr.open('GET', filePath, false);
xhr.overrideMimeType('text/html;charset=utf-8');
xhr.send(null);
return xhr.status === okStatus ? xhr.responseText : null;
}
//随机获取颜色值
function getColor(){
var colourstr="#"
var coloruarr=["a","b","c","d","e","f","0","1","2","3","4","5","6","7","8","9"]
for(var p=0;p<6;p++){
var n=Math.floor(Math.random()*coloruarr.length+1)-1;
colourstr+=coloruarr[n];
}
return colourstr;
}
function test(){
alert("点击测试");
}
addGeojson();
function showLayer(){
geoMapTileLayer.setStyle({
opacity:0.7,
fillOpacity:0.7
});
for(var i=0;i<markerArr.length;i++){
markerArr[i].setOpacity(1);
}
}
function hideLayer(){
geoMapTileLayer.setStyle({
opacity:0,
fillOpacity:0
});
for(var i=0;i<markerArr.length;i++){
markerArr[i].setOpacity(0);
}
}
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.csdn.net/QQ98281642/article/details/123814322
资源推荐
资源详情
资源评论
![zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
收起资源包目录
![package](https://csdnimg.cn/release/downloadcmsfe/public/img/package.f3fc750b.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/HTML.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
共 15 条
- 1
![avatar](https://profile-avatar.csdnimg.cn/01fb13dfd1af47b08672f1751f28e769_qq98281642.jpg!1)
![avatar-vip](https://csdnimg.cn/release/downloadcmsfe/public/img/user-vip.1c89f3c5.png)
地图之家家长
- 粉丝: 4786
- 资源: 138
![benefits](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-1.c8e153b4.png)
下载权益
![privilege](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-2.ec46750a.png)
C知道特权
![article](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-3.fc5e5fb6.png)
VIP文章
![course-privilege](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-4.320a6894.png)
课程特权
![rights](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-icon.fe0226a8.png)
开通VIP
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)
- 1
- 2
- 3
前往页