leaflet＋vue实现地图点线面标记获取点击经纬度 区域可视化 代码及遇到的问题修正笔记

用的vueCli4.5.4

页面代码如下

<template>
  <div class="hello">
    <div class="ol-map" ref="olMap" style="width:100%;height:100%"></div> //设置地图容器
  </div>
</template>

<script>
import L from 'leaflet'; // 引入leaflet 前提是要已经安装 安装指令是npm i leaflet
import "leaflet/dist/leaflet.css";
import {geojsonval} from '../js/geo.js';  //地图区域可视化json 
export default {
  name: 'HelloWorld',
  data () {
    return {
      map: undefined
    }
  },
  mounted(){
    this.map = L.map(this.$refs.olMap, {
            center: [39.93875, 116.321],//地图中心
            zoom: 16,//zoom等级
            maxZoom: 16,
            minZoom: 7
        });


        //为地图容器添加底图 使用的是mapbox自带地图 
        //开始路径一直配置不出来 费了好长时间 基本配置规则就是https://api.mapbox.com/styles/v1/你的用户名/style的一个什么东西哈哈哈在你的mapbox studio里/tiles/256/{z}/{x}/{y}?access_token=你的token

        L.tileLayer(
        'https://api.mapbox.com/styles/v1/zhaiyzh/ckes4nsma2yls19op279otef9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiemhhaXl6aCIsImEiOiJja2VyeWYzNTYwbHB1MnhzYTV0Z3didG1hIn0.forlrmKVYKXTsyP7voWu9Q' , {
        }).addTo(this.map); 
     //点击地图弹出经纬度

         this.map.on('click', function(e) {
          console.log(e);
          alert('纬度：' + e.latlng.lat + '\n经度：' + e.latlng.lng);
        });
         //添加marker
        var marker=L.marker([39.93875, 116.321]).addTo(this.map);
        //添加marker pp
        marker.bindPopup('这是首都体育馆').openPopup();
        //多点过滤
         var marker=L.marker([39.94, 116.33]).addTo(this.map);
        var someFeatures = [{
            "type": "Feature",
            "properties": {
                "name": "Coors Field",
                "show_on_map": true
            },
            "geometry": {
                "type": "Point",
                "coordinates": [39.94, 116.33]
            }
        }, {
            "type": "Feature",
            "properties": {
                "name": "Busch Field",
                "show_on_map": false
            },
            "geometry": {
                "t