Leaflet地图基础示例

Dear 丶 2022-09-04 05:49 362阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css">
        <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
        <title>Google Map</title>
        <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style>
    </head>
    
    <body>
        <div id="map"></div>
        <script> //初始化地图 var map = L.map(document.getElementById("map"), { center: L.latLng(39.91589994226363, 116.39079093933107), zoom: 16, minZoom: 10, maxZoom: 20 }); //添加底图瓦片 var tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; L.tileLayer(tileUrl, { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', minZoom: 10, maxZoom: 20 }).addTo(map); //创建图标 var icon = L.icon({ iconUrl: 'https://img-home.csdnimg.cn/images/20210806113404.gif', className: 'icon' }); //画点 var marker = new L.marker( { lat: 39.920598, lng: 116.390576 }, { draggable: true, icon: icon, //rotationAngle: 80 //旋转角度，需要借助插件leaflet.rotatedMarker.js }, ).addTo(map); marker.setLatLng([39.920598, 116.390576]); //更新位置 //marker.setRotationAngle(120); //更新角度，需要借助插件leaflet.rotatedMarker.js //给点添加气泡 marker.bindPopup('气泡内容', { //内容可以自定义为HTML，如：<div>自定义结构</div> offset: [0, -16], // 向上偏移 className: 'test' // 自定义class maxWidth: 100, // 最大宽度 minWidth: 50, // 最小宽度 maxHeight: 100, // 最大高度 closeOnClick: false, //点击地图不关闭气泡 closeButton: false //隐藏关闭按钮 }).openPopup(); var popup = marker.getPopup(); //获取气泡对象 popup.setContent('更新内容'); // 更新气泡内容 // 单独使用气泡 var popup = L.popup() .setLatLng(latlng) .setContent('<p>Hello world!<br />This is a nice popup.</p>') .openOn(map); //给点添加提示 marker.bindTooltip('提示内容', { //内容可以自定义为HTML，如：<div>自定义结构</div> direction: 'top', // 显示在头部 offset: [0, -36], // 向上偏移 permanent: true, // 永久打开提示 className: 'test', // 自定义class opacity: 0.8 }).openTooltip(); var tooltip = marker.getTooltip(); //获取提示对象 tooltip.setContent('更新内容'); // 更新提示内容 // 单独使用提示 var tooltip = L.tooltip() .setLatLng(latlng) .setContent('<p>Hello world!<br />This is a nice tooltip.</p>') .setOpacity(0.8) .openOn(map); //画线 var line = L.polyline([ [39.91710957679779, 116.38731479644777], [39.91656647822125, 116.39079093933107], [39.91707666185516, 116.39465332031251] ], { color: 'blue', weight: 5, opacity: 1 }).addTo(map); //画园 var circle = L.circle( { lat: 39.911991113185834, lng: 116.39096260070802 }, { radius: 100, color: 'red', fillColor: 'red', fillOpacity: 1 } ).addTo(map); //画矩形 var rectangle = L.rectangle([ [39.916006917607426, 116.38916015625001], [39.914031961250565, 116.39355897903444] ], { dashArray: 5 }).addTo(map); //画多边形 var polygon = L.polygon([ [39.91821221823441, 116.38911724090578], [39.91962752301386, 116.38995409011842], [39.919709807275694, 116.3919496536255], [39.91836033289567, 116.39287233352663], [39.91775141501732, 116.39083385467531], [39.91821221823441, 116.38911724090578] ]).addTo(map); //点击事件 map.on('click', function (e) { console.log(e.latlng); }); //获取当前放大或者缩小的等级 map.on('zoomend', function (e) { console.log(e.target.getZoom()); }); //叠加整张图片 var imageBounds = [[22.750634862384956, 114.6252939105034], [22.765235295811326, 114.63873714208606]]; //图片的经纬度范围，西南角点,东北角点(纬度、经度) var imageUrl = 'test.png';//图片的地址 var imageLayer = L.imageOverlay(imageUrl, imageBounds, { opacity: 0.8 }); //opacity是透明度 map.addLayer(imageLayer); //中心点偏移指定像素值 var mapSize = map.getSize(); //获取地图像素大小 var offset = mapSize.x - (mapSize.x - 100); //偏移量100px map.panBy(new L.Point(-offset, 0), { animate: false }); //地图移动到偏移量位置 //判断点经纬度是否在地图视图边界内，不在则重设地图中心点 var latLng = L.latLng([22.757820, 22.757820]); var bounds = map.getBounds(); //地图视窗边界 var isInView = bounds.contains(latLng); //判断点是否在视窗内 !isInView && map.setView([lat, lng], map.getZoom()); //如果不在视窗内则重新设置地图中心点 //边界相关方法 var pixelBounds = map.getPixelBounds(); //获取像素投影坐标系下的视图边界 var boundsSize = map.getPixelBounds().getSize(); //获取地图视图容器边界的大小 var boundsZoom = map.getBoundsZoom(); //获取适应整个地图视图边界的最大缩放级别 </script>
    </body>
    
    </html>

#### 设置地图中心点 ####

map.setView([22.757820, 22.757820]); // 设置中心点
    map.setView([22.757820, 22.757820], map.getZoom()); // 设置中心点和缩放级别

#### 设置飞到指定坐标 ####

// 默认配置
    map.flyTo([22.757820, 22.757820]);
    
    // 配置动画参数
    map.flyTo([22.757820, 22.757820], map.getZoom(), { 
    	animate: true, // 是否开启动画
    	duration: 0.5 // 动画平移的持续时间（秒）
    });

#### 设置飞到最佳视角 ####

let paths = [[22.757820, 22.757820], [22.757820, 22.757820], [22.757820, 22.757820]];
    map.flyToBounds(paths, { 
        animate: false // 可以关闭动画
    });

[Leaflet 示例集锦大全：http://develop.smaryun.com:81/API/JS/IGSInterfaceDemoForLeaflet/index.htm][Leaflet _http_develop.smaryun.com_81_API_JS_IGSInterfaceDemoForLeaflet_index.htm]

官方文档API：[https://leafletjs.com/reference-1.7.1.html][https_leafletjs.com_reference-1.7.1.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]: /images/20220829/f96122e2aa0b4a8f8e29fb3183932d17.png
[Leaflet _http_develop.smaryun.com_81_API_JS_IGSInterfaceDemoForLeaflet_index.htm]: http://develop.smaryun.com:81/API/JS/IGSInterfaceDemoForLeaflet/index.htm
[https_leafletjs.com_reference-1.7.1.html]: https://leafletjs.com/reference-1.7.1.html