feat: add control layer

Author: brandonxiang

README.md

@@ -14,7 +14,6 @@
         <img src="https://img.shields.io/twitter/follow/xwpisme?style=social&logo=twitter"
             alt="follow on Twitter">
     </a>
-    
 </p>
 
 Here is Vue components for Leaflet maps, which is inspired by [react-leaflet](https://github.com/PaulLeCam/react-leaflet) and [vue-google-maps](https://github.com/GuillaumeLeclerc/vue-google-maps).

examples/Layout.vue

@@ -10,16 +10,21 @@ import {
   LPolygon,
   LPolyline,
   LRectangle,
+  LControlAttribution,
+  LControlLayers,
+  LControlZoom,
+  LControlScale
 } from '../src';
 import '../node_modules/leaflet/dist/leaflet.css';
+import L from 'leaflet';
 
 const mapOptions = {
   zoom: 13,
   center: { lat: 51.505, lng: -0.09 },
   minZoom: 8,
   maxZoom: 15,
-  attributionControl: true,
-  zoomControl: true
+  attributionControl: false,
+  zoomControl: false
 }
 
 const tileLayerOptions = {
@@ -31,11 +36,28 @@ const tileLayerOptions = {
   accessToken: 'pk.eyJ1IjoieHdwaXNtZSIsImEiOiJ5cTlCQTlRIn0.QdV-wNUKbgs7jAlbVE747Q'
 }
 
+const baseLayerOptions = {
+  geoqBlue: new L.TileLayer(
+    "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
+    {
+      attribution: "geoq blue"
+    }
+  ),
+  '高德影像': new L.TileLayer(
+    "http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
+    {
+      subdomains: "1234",
+      attribution: "高德影像"
+    }
+  )
+}
+
+
 </script>
 
 <template>
   <div>
-    <h1>Marker/Tooltip/Popup</h1>
+    <h1>Basic UI Layers</h1>
     <l-map id="map1" :options="mapOptions">
       <l-tilelayer urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
         :options="tileLayerOptions" />
@@ -59,7 +81,7 @@ const tileLayerOptions = {
     <h1>Vector Layers</h1>
     <l-map id="map2" :options="mapOptions">
       <l-tilelayer urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
-        :options="tileLayerOptions"/>
+        :options="tileLayerOptions" />
       <l-circle :latlng="[51.508, -0.11]" :options="{
         color: 'red',
         fillColor: '#f03',
@@ -90,14 +112,17 @@ const tileLayerOptions = {
   </div>
   <div>
     <h1>Control</h1>
-    <l-map id="map3" :options="mapOptions">
+    <l-map id="map3" :options="{
+      ...mapOptions, 
+      zoom: 10,
+      center: { lat: 26.33280692289788, lng: 114.78515624999999 },
+      }">
       <l-tilelayer urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
         :options="tileLayerOptions" />
-      <!-- <l-marker id="marker3" :latlng="{ lat: 51.505, lng: -0.2 }" :options="{
-        title: 'marker3'
-      }">
-        <l-popup :options="{ content: 'popup with marker3' }" />
-      </l-marker> -->
+      <LControlScale />
+      <LControlZoom :options="{ position: 'topright' }" />
+      <LControlAttribution />
+      <LControlLayers :base-layers="baseLayerOptions" />
     </l-map>
   </div>
 </template>

src/components/LCircle.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import L, { CircleOptions, LatLngExpression } from 'leaflet'
-import { PropType, inject, nextTick, useAttrs, useSlots } from 'vue';
+import { PropType, inject, nextTick } from 'vue';
 import { MapProvide } from '../core/Map';
 import { MAP_PROVIDE, getMapInjectKey } from '../utils/injectKey';
 

src/components/LControl.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import L from 'leaflet'
+import { PropType, inject, nextTick } from 'vue';
+import { MapProvide } from '../core/Map';
+import { MAP_PROVIDE, getMapInjectKey } from '../utils/injectKey';
+
+
+const mapProvide = inject<MapProvide>(MAP_PROVIDE);
+
+const key = getMapInjectKey();
+
+const props = defineProps({
+  options: {
+    type: Object as PropType<L.Control.AttributionOptions>,
+    required: false
+  }
+})
+
+nextTick(() => {
+  const attribution = L.control.attribution(props.options);
+  mapProvide?.getMap(key)?.addControl(attribution);
+})
+
+</script>
+
+<template></template>

src/components/LControlAttribution.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import L from 'leaflet'
+import { PropType, inject, nextTick } from 'vue';
+import { MapProvide } from '../core/Map';
+import { MAP_PROVIDE, getMapInjectKey } from '../utils/injectKey';
+
+
+const mapProvide = inject<MapProvide>(MAP_PROVIDE);
+
+const key = getMapInjectKey();
+
+const props = defineProps({
+  baseLayers: {
+    type: Object as PropType<L.Control.LayersObject>,
+    required: false
+  },
+  overlays: {
+    type: Object as PropType<L.Control.LayersObject>,
+    required: false
+  },
+  options: {
+    type: Object as PropType<L.Control.LayersOptions>,
+    required: false
+  }
+})
+
+nextTick(() => {
+  const layers = L.control.layers(props.baseLayers, props.overlays, props.options);
+  mapProvide?.getMap(key)?.addControl(layers);
+})
+
+</script>
+
+<template></template>

src/components/LControlLayers.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import L from 'leaflet'
+import { PropType, inject, nextTick } from 'vue';
+import { MapProvide } from '../core/Map';
+import { MAP_PROVIDE, getMapInjectKey } from '../utils/injectKey';
+
+
+const mapProvide = inject<MapProvide>(MAP_PROVIDE);
+
+const key = getMapInjectKey();
+
+const props = defineProps({
+  options: {
+    type: Object as PropType<L.Control.ScaleOptions>,
+    required: false
+  }
+})
+
+nextTick(() => {
+  const scale = L.control.scale(props.options);
+  mapProvide?.getMap(key)?.addControl(scale);
+})
+
+</script>
+
+<template></template>

src/components/LControlScale.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import L from 'leaflet'
+import { PropType, inject, nextTick } from 'vue';
+import { MapProvide } from '../core/Map';
+import { MAP_PROVIDE, getMapInjectKey } from '../utils/injectKey';
+
+
+const mapProvide = inject<MapProvide>(MAP_PROVIDE);
+
+const key = getMapInjectKey();
+
+const props = defineProps({
+  options: {
+    type: Object as PropType<L.Control.ZoomOptions>,
+    required: false
+  }
+})
+
+nextTick(() => {
+  const zoom = L.control.zoom(props.options);
+  mapProvide?.getMap(key)?.addControl(zoom);
+})
+
+</script>  
+
+<template></template>

src/components/LControlZoom.vue

@@ -8,3 +8,8 @@ export { default as LCircleMarker } from './components/LCircleMarker.vue';
 export { default as LPolygon } from './components/LPolygon.vue'; 
 export { default as LPolyline } from './components/LPolyline.vue';
 export { default as LRectangle } from './components/LRectangle.vue';
+export { default as LControlAttribution } from './components/LControlAttribution.vue';
+export { default as LControlLayers } from './components/LControlLayers.vue';
+export { default as LControlScale } from './components/LControlScale.vue';
+export { default as LControlZoom } from './components/LControlZoom.vue';
+