You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

161 lines
5.0 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quick Start - Leaflet</title>
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="./leaflet/leaflet.css" />
<script src="./leaflet/leaflet.js"></script>
<!-- css -->
<link rel="stylesheet" href="./control.css">
<!-- wmts -->
<script src="./leaflet.TileLayer.WMTS/leaflet-tilelayer-wmts.js"></script>
<!-- script -->
<script src="./control.js"></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<script>
let map = L.map('map', {
center: [39.910362, 116.397378],
zoom: 5
});
// 地图切换
var baseLayers = {
'天地图影像-wmts': L.tileLayer('http://127.0.0.1:21133/wmts/tianditu?x={x}&y={y}&z={z}', {
maxZoom: 19,
attribution: "天地图影像-wmts"
}),
"高德矢量": L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', {
attribution: "高德矢量"
}).addTo(map),
'影像底图': L.tileLayer('https://t3.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=1457e59df27f2d4ba3547aa27152f2ae', {
maxZoom: 19,
attribution: "影像底图"
}),
'矢量底图': L.tileLayer('https://t3.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=1457e59df27f2d4ba3547aa27152f2ae', {
maxZoom: 19,
attribution: "矢量底图"
}),
'地形晕渲': L.tileLayer('https://t4.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=1457e59df27f2d4ba3547aa27152f2ae', {
maxZoom: 19, attribution: "地形晕渲"
}),
'全球境界': L.tileLayer('https://t4.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=1457e59df27f2d4ba3547aa27152f2ae', {
maxZoom: 19, attribution: "全球境界"
}),
"CartoDB Positron": L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: "CartoDB Positron"
}),
"OpenTopoMap": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: "OpenTopoMap"
}),
}
var layerControl = L.control.layers(baseLayers, {}, {
position: 'topleft',
collapsed: true
});
layerControl.addTo(map);
//比例尺
var scale = L.control.scale({
maxWidth: 200,
metric: true,
imperial: false
}).addTo(map);
// icon
let starIcon = L.icon(
{
iconUrl: './icon/star-red.svg',
shadowUrl: './icon/star.png',
iconSize: [36, 36],
shadowSize: [48, 48]
}
)
let starMarker = L.marker([39.910362, 116.397378],
{
icon: starIcon,
// zIndexOffset: 0 // 防止标签与图标相互遮挡
}).addTo(map);
var customLabel = L.divIcon({
html: '<div class="my-label">丽水市</div>',
className: 'custom-marker-label'
});
let label = L.marker([39.910362, 116.397378],
{
icon: customLabel,
zIndexOffset: 0 // 防止标签与图标相互遮挡
}).addTo(map);
// 标记
// var marker = L.marker([51.5, -0.09]).addTo(map)
// .bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();
//圆
// const circle = L.circle([51.508, -0.11], {
// color: 'red',
// fillColor: '#f03',
// fillOpacity: 0.5,
// radius: 500
// }).addTo(map).bindPopup('I am a circle.');
//三角形
// const polygon = L.polygon([
// [51.509, -0.08],
// [51.503, -0.06],
// [51.51, -0.047]
// ]).addTo(map).bindPopup('I am a polygon.');
// var bj = L.marker([39.92, 116.46]).bindPopup('这里是北京');
// sh = L.marker([31.213, 121.445]).bindPopup('这里是上海');
// gz = L.marker([23.16, 113.23]).bindPopup('这里是广州');
// var cities = L.layerGroup([bj, sh, gz]).addTo(map);
// var route = [[39.910362, 116.397378], [38.474558, 112.851563]];
var routes = [];
var lines = [];
var last;
var current;
// L.polyline(route, { color: 'red'}).addTo(map).bindPopup("这是折线");
map.on('click', onMapClick);
</script>
</body>
</html>