v-ol-map 1.0.3 → 1.0.6

package/src/utils/index.js

@@ -1,19 +1,58 @@
-import "ol/ol.css";
-import { Map, View } from "ol";
-export class VMap {
+// ol
+import 'ol/ol.css';
+import { Map, View } from 'ol';
+import { defaults as defaultControls } from 'ol/control';
+import { defaults as defaultInteractions } from 'ol/interaction';
+// utils
+import { getCenterByCity } from '@/utils/cityMap';
+// functions
+/**
+ * 判断某key是否在对象内
+ * @param obj
+ * @param key
+ */
+export const validObjKey = (obj, key) => {
+    if (obj && Object.prototype.hasOwnProperty.call(obj, key)) {
+        return (obj[key] &&
+            (Object.keys(obj[key]).length > 0 || typeof obj[key] === 'function'));
+    }
+    else {
+        return false;
+    }
+};
+export class OlMap {
+    static map = OlMap;
     constructor(options) {
-        this.map = VMap;
+        console.log(options);
+        // view
         const viewOptDefault = {
             center: [108.5525, 34.3227],
             zoom: 5,
             constrainResolution: true,
-            projection: "EPSG:4326",
+            projection: 'EPSG:4326'
         };
-        const viewOption = { ...viewOptDefault };
+        const viewOption = { ...viewOptDefault, ...options.view };
+        if (validObjKey(viewOption, 'city') && viewOption.city) {
+            viewOption.center =
+                getCenterByCity(viewOption.city) ||
+                    viewOption.center ||
+                    viewOptDefault.center;
+        }
         const view = new View(viewOption);
-        new Map({
+        // controls
+        console.log(options.controls);
+        const controlsDefault = {
+            zoom: false,
+            rotate: false,
+            attribution: false
+        };
+        const controlsOption = { ...controlsDefault, ...options.controls };
+        const controls = defaultControls(controlsOption).extend([]);
+        return new Map({
+            interactions: defaultInteractions(options.interaction).extend([]),
             target: options.target,
-            view: view,
+            view,
+            controls
         });
     }
 }

package/src/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAM/B,MAAM,OAAO,IAAI;IAEf,YAAY,OAAmB;QADzB,QAAG,GAAG,IAAI,CAAC;QAEf,MAAM,cAAc,GAAG;YACrB,MAAM,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC3B,IAAI,EAAE,CAAC;YACP,mBAAmB,EAAE,IAAI;YACzB,UAAU,EAAE,WAAW;SACxB,CAAC;QACF,MAAM,UAAU,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;QACzC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;QAClC,IAAI,GAAG,CAAC;YACN,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;IACL,CAAC;CACF"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,KAAK;AACL,OAAO,WAAW,CAAA;AAClB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,IAAI,CAAA;AAE9B,OAAO,EACL,QAAQ,IAAI,eAAe,EAE5B,MAAM,YAAY,CAAA;AACnB,OAAO,EACL,QAAQ,IAAI,mBAAmB,EAEhC,MAAM,gBAAgB,CAAA;AACvB,QAAQ;AACR,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAWjD,YAAY;AACZ;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,GAAQ,EAAE,GAAW,EAAE,EAAE;IACnD,IAAI,GAAG,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE;QACzD,OAAO,CACL,GAAG,CAAC,GAAG,CAAC;YACF,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,GAAG,CAAC,GAAG,CAAC,KAAK,UAAU,CAAC,CAC3E,CAAA;KACF;SAAM;QACL,OAAO,KAAK,CAAA;KACb;AACH,CAAC,CAAA;AAED,MAAM,OAAO,KAAK;IAChB,MAAM,CAAC,GAAG,GAAG,KAAK,CAAA;IAClB,YAAa,OAAmB;QAC9B,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QACpB,OAAO;QACP,MAAM,cAAc,GAAG;YACrB,MAAM,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC3B,IAAI,EAAE,CAAC;YACP,mBAAmB,EAAE,IAAI;YACzB,UAAU,EAAE,WAAW;SACxB,CAAA;QACD,MAAM,UAAU,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,CAAA;QACzD,IAAI,WAAW,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,UAAU,CAAC,IAAI,EAAE;YACtD,UAAU,CAAC,MAAM;gBACP,eAAe,CAAC,UAAU,CAAC,IAAI,CAAC;oBAChC,UAAU,CAAC,MAAM;oBACjB,cAAc,CAAC,MAAM,CAAA;SAChC;QACD,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,UAAU,CAAC,CAAA;QACjC,WAAW;QACX,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;QAC7B,MAAM,eAAe,GAAG;YACtB,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,KAAK;YACb,WAAW,EAAE,KAAK;SACnB,CAAA;QACD,MAAM,cAAc,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAA;QAClE,MAAM,QAAQ,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QAC3D,OAAO,IAAI,GAAG,CAAC;YACb,YAAY,EAAE,mBAAmB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;YACjE,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,IAAI;YACJ,QAAQ;SACT,CAAC,CAAA;IACJ,CAAC"}

package/src/utils/index.ts

@@ -1,26 +1,77 @@
-import "ol/ol.css";
-import { Map, View } from "ol";
-
-interface MapOptions {
-  target: string;
+// ol
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import { ViewOptions } from 'ol/View'
+import {
+  defaults as defaultControls,
+  DefaultsOptions as ControlOptions
+} from 'ol/control'
+import {
+  defaults as defaultInteractions,
+  DefaultsOptions as InteractionOptions
+} from 'ol/interaction'
+// utils
+import { getCenterByCity } from '@/utils/cityMap'
+// interface
+interface customerViewOptions extends ViewOptions {
+    city: string;
+}
+export interface MapOptions {
+    target: string;
+    view: customerViewOptions;
+    controls: ControlOptions;
+    interaction: InteractionOptions;
+}
+// functions
+/**
+ * 判断某key是否在对象内
+ * @param obj
+ * @param key
+ */
+export const validObjKey = (obj: any, key: string) => {
+  if (obj && Object.prototype.hasOwnProperty.call(obj, key)) {
+    return (
+      obj[key] &&
+            (Object.keys(obj[key]).length > 0 || typeof obj[key] === 'function')
+    )
+  } else {
+    return false
+  }
 }
 
-export class olMap {
-  public static map: olMap;
-  constructor(options: MapOptions) {
-    console.log(options);
+export class OlMap {
+  static map = OlMap
+  constructor (options: MapOptions) {
+    console.log(options)
+    // view
     const viewOptDefault = {
       center: [108.5525, 34.3227],
       zoom: 5,
       constrainResolution: true,
-      projection: "EPSG:4326",
-    };
-    const viewOption = { ...viewOptDefault };
-    const view = new View(viewOption);
-    olMap.map = new Map({
+      projection: 'EPSG:4326'
+    }
+    const viewOption = { ...viewOptDefault, ...options.view }
+    if (validObjKey(viewOption, 'city') && viewOption.city) {
+      viewOption.center =
+                getCenterByCity(viewOption.city) ||
+                viewOption.center ||
+                viewOptDefault.center
+    }
+    const view = new View(viewOption)
+    // controls
+    console.log(options.controls)
+    const controlsDefault = {
+      zoom: false,
+      rotate: false,
+      attribution: false
+    }
+    const controlsOption = { ...controlsDefault, ...options.controls }
+    const controls = defaultControls(controlsOption).extend([])
+    return new Map({
+      interactions: defaultInteractions(options.interaction).extend([]),
       target: options.target,
-      view: view,
-    });
-    return olMap.map;
+      view,
+      controls
+    })
   }
 }

package/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/tsconfig.json

@@ -1,29 +1,23 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "typeRoots": ["/@types", "./node_modules/@types"],
-    "types": ["webpack-env"],
+    "baseUrl": "./",
     "paths": {
       "@/*": ["src/*"]
     },
-    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
-  ],
-  "exclude": ["node_modules"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["node_modules"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

package/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,40 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+// import eslintPlugin from 'vite-plugin-eslint'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    host: 'localhost',
+    port: 8080,
+    open: true
+  },
+  plugins: [
+    vue()
+    // eslintPlugin({
+    //   include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.jsx', 'src/**/*.ts'],
+    //   cache: false
+    // })
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/components/index.ts'),
+      name: 'ol-map',
+      fileName: (format) => `ol-map.${format}.js`
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    }
+  }
+})

package/.browserslistrc

@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not dead

package/.eslintrc.js

@@ -1,20 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: [
-    "plugin:vue/essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint",
-  ],
-  parserOptions: {
-    ecmaVersion: 2020,
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-  },
-};

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};

