chore: 类型调整

Author: brandonxiang

cspell.json

@@ -6,7 +6,8 @@
     "words": [
         "latlng",
         "latlngs",
-        "Tilelayer"
+        "Tilelayer",
+        "vueleaflet"
     ],
     "ignoreWords": [],
     "import": []

examples/Layout.vue

@@ -13,123 +13,184 @@ import {
   LControlAttribution,
   LControlLayers,
   LControlZoom,
-  LControlScale
-} from '../src';
-import '../node_modules/leaflet/dist/leaflet.css';
-import L from 'leaflet';
+  LControlScale,
+  LGeojson,
+} from "../src";
+import "../node_modules/leaflet/dist/leaflet.css";
+import L from "leaflet";
+// import { type GeoJsonObject } from 'geojson';
 
 const mapOptions = {
   zoom: 13,
   center: { lat: 51.505, lng: -0.09 },
   minZoom: 8,
   maxZoom: 15,
   attributionControl: false,
-  zoomControl: false
-}
+  zoomControl: false,
+};
 
 const tileLayerOptions = {
-  attribution: 'vue-leaflet',
+  attribution: "vue-leaflet",
   maxZoom: 18,
-  id: 'mapbox/streets-v11',
+  id: "mapbox/streets-v11",
   tileSize: 512,
   zoomOffset: -1,
-  accessToken: 'pk.eyJ1IjoieHdwaXNtZSIsImEiOiJ5cTlCQTlRIn0.QdV-wNUKbgs7jAlbVE747Q'
-}
+  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"
+      attribution: "geoq blue",
     }
   ),
-  '高德影像': new L.TileLayer(
+  高德影像: new L.TileLayer(
     "http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
     {
       subdomains: "1234",
-      attribution: "高德影像"
+      attribution: "高德影像",
     }
-  )
-}
+  ),
+};
 
+const tmpGeojson = {
+       "type": "Feature",
+       "geometry": {
+           "type": "Polygon",
+           "coordinates": [
+               [
+                [-0.08, 51.509],
+                [-0.06, 51.503],
+                [-0.047, 51.51],
+               ]
+           ]
+       }
+   };
 
 </script>
 
 <template>
   <div>
     <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" />
-      <l-marker id="marker1" :latlng="{ lat: 51.505, lng: -0.09 }" :options="{
-        title: 'marker1',
-        opacity: 1,
-        draggable: true
-      }">
+      <l-tilelayer
+        urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
+        :options="tileLayerOptions"
+      />
+      <l-marker
+        id="marker1"
+        :latlng="{ lat: 51.505, lng: -0.09 }"
+        :options="{
+          title: 'marker1',
+          opacity: 1,
+          draggable: true,
+        }"
+      >
         <l-tooltip :options="{ content: 'tooltip with marker1' }" />
       </l-marker>
-      <l-marker id="marker2" :latlng="{ lat: 51.505, lng: -0.11 }" :options="{
-        title: 'marker2'
-      }">
+      <l-marker
+        id="marker2"
+        :latlng="{ lat: 51.505, lng: -0.11 }"
+        :options="{
+          title: 'marker2',
+        }"
+      >
         <l-popup :options="{ content: 'popup with marker2' }" />
       </l-marker>
-      <l-tooltip :options="{ content: 'tooltip standalone' }" :latlng="{ lat: 51.505, lng: 0 }" />
-      <l-popup :options="{ content: 'popup standalone' }" :latlng="{ lat: 51.505, lng: 0 }" />
+      <l-tooltip
+        :options="{ content: 'tooltip standalone' }"
+        :latlng="{ lat: 51.505, lng: 0 }"
+      />
+      <l-popup
+        :options="{ content: 'popup standalone' }"
+        :latlng="{ lat: 51.505, lng: 0 }"
+      />
     </l-map>
   </div>
   <div>
     <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" />
