企业官网建设流程全解析

先上官网

leaflet官网
中文官网

展示地图

<link rel="stylesheet" href="leaflet/leaflet.css"/> <script type="text/javascript" src="leaflet/leaflet-src.js"></script>

<div id="mapid"></div>

const mymap = L.map('mapid').setView([38.97649, 112.47803], 14); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(mymap);

添加点 线 圆

点

L.marker([37.85008, 112.4455]).addTo(mymap) .bindPopup("街道")

多个点

L.layerGroup([marker1, marker2]).addTo(map);

如果是非常多的点可以用下面的点聚合 或者海量点

线

const latlngs = [ [38.44498, 111.02783], [38.37612, 113.37891], [37.16032, 111.26953], [38.97649, 112.47803], [36.80928, 113.02734], [38.44498, 111.02783] ]; const polyline = L.polyline(latlngs, {color: 'red'}).addTo(mymap); // zoom the map to the polyline mymap.fitBounds(polyline.getBounds());

圆

L.circle([37.89220, 112.34619], { radius: 135000,//半径距离 color: 'red',//颜色 fill: false,//是否填充 interactive: false,//false 不会触发点击事件 只会做为底图 }).addTo(mymap);

添加移动轨迹

在上面的基础上添加一个leaflet插件leaflet.motion
leaflet.motion地址

<script type="text/javascript" src="leaflet/leaflet.motion.min.js"></script>

var latlngArr = [[34.52466, 110.23682], [35.40696, 113.51074], [36.41067, 113.71509], [36.70894, 113.49756]] var carIcon = L.icon({ iconUrl:'img/close.png', iconSize:[25.1,25], }); L.motion.polyline(latlngArr,{ color:'red' },{ auto:true, duration:10000, easing:L.Motion.Ease.easeInOutQuart },{ removeOnEnd:false, icon:carIcon }).addTo(mymap)

点聚合能力

借助点聚合能力插件

/** 点聚合能力实现 head里面 引入js文件还有样式 <link rel="stylesheet" href="./leaflet/dianjuhe/MarkerCluster.css"/> <link rel="stylesheet" href="./leaflet/dianjuhe/MarkerCluster.Default.css"/> <script src="./leaflet/dianjuhe/leaflet.markercluster-src.js"/> */ var markers = L.markerClusterGroup({ icon: L.icon({ iconUrl: 'img/close.png', iconSize: [25.1, 25], }), //控制界面上面显示得图标 iconCreateFunction: function(cluster) { if (cluster.getChildCount()>1){ return new L.Icon({ iconUrl: '/img/has_point.png', iconSize: [20, 20], }) }else { return carIcon } // return L.divIcon({ html: '<b></b>' }); } }); for (var i = 0; i < Areas.length; i++) { var a = Areas[i]; var title = a.name; var marker = L.marker(new L.LatLng(a.latitude, a.longitude), {title: title}); //permanent 是永久打开工具提示，还是仅在鼠标悬停时打开。 marker.bindTooltip("tip-for"+i, { direction: "top", permanent: true, offset: L.point(0, -8) }).openTooltip() markers.addLayer(marker); } myMap.addLayer(markers);

在地图上随意手动画点、线、多边形、圆

也是借助插件Geoman

// head中引入 <script type="text/javascript" src="./leaflet-geoman.min.js"></script> <link rel="stylesheet" href="./leaflet-geoman.css"/>

//添加可以画圆画点画多边形的菜单 且有监听 myMap.pm.addControls({ position: "bottomleft", drawPolygon: true, // 添加绘制多边形 drawMarker: true, //添加按钮以绘制标记 drawCircleMarker: false, //添加按钮以绘制圆形标记 drawPolyline: true, //添加按钮绘制线条 drawRectangle: true, //添加按钮绘制矩形 drawCircle: true, // 添加按钮绘制圆圈 editMode: true, // 添加按钮编辑多边形 dragMode: true, // 添加按钮拖动多边形 cutPolygon: true, // 添加一个按钮以删除图层里面的部分内容 removalMode: true, // 清除图层 }) myMap.on("pm:drawstart", (e) => { //绘制开始时事件 console.log(e, "开始"); }); myMap.on("pm:create", (e) => { console.log(e, "绘制完成时调用"); if (e.shape === "Rectangle") { alert(e.layer._latlngs[0]); //获取绘制的坐标 } else if (e.shape === "Circle") {//圆形 console.log("圆心经纬度" + e.layer._latlng, "半径" + e.layer._mRadius) } else if (e.shape === "Line") { console.log(e.layer._latlngs) } else if (e.shape === "Polygon") { console.log(e.layer._latlngs) } });