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添加到地图layer
          that.map.addLayer(markersgrop);
        });
    }
  }