-      <l-circle :latlng="[51.508, -0.11]" :options="{
-        color: 'red',
-        fillColor: '#f03',
-        fillOpacity: 0.5,
-        radius: 500
-      }" />
-      <LCircleMarker :latlng="[51.512, -0.18]" :options="{
-        color: 'red',
-        fillColor: '#f03',
-        fillOpacity: 0.5,
-        radius: 100
-      }" />
-      <l-polygon :latlngs="[
-        [51.509, -0.08],
-        [51.503, -0.06],
-        [51.51, -0.047]
-      ]" />
-      <l-polyline :latlngs="[
-        [51.510, -0.09],
-        [51.505, -0.07],
-        [51.56, -0.048]
-      ]" />
-      <l-rectangle :latLngBounds="[
-        [51.510, -0.09],
-        [51.505, -0.07],
-      ]" />
+      <l-tilelayer
+        urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
+        :options="tileLayerOptions"
+      />
+      <l-circle
+        :latlng="[51.508, -0.11]"
+        :options="{
+          color: 'red',
+          fillColor: '#f03',
+          fillOpacity: 0.5,
+          radius: 500,
+        }"
+      />
+      <LCircleMarker
+        :latlng="[51.512, -0.18]"
+        :options="{
+          color: 'red',
+          fillColor: '#f03',
+          fillOpacity: 0.5,
+          radius: 100,
+        }"
+      />
+      <l-polygon
+        :latlngs="[
+          [51.509, -0.08],
+          [51.503, -0.06],
+          [51.51, -0.047],
+        ]"
+      />
+      <l-polyline
+        :latlngs="[
+          [51.51, -0.09],
+          [51.505, -0.07],
+          [51.56, -0.048],
+        ]"
+      />
+      <l-rectangle
+        :latLngBounds="[
+          [51.51, -0.09],
+          [51.505, -0.07],
+        ]"
+      />
     </l-map>
   </div>
   <div>
     <h1>Control</h1>
-    <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-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"
+      />
       <LControlScale />
       <LControlZoom :options="{ position: 'topright' }" />
       <LControlAttribution />
       <LControlLayers :base-layers="baseLayerOptions" />
     </l-map>
   </div>
+  <div>
+    <h1>Feature Layer</h1>
+    <l-map
+      id="map4"
+      :options="mapOptions"
+    >
+      <l-tilelayer
+        urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
+        :options="tileLayerOptions"
+      />
+      <LGeojson :geojson="tmpGeojson" />
+    </l-map>
+  </div>
 </template>
 
-
-
-
 <style lang="css">
 #app {
   width: 100%;
@@ -138,7 +199,8 @@ const baseLayerOptions = {
 
 #map1,
 #map2,
-#map3 {
+#map3,
+#map4 {
   height: 300px;
 }
 
@@ -152,4 +214,4 @@ body {
 h1 {
   padding: 0 20px;
 }
-</style>
+</style>

package.json

@@ -1,31 +1,38 @@
 {
   "name": "vueleaflet",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "type": "module",
   "files": ["dist"],
   "main": "./dist/vueleaflet.umd.js",
   "module": "./dist/vueleaflet.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/vueleaflet.es.js",
-      "require": "./dist/vueleaflet.umd.js"
+      "require": "./dist/vueleaflet.umd.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {
     "dev": "vite dev --config vite.example.config.ts",
     "build:example": "vite build --config vite.example.config.ts",
-    "build": "vite build"
+    "build:js": "vite build",
+    "build": "npm run build:js && npx vue-tsc --emitDeclarationOnly"
   },
   "dependencies": {
     "vue": "^3.3.4",
     "leaflet": "^1.9.4"
   },
   "devDependencies": {
+    "@types/geojson": "7946.0.1",
     "@types/node": "^17.0.21",
     "@types/leaflet": "^1.9.4",
     "@vitejs/plugin-vue": "^4.3.4",
     "typescript": "^4.5.4",
     "vite": "^4.4.9",
     "vue-tsc": "^1.8.13"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
   }
 }