快速入门

安装

$ npm i some-map-components

说明

mapType目前可选类型:

1.天地图

TianDiTu.Normal(天地图-普通)、TianDiTu.Satellite(天地图-卫星)、TianDiTu.Terrain(天地图-地形)

2.高德地图

GaoDe.Normal(高德地图-普通)、GaoDe.Satellite(高德地图-卫星)

3.谷歌地图

Google.Normal(谷歌地图-普通)、Google.Satellite(谷歌地图-卫星)

4.国外地图资源

Streets、Topographic、NationalGeographic、Oceans、Gray、DarkGray、 Imagery、ImageryClarity 、ImageryFirefly、ShadedRelief、Terrain、USATopo

用法

<template>
  <div class="wrap">
    <!-- @markerClick 监听地图marker标注点击事件 -->
    <leafletMap :options="options" class="map" @markerClick="clickHandle" @getDiyMarkerData="diyMarkerDataHandle"></leafletMap>
  </div>
</template>


<script>
import leafletMap from "some-map-components";
export default {
  name: "app",
  data() {
    return {
      options: {
        //地图底图类型
        mapType: "TianDiTu.Normal",
        //初始化地图中心，注意 纬度在前，经度在后
        // center: [22.523, 113.834],
        center: [23.101540544935897, 113.28635787333718],
        //初始化地图层级
        zoom: 16,
        //地图选择下拉选框配置
        seletor: {
          show: true,
          maps: [
            {
              name: "天地图-普通",
              mapType: "TianDiTu.Normal"
            },
            {
              name: "天地图-卫星",
              mapType: "TianDiTu.Satellite"
            },
            {
              name: "天地图-地形",
              mapType: "TianDiTu.Terrain"
            },
            {
              name: "高德地图-普通",
              mapType: "GaoDe.Normal"
            },
            {
              name: "高德地图-卫星",
              mapType: "GaoDe.Satellite"
            },
            {
              name: "谷歌地图-普通",
              mapType: "GaoDe.Normal"
            },
            {
              name: "谷歌地图-卫星",
              mapType: "Google.Satellite"
            },
            {
              name: "广东省局测试海图",
              mapType: "testSeaMap"
            },
            {
              name: "Streets",
              mapType: "Streets"
            }
          ]
        },
        //标注点数据集合
        markers: {
          //标注点通用设置
          common: {
            //标注点样式通用设置
            style: {
              //标注点图标通用设置
              icon: {
                //标注点图标图片路径
                // iconUrl: "../static/images/ship.png",
                // iconUrl: "",
                //标注点图标图片尺寸
                // iconSize: [32, 32]
              }
            },
            //标注点图标旋转角度
            rotationAngle: 0
          },
          data: []
        },
        //折线数据集合
        polylines: {
          //折线通用设置
          common: {
            //折线样式通用设置
            style: {
              //折线颜色
              color: "#3388ff",
              //折线的线宽
              weight: 3,
              //折线的透明度
              opacity: 1
            }
          },
          data: []
        }
      }
    };
  },
  components: {
    leafletMap
  },
  methods: {
    //地图marker标注点击事件处理函数,data为marker点的数据对象
    clickHandle(data) {
      console.log(data);
    },
    diyMarkerDataHandle(data) {
      console.log(data);
    }
  },
  mounted() {
    this.options.markers.data = [
      //每个标注点的数据对象
      {
        //标注点名称
        name: "test marker",
        //标注点经纬度，纬度在前，经度在后
        // coords: [22.523, 113.834],
        coords: [23.101540544935897, 113.28635787333718],
        //标注点点击后的弹出信息
        popupContent: "I am a test marker",
        //标注点样式自定义设置
        style: {
          //标注点图标自定义设置
          icon: {
            //标注点图标图片路径
            // iconUrl: "",
            //标注点图标图片尺寸
            // iconSize: [32, 32]
          }
        },
        //label文本
        showLabel: true,
        //标注点图标旋转角度
        rotationAngle: 0
      }
    ];

    this.options.polylines.data = [
      {
        //折线名称
        name: "test line",
        //折线经过的点数据
        points: [
          [22.533, 113.834],
          [22.523, 113.864],
          [22.503, 113.864]
        ],
        //折线自定义样式设置
        style: {
          //折线颜色
          color: "#3388ff",
          //折线的线宽
          weight: 6,
          //折线的透明度
          opacity: 1
        }
      }
    ];

    //获取地图实例
    let myMap = fhMap.getMap();
    let bounds = {};
    //监听地图级别改变
    myMap.on("zoomend", function(e) {
      //获取地图视窗矩形对角的两个位置
      bounds = myMap.getBounds();
      console.log(bounds);
    });
    //监听地图移动
    myMap.on("moveend", function(e) {
      bounds = myMap.getBounds();
      console.log(bounds);
    });
    //是否激活点选底图生成自定义标注并显示地址 true:激活 false:不激活
    fhMap.activeDiyMarker(true);
  }
};
</script>