package/examples/App.vue

@@ -1,26 +0,0 @@
-<template>
-  <div id="app">
-    <router-view />
-  </div>
-</template>
-
-<style lang="scss">
-html,
-body {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-}
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-}
-</style>

package/examples/main.ts

@@ -1,13 +0,0 @@
-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
-import olMap from "@/index";
-
-Vue.config.productionTip = false;
-
-Vue.use(olMap);
-
-new Vue({
-  router,
-  render: (h) => h(App),
-}).$mount("#app");

package/examples/router/index.ts

@@ -1,21 +0,0 @@
-import Vue from "vue";
-import VueRouter, { RouteConfig } from "vue-router";
-import Home from "../views/Home.vue";
-
-Vue.use(VueRouter);
-
-const routes: Array<RouteConfig> = [
-  {
-    path: "/",
-    name: "Home",
-    component: Home,
-  },
-];
-
-const router = new VueRouter({
-  mode: "history",
-  base: process.env.BASE_URL,
-  routes,
-});
-
-export default router;

package/examples/views/Home.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="home">
-    <v-map :height="height" :width="width">
-      <v-tile :visible="true"></v-tile>
-    </v-map>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-@Component
-export default class Home extends Vue {
-  height = "960px";
-  width = "1080px";
-}
-</script>
-<style scoped>
-.home {
-  width: 100%;
-  height: 100%;
-}
-</style>

package/lib/demo.html

@@ -1,8 +0,0 @@
-<meta charset="utf-8">
-<title>v-ol-map demo</title>
-<script src="./v-ol-map.umd.js"></script>
-
-
-<script>
-console.log(v-ol-map)
-</script>