vue地图插件vue2-leaflet的使用

vue2-leaflet是对ledflet的封装,vue项目中直接使用vue2-leaflet即可。

1、安装

项目中会使用到vue2-leaflet和leaflet,因此需要安装2个插件

npm install vue2-leaflet --save

npm install leaflet --save

2、使用

组件中引入,也可以全局引入,代码如下:

<template>

<div>

  <l-map

    :zoom="currentZoom"

    :center="currentCenter"

    :options="mapOptions"

    style="height:100%;"

    :minZoom="3" :maxZoom="18"

  >

    <l-tile-layer :url="url" :options="option" />

    <l-tile-layer :url="Annotation" :options="option" />

    <!-- 比例尺 -->

    <l-control-scale position="topleft" :imperial="false" :metric="true"></l-control-scale>

    <!--显示轨迹  -->

    <l-polyline :lat-lngs="polyline.latlngs" :color="polyline.color"></l-polyline>

    <!-- marker点 -->

    <l-marker :lat-lng="reportPoint" :icon="icon_report"></l-marker>

  </l-map>

  </div>

</template>

<script>

import { mapGetters,mapState,mapActions, mapMutations } from "vuex";

import { latLng, icon } from "leaflet";

import {

  LMap,

  LTileLayer,

  LMarker,

  LPolyline,

  LIcon,

  LControlScale

} from "vue2-leaflet";

export default {

  name: "TDTVecMap",

  components: {

    LMap,

    LTileLayer,

    LMarker,

    LPolyline,

    LIcon,

    LControlScale

  },

  data() {

    return {

      param:{

        name: "获取人员轨迹", 

        UserID: "10031", 

        sDate: "2019-10-01 10:00", 

        fDate: "2019-10-01 11:00",

        Map: "arcgis_tianditu_online", 

        DataType: "json"

      },

     currentZoom :16,

    currentCenter :latLng(31.9922383, 118.7115911) ,

      replyLine:[],

      polyline: {

        latlngs: [],

        color: 'blue'

      },

      // 底图 天地图

      Annotation:"http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=583a5ba8766602fb9802a4aa5bf0b40e",

      url:"http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=583a5ba8766602fb9802a4aa5bf0b40e",

      option: { subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"] },

      showParagraph: false,

      mapOptions: {

        zoomSnap: 0.5

      },

//marker点图标

      icon_report: icon({

        iconUrl: require("../../../../assets/mobile/images/NJGHV3/report.png"), 

        iconSize: [25], //图片大小

        iconAnchor: [30, 37]

      })

    };

  },

  methods: {

    ...mapActions("repair/TrajectoryInfo",{

      loadTrajectoryData:"loadTrajectoryData"

    }),

    showLongText() {

      this.showParagraph = !this.showParagraph;

    },

    loadMap() {

        //请求轨迹数据

        this.loadTrajectoryData(this.param).then(res=>{

          var lagPoint=res

          for(let i=0;i<lagPoint.length;i++){

            var temparr=[]

            temparr=[lagPoint[i].lat,lagPoint[i].lng]

            this.replyLine.push(temparr)

          }

          this.polyline.latlngs=this.replyLine

        })

    }

  },

  computed: {

    ...mapState("repair/TrajectoryInfo",{

      reportPoint:state=>state.reportPoint

    }),

  },

  mounted() {

    this.loadMap();

  }

};

</script>

具体参见vue2-leaflet官网:https://vue2-leaflet.netlify.app

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。