leaflet marker简单方法全代码 参照官网实例

<template>
  <div class="airMoniMap1">
    <div class="mapClass" id="mapid">
    </div>
    <!-- 标题时间显示 -->
    <div class="airMoniTitle">
      <p>空气质量实测信息</p>
      <p>{
  {selectedTimeTitle}}</p>
    </div>
    <!-- 地图view视图区域选择 -->
    <div class="mapView" >
      <a-radio-group :defaultValue="mapViewArr[0].code" buttonStyle="solid"  @change="mapViewChange">
        <a-radio-button :value="item.code" :class="item.code == cityName?'hover mapViewli':'mapViewli'" v-for="(item) in mapViewArr" :key="item.code">{
  {item.name}}</a-radio-button>
      </a-radio-group>
    </div>
    <!-- 污染物类型 -->
    <div class="airQuality" >
      <a-radio-group  :defaultValue="airArr[0].code" buttonStyle="solid" @change="airChange">
        <a-radio-button :value="item.code" :class="item.code == airType?'hover airQualityli':'airQualityli'" v-for="(item) in airArr" :key="item.code"><span v-html="item.name"></span> </a-radio-button>
      </a-radio-group>
    </div>
    <!-- 污染物严重指标 -->
    <div class="aqiColorBar" >
      <ul>
        <li>优</li>
        <li>良</li>
        <li>轻度</li>
        <li>中度</li>
        <li>重度</li>
        <li>严重</li>
      </ul>
    </div>
    <!-- 背景气象选择 -->
    <div class="metField">
      <a-radio-group  :defaultValue="metTypeArr[0].code" buttonStyle="solid" @change="metTypeChange" >
        <a-radio-button :value="item.code" :class="item.code == metType?'hover metFieldli':'metFieldli'"
                        v-for="(item) in metTypeArr" :key="item.code">{
  {item.name}}</a-radio-button>
      </a-radio-group>
    </div>
    <!--  高度选择-->
    <div class="metLevelType">
      <a-radio-group  :defaultValue="levelTypeArr[4].code" buttonStyle="solid" @change="levelTypeChange" v-if="levelTypeVisible" >
        <a-radio-button :value="item.code" :class="item.code == levelType?'hover metLevelTypeli':'metLevelTypeli'"
                        v-for="(item) in levelTypeArr" :key="item.code">{
  {item.name}}</a-radio-button>
      </a-radio-group>
    </div>
    <!-- 气象图例单位及各项数据指标颜色 -->
    <div class="metColorBar">
      <ul>
        <li style="background:#fff;color:#000;">{
  {colorBarUnit}}</li>
        <li :style="{'background': 'rgb('+ item.intervalColors +')'}" v-for="(item,i) in colorBarArr"  :key="i" >{
  {item.intervalName}}</li>
      </ul>
    </div>
    <!-- 时间轴 -->
    <transverseTime @timeChange="timeLineChange"  :initDate="initDate" :initSelectedTime="initSelectedTime"
                    :timeType="timeType" :timeLength="7" style="bottom:0;width: calc(100% - 212px);"/>

  </div>

</template>

<script>
import {getGfsData, getColorBar, getGeojsonByName, getGfsImage} from "@api/gfsData";
import {getAllCityAirMoniListOnChina,getAllSiteAirMoniListOnChina,getChinaMoniDataTime} from '@api/observe'
import littleBarEchart from "@comp/echart/littleBarEchart";
import mapSourceEchart from "@comp/echart/mapSourceEchart";
import Explain from '@comp/ImgBox/Explain'
import {dateAdd,getDateYMD,getDateYMDHMS,getDateYMDH_CN,stringToDate} from '@utils/date'
import {getPollLevelColor, getPollLevelTextColor} from "@utils/aqi";
import transverseTime from '@comp/timeLine/transverseTime';

var map;
var cityLayer;
var siteLayer;
export default {
  name: "airMoniMap1",
  components:{
    transverseTime,
    Explain,
    littleBarEchart,
    //mapSourceEchart
  },
  created() {
    this.searchDate = getDateYMDHMS(new Date());//当前时间 'yyyyMMddhhmmss'
    this.initDate = getDateYMD(dateAdd(new Date(),'d',-6),'-');//时间轴，初始日期,格式：yyyy-MM-dd
    this.getLastTime();
  },
  data(){
    return{
      centerpoint:[35.717, 112.6333],//地图初始中心点
      zoomlevel:5,//地图初始zoom
      baseLayer:null,//背景底图
      imageLayer:null,//气象image图层
      chinaLineLayer:null,//中国行政区边界线底图
      bondarylayer:null,//加载的geojson
      imageBounds:[[0, 50], [61.148, 180]],//西南角点,东北角点(纬度、经度)
      cityLayerMarkGroup:L.layerGroup([]),
      siteLayerMarkGroup:L.layerGroup([]),

      searchDate:'',//当前时间 'yyyyMMddhhmmss'
      startLon:'',//开始经度
      endLon:'',//结束经度
      startLat:'',//开始维度
      endLat:'',//结束维度
      cityName:'quanguo',//选择的地图视野
      airType:'aqi',//选择的空气质量指标
      metType:'WIND',//选择的气象类型
      levelType:'ground',//选择的垂直高度
      levelTypeVisible:true,//不同气象类型-对应垂直高度按钮可见（风、湿度、温度：可见，其他：不可见）
      colorBarArr:[],//气象图例-颜色数组
      colorBarUnit:'',//气象图例-单位
      windStatus:true,//地图状态
      time:'',//时间 'yyyyMMddhh'
      timeType:'hour',//时间类型
      cityArr:[],//地图中的城市数组
      siteArr:[],//地图中的站点数组
      dataFlag:0,//站点和城市的标记，同时请求，然后存放数组中，然后去绘制地图marker
      initDate:'',//时间轴，初始日期,格式：yyyy-MM-dd
      initSelectedTime:null,//时间轴，初始时间，格式：yyyyMMddhhmmss
      selectedTime:null,//时间轴，点击事件之后，选择时间，格式：yyyyMMddhhmmss
      selectedTimeTitle:'',//根据selectedTime计算的时