mmx-mapbase v1.0.9

mmx-mapbase

介绍

vue2地图组件，基于leaflet 1. 加载瓦片组件mapView 2. 地图浮窗层组件mapOverItem 3. 地图marker层组件mapMarker 4. 地图图例组件mapLegend 5. 地图多边形交互组件mapGeometry 6. 导出leaflet对象为L 6. 新增marker层聚合组件（mapClusterMarker），没有创建专属pane

软件架构

vue2.7.7 vite leafletjs

安装教程

1. npm i mmx-mapbase
2. 全局引入 main.js 中 单个组件引入： import {mapView} from 'mmx-mapbase'; 注册：Vue.component('componentName', mapView);
3. 局部引入 在需要的地方引入注册即可；
4. 样式引入：import 'mmx-mapbase/style.css'

使用说明

mmx-mapbase整体用法参考:

    <mapView ref="getMap" @onMapZoomEnd="getListMapLayersDraw"
      :paneArr=" ['geometryDraw','canvasMarker','gridLyaers']">
      <template v-slot="{ map }">
        <mapOverItem :style="{ top: '200px', left: 'auto', right: '680px' }">
           <mapGeometry ref="refmapGeometry" :map="map" @mapDrawClearEnd="mapDrawClearEnd"
              @mapDrawCircleEnd="mapDrawCircleEnd">
              <button @click="mapDrawClear()">清除</button>
              <button @click="mapDrawCircle()">圈选</button>
              <button @click="mapDrawLine()">画线</button>
              ···
            </mapGeometry>
        </mapOverItem>
        <mapMarker :map="map" :data="markerGroup" @markerClick="markerClick" ref="map" />
      </template>
    </mapView>

组件单独使用：

1. mapView 参数-默认值 地图加载配置：setMapOptions（layers参数待优化）

    {
        center: [37.7289, 117.22566], // 地图中心
        zoom: 15, //缩放比列
        layers: [
            chinaProvider("Geoq.Normal.PurplishBlue", {
                maxZoom: 22,
                minZoom: 3,
            }),
        ],
        zoomControl: false, //禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
        isAttribution: false, //默认启用天地图版本号展示
        attribution: {
            //版本号配置展示，默认右下角
            prefix: "GS(2022)3124号 - 甲测资字1100471",
            position: "bottomright",
        },
    }

   图层pane初始化配置,默认：'canvasMarker'

   paneArr:['geometryDraw','canvasMarker','gridLyaers']

2. mapOverItem 一个绝对定位组件，浮动于地图上层；

3. mapMarker 地图marker层交互组件，用于渲染marker，接收marker单击事件,需要套入mapview使用，涉及到map的调用； 新增pane参数配置：默认'canvasMarker'； 参数data： [{latlng: { lat: 37.7289 , lng: 117.22566 },icon:{iconUrl:'',iconSize: 24, 36,iconAnchor: 12, 10},...},...]

   demo：

   <mapMarker :map="map" :data="markerGroup" @markerClick="markerClick"  :pane="自定义pane" />

4. mapLegend 渲染图例列表 参数：

   dataList:[{ active: true, name: '测试1', icon: iconUrl ,自定义key:其他数据}, { active: false, name: '测试2', icon: iconUrl,自定义key:其他数据 }]

   <mapOverItem :style="{ top: 'auto', bottom: '120px', left: 'auto', right: '31%' }">
       <mapLegendd :dataList="legendList" @legendClick="initMarkersLegend"/>
   </mapOverItem>

5. mapGeometry（插槽应用） 写字（mapDrawMarker，mapDrawMarkerEnd）、测面-多边形绘制（mapDrawArea，mapDrawAreaEnd）、清空图层（mapDrawClear、mapDrawClearEnd）、圈选范围（mapDrawCircle，mapDrawCircleEnd）、测距（mapDrawLine，mapDrawLineEnd） 需要传入map，所以是嵌套在mapview中使用,提供3个事件回调

       <mapView :paneArr="['geometryDraw']">
         <template v-slot="{ map }">
           <mapGeometry ref="refmapGeometry" :map="map" @mapDrawClearEnd="mapDrawClearEnd"
             @mapDrawCircleEnd="mapDrawCircleEnd">
             <button @click="mapDrawClear()">清除</button>
             <button @click="mapDrawCircle()">圈选</button>
             <button @click="mapDrawLine()">画线</button>
           </mapGeometry>
         </template>
       </mapView>

6.mapClusterMarker

使用示例，items同mapMarker的data一致，setIcon参数为聚合图标配置

<mapClusterMarker :map="map" :items="markerList"  @clickOnItem="clickOnItem" :setIcon=" { iconUrl: icon_warning_atmosphericStation, iconSize: [51, 59]    }" />
 ```