vue+leaflet(npm包管理)实战

安装leaflet与点聚合效果插件（需要就装）

npm install leaflet --save
npm install leaflet.markercluster --save //(点聚合)

main.js里加载leftlet基本依赖

import L from "leaflet";
import "leaflet/dist/leaflet.css";
Vue.prototype.$L=L

开发页面

import {
     MarkerClusterGroup } from "leaflet.markercluster";

<style>
@import "leaflet.markercluster/dist/MarkerCluster.css";
@import "leaflet.markercluster/dist/MarkerCluster.Default.css";
</style>

mounted() {
    this.initmap();},methods:{
    initmap() {
    this.map ||(this.map = this.$L.map("contain", {
    minZoom: 10,maxZoom: 15,maxBounds: [//右下角点位开始，逆时针[24.255729263830737, 119.18612133789064],[25.69391130293591, 119.18612133789064],[25.69391130293591, 117.4925994873047],[24.255729263830737, 117.4925994873047]]}).setView([24.91695414, 118.58299255], 11));this.$L.tileLayer(`http://222.77.0.xxx:8000/new/tiles/{z}/{x}/{y}.png`, {
    }).addTo(this.map);this.GetMapInspectionList();},GetMapInspectionList(){
    let that = this;// 创建一个 聚合Layer 实例来承载 Marker点let markersgrop = that.$L.markerClusterGroup({
    maxClusterRadius: 50,//聚合范围iconCreateFunction: function(cluster) {
    let markers = cluster.getAllChildMarkers();let n;n = markers.length;return L.divIcon({
    html: `<div><span>${
      n}</span></div>`,className: "marker-cluster marker-cluster-small",iconSize: that.$L.point(40, 40)});}});that.http.post(`这里放请求地址`, {
    参数}).then(res => {
    for (let item of res.rows) {
    var myIcon = L.divIcon({
    html: `<img style="width:30px;height:30px" src="${
      require("../../assets/radar.png")}"/>`,className: "my-div-icon",iconSize: that.$L.point(40, 40)});var m = that.$L.marker(coordtransform//转经纬度，这个插件自己安装,我没贴代码.wgs84togcj02(item.Longitude, item.Latitude).reverse(),{
    title: item.SiteName,icon: myIcon});let elepop = ``;elepop = `<div class="popcontain" id="popcontain"><div class="baseinfo"><el-row><el-col :span="11"><div class="td">点位名称：${
      item.SiteName}</div></el-col><el-col :span="11"><div class="td">车道数：${
      item.Lanes}</div></el-col><el-col :span="11"><div class="td">坡度：${
      item.Slop}</div></el-col><el-col :span="11"><div class="td">状态：<el-link :type="basenum[0] === 0 ? 'danger' : 'success'">{
     {basenum[0] === 0 ? "离线" : "在线"}}</el-link></div></el-col><el-col :span="24"><div class="td">地点：${
      item.SiteAddress}</div></el-col><div class="sendmessage"><el-button size="small" type="primary">发送短信</el-button></div></el-row></div><el-row class="totalnum" :gutter="10"><el-col :span="6"><div class="line"><b>{
     { basenum[0] }}</b> <span>监测总数</span></div></el-col><el-col :span="6"><div class="line"><b>{
     { basenum[2] }}</b> <span>超标数</span></div></el-col><el-col :span="6"><div class="line"><b>{
     { basenum[1] }}</b> <span>合格数</span></div></el-col><el-col :span="6"><div class="line"><b>{
     { basenum[3] }}</b> <span>无效数</span></div></el-col></el-row><el-tabs v-model="activeName"><el-tab-pane label="统计信息" name="first"><div id="cartype" style="width:500px;height:280px"></div></el-tab-pane></el-container></el-tab-pane></el-tabs></div>`;m.on("click", function(e) {
    setTimeout(() => {
    //不加定时器，不然弹框样式会有问题，暂时没想到好的办法let infowindow = that.$L.popup({
     minWidth: 500 }).setLatLng(e.latlng).setContent(elepop).openOn(that.map);//让html字符串元素能使用vue语法,方便开发let cusvue = new Vue({
    el: "#popcontain",data() {
    return {
    activeName: "first",valuelist: [],basenum: []};},mounted() {
    let $that = this;$that.getcartype();$that.getbasenum();},methods: {
    getcartype() {
    //请求车牌类型数据let $that = this;$that.valuelist = [];$that.http.post(`../ygApi/api/Telemetry/GetCllxTjData?siteid=${
      item.SiteID}&passtime=${
      parseTime(new Date())}`).then(res => {
    for (let item of res) {
    $that.valuelist.push({
    value: item.num,name: item.cllx});}$that.initchart();});},getbasenum() {
    //请求点位统计数据let $that = this;$that.basenum = [];$that.http.post(`../ygApi/api/Telemetry/GetYcTjXx?siteid=${
      item.SiteID}&passtime=${
      parseTime(new Date())}`).then(res => {
    let hg = Number.parseInt(res[0]) || 0;let cb = Number.parseInt(res[1]) || 0;let wx = Number.parseInt(res[3]) || 0;let total = hg + cb + wx;$that.basenum.push(total, hg, cb, wx);});},initchart() {
    let $that = this;let $cllxtjoptions = {
    title: {
    show: true,text: " 车牌类型统计饼图",x: "center",subtext: `(${
      parseTime(new Date(), "{y}-{m}-{d}")})`},legend: {
    show: true,orient: "horizontal",x: "center",y: "bottom"},tooltip: {
    trigger: "item",formatter: "{a} <br/>{b} : {c} ({d}%)"},color: comcolorlist,toolbox: {
    show: false,feature: {
    mark: {
     show: true },dataView: {
     show: true, readOnly: false },magicType: {
    show: true,type: ["pie", "funnel"],option: {
    funnel: {
    x: "25%",width: "50%",funnelAlign: "left",max: 1548}}},restore: {
     show: true },saveAsImage: {
     show: true }}},calculable: true,series: [{
    name: "车牌类型统计",type: "pie",radius: ["60%", "40%"],center: ["50%", "50%"],label: {
    normal: {
    show: false,position: "center"},emphasis: {
    show: false,textStyle: {
    fontSize: "30",fontWeight: "bold"}}},labelLine: {
    normal: {
    show: false}},data: $that.valuelist}]};let $cplxtj = that.echarts.init(document.getElementById("cartype"));$cplxtj.setOption($cllxtjoptions);}}});}, 200);});//将Marker点加到聚合layer中markersgrop.addLayer(m);}//将聚合layer添加到地图layerthat.map.addLayer(markersgrop);});}}