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
161 lines
5.0 KiB
1 year ago
|
<!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>
|