v-ol-map 1.0.3 → 1.0.6

package/dist/style.css

@@ -0,0 +1 @@
+.ol-box{box-sizing:border-box;border-radius:2px;border:1.5px solid rgb(179,197,219);background-color:#fff6}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width;transition:all .25s}.ol-scale-singlebar-even{background-color:#000}.ol-scale-singlebar-odd{background-color:#fff}.ol-scale-bar{position:absolute;bottom:8px;left:8px}.ol-scale-step-marker{width:1px;height:15px;background-color:#000;float:right;z-index:10}.ol-scale-step-text{position:absolute;bottom:-5px;font-size:12px;z-index:11;color:#000;text-shadow:-2px 0 #FFFFFF,0 2px #FFFFFF,2px 0 #FFFFFF,0 -2px #FFFFFF}.ol-scale-text{position:absolute;font-size:14px;text-align:center;bottom:25px;color:#000;text-shadow:-2px 0 #FFFFFF,0 2px #FFFFFF,2px 0 #FFFFFF,0 -2px #FFFFFF}.ol-scale-singlebar{position:relative;height:10px;z-index:9;box-sizing:border-box;border:1px solid black}.ol-unsupported{display:none}.ol-viewport,.ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ol-viewport canvas{all:unset}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.ol-control{position:absolute;background-color:#fff6;border-radius:4px;padding:2px}.ol-control:hover{background-color:#fff9}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-weight:700;text-decoration:none;font-size:inherit;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:#003c8880;border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:hover,.ol-control button:focus{text-decoration:none;background-color:#003c88b3}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em);display:flex;flex-flow:row-reverse;align-items:center}.ol-attribution a{color:#003c88b3;text-decoration:none}.ol-attribution ul{margin:0;padding:1px .5em;color:#000;text-shadow:0 0 2px #fff;font-size:12px}.ol-attribution li{display:inline;list-style:none}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button{flex-shrink:0}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:2px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -1,47 +1,37 @@
 {
   "name": "v-ol-map",
-  "version": "1.0.3",
   "private": false,
-  "main": "lib/v-ol-map.umd.min.js",
+  "version": "1.0.6",
+  "type": "module",
+  "main": "dist/ol-map.umd.js",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "clean:lib": "rimraf lib",
-    "build:lib": "vue-cli-service build --target lib --name v-ol-map --dest lib src/index.ts",
-    "lint": "vue-cli-service lint",
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
     "publish": "npm publish"
   },
   "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^2.6.11",
-    "vue-class-component": "^7.2.3",
-    "vue-property-decorator": "^9.1.2",
-    "vue-router": "^3.2.0"
+    "@types/pinyin": "^2.10.0",
+    "pinyin-pro": "^3.11.0",
+    "vite-plugin-eslint": "^1.7.0",
+    "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@turf/turf": "^6.5.0",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.13",
-    "@vue/cli-plugin-eslint": "~4.5.13",
-    "@vue/cli-plugin-router": "~4.5.13",
-    "@vue/cli-plugin-typescript": "~4.5.13",
-    "@vue/cli-service": "~4.5.13",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "axios": "^0.27.2",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "mockjs": "^1.1.0",
+    "@types/node": "^18.6.4",
+    "@typescript-eslint/eslint-plugin": "^5.32.0",
+    "@typescript-eslint/parser": "^5.32.0",
+    "@vitejs/plugin-vue": "^3.0.0",
+    "eslint": "^8.21.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-n": "^15.2.4",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-vue": "^9.3.0",
     "nanoid": "^4.0.0",
     "ol": "^6.15.1",
-    "pinyin": "^3.0.0-alpha.5",
-    "prettier": "^2.2.1",
-    "qs": "^6.11.0",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "typescript": "~4.1.5",
-    "vue-template-compiler": "^2.6.11"
+    "typescript": "^4.6.4",
+    "vite": "^3.0.0",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-tsc": "^0.38.4"
   }
 }

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+</script>
+
+<template>
+  <v-map>
+    <v-tile></v-tile>
+  </v-map>
+</template>
+
+<style scoped>
+</style>

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/index.js

@@ -0,0 +1,13 @@
+import vMap from '@/components/map/index';
+import vTile from '@/components/layers/tile/index';
+const components = [vMap, vTile];
+const install = (app) => {
+    components.forEach(item => {
+        app.component(item.name, item);
+    });
+};
+export default {
+    install,
+    ...components
+};
+//# sourceMappingURL=index.js.map

package/src/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,IAAI,MAAM,wBAAwB,CAAA;AACzC,OAAO,KAAK,MAAM,gCAAgC,CAAA;AAElD,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;AAEhC,MAAM,OAAO,GAAG,CAAC,GAAQ,EAAE,EAAE;IAC3B,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACxB,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAChC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,eAAe;IACb,OAAO;IACP,GAAG,UAAU;CACd,CAAA"}

package/src/components/index.ts

@@ -0,0 +1,16 @@
+import { App } from 'vue'
+import vMap from '@/components/map/index'
+import vTile from '@/components/layers/tile/index'
+
+const components = [vMap, vTile]
+
+const install = (app: App) => {
+  components.forEach(item => {
+    app.component(item.name, item)
+  })
+}
+
+export default {
+  install,
+  ...components
+}

package/src/components/layers/base.ts

@@ -0,0 +1,48 @@
+export default {
+  className: {
+    type: String,
+    default: 'ol-layer'
+  },
+  opacity: {
+    type: Number,
+    default: 1
+  },
+  visible: {
+    type: Boolean,
+    default: true
+  },
+  extent: {
+    type: Array
+  },
+  zIndex: {
+    type: Number
+  },
+  minResolution: {
+    type: Number
+  },
+  maxResolution: {
+    type: Number
+  },
+  minZoom: {
+    type: Number
+  },
+  maxZoom: {
+    type: Number
+  },
+  title: {
+    type: String
+  },
+  name: {
+    type: String
+  },
+  preview: {
+    type: String
+  },
+  baseLayer: {
+    type: Boolean
+  },
+  properties: {
+    type: Object,
+    default: () => { }
+  }
+}

package/src/components/layers/tile/index.js

@@ -0,0 +1,6 @@
+import vTile from '@/components/layers/tile/tile.vue';
+vTile.install = (Vue) => {
+    Vue.component(vTile.name, vTile);
+};
+export default vTile;
+//# sourceMappingURL=index.js.map

package/src/components/layers/tile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,mCAAmC,CAAA;AAEpD,KAAa,CAAC,OAAO,GAAG,CAAC,GAAQ,EAAE,EAAE;IACpC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;AAClC,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/src/components/layers/tile/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import vTile from '@/components/layers/tile/tile.vue'
+
+(vTile as any).install = (Vue: App) => {
+  Vue.component(vTile.name, vTile)
+}
+
+export default vTile

package/src/components/layers/tile/tile.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { onMounted, defineProps, unref, ref, inject } from 'vue'
+import base from '@/components/layers/base'
+import { XYZ } from 'ol/source'
+import { Tile as TileLayer } from 'ol/layer'
+import { nanoid } from 'nanoid'
+
+const VMap:any = inject('VMap')
+
+const props = defineProps({
+  ...base,
+  ...{
+    layerId: {
+      type: String,
+      default: `tile-layer-${nanoid()}`
+    },
+    preload: {
+      type: Number,
+      default: 0
+    },
+    tileType: {
+      type: String,
+      default: 'TD'
+    },
+    tdVec: {
+      type: String
+    },
+    tdCva: {
+      type: String
+    },
+    tdImg: {
+      type: String
+    },
+    tdCia: {
+      type: String
+    },
+    gdUrl: {
+      type: String
+    },
+    base: {
+      type: Boolean,
+      default: true
+    },
+    xyz: {
+      type: Object
+    },
+    wms: {
+      type: Object
+    }
+  }
+})
+
+let layers = []
+
+function init ():void {
+  const layerVec = initXYZbyURL(
+    'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a'
+  )
+  const layerCva = initXYZbyURL(
+    'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a'
+  )
+  layers = [layerVec, layerCva]
+  console.log(VMap)
+  layers.forEach((layer) => {
+    VMap.addLayer(layer)
+  })
+}
+
+function initXYZbyURL (url: string): any {
+  const xyzOpt = {
+    ...{ crossOrigin: 'anonymous' },
+    ...props.xyz,
+    ...{ url }
+  }
+  const source = new XYZ(xyzOpt)
+  const layerOpt:any = { ...props, ...{ source } }
+  console.log(layerOpt)
+  const layer = new TileLayer(layerOpt)
+  layer.set('base', true)
+  layer.setZIndex(0)
+  return layer
+}
+
+onMounted(() => {
+  console.log(props.className)
+  console.log(unref(props))
+  console.log(ref(props).value)
+  init()
+})
+</script>
+<script lang="ts">
+export default { name: 'v-tile' }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/map/index.js

@@ -0,0 +1,6 @@
+import vMap from '@/components/map/map.vue';
+vMap.install = (Vue) => {
+    Vue.component(vMap.name, vMap);
+};
+export default vMap;
+//# sourceMappingURL=index.js.map

package/src/components/map/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAE3C,IAAY,CAAC,OAAO,GAAG,CAAC,GAAQ,EAAE,EAAE;IACnC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;AAChC,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}

package/src/components/map/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import vMap from '@/components/map/map.vue';
+
+(vMap as any).install = (Vue: App) => {
+  Vue.component(vMap.name, vMap)
+}
+
+export default vMap

package/src/components/map/map.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed, defineProps, onMounted, unref, ref, provide } from 'vue'
+import type { PropType } from 'vue'
+import { nanoid } from 'nanoid'
+import { OlMap } from '@/utils'
+import { ViewOptions } from 'ol/View'
+import { DefaultsOptions as ControlOptions } from 'ol/control'
+import {
+  DefaultsOptions as InteractionOptions
+} from 'ol/interaction'
+
+// props
+const props = defineProps({
+  target: {
+    type: String as PropType<string>,
+    // string 首字母小写为 typescript 对应 js 中的基础类型
+    default: `map-${nanoid()}`
+  },
+  width: {
+    type: [String, Number],
+    default: '100%'
+  },
+  height: {
+    type: [String, Number],
+    default: '100%'
+  },
+  view: {
+    type: Object as PropType<ViewOptions>
+  },
+  controls: {
+    type: Object as PropType<ControlOptions>
+  },
+  interaction: {
+    type: Object as PropType<InteractionOptions>
+  }
+})
+// computed
+const mapWidth = computed(() => {
+  return typeof props.width === 'string' ? props.width : props.width.toString() + 'px'
+})
+const mapHeight = computed(() => {
+  return typeof props.height === 'string' ? props.height : props.height.toString() + 'px'
+})
+const mapOption = computed<any>(() => {
+  return {
+    target: props.target,
+    view: props.view,
+    controls: props.controls,
+    interaction: props.interaction
+  }
+})
+// data
+const load = ref(false)
+let map:any = null
+
+// methods
+function init (): Promise<string> {
+  return new Promise((resolve, reject) => {
+    map = new OlMap(unref(mapOption))
+    console.log(map)
+    if (map) {
+      // provide
+      provide('VMap', map)
+      resolve('success')
+    } else {
+      reject(new Error('fail'))
+    }
+  })
+}
+// hook
+onMounted(() => {
+  init().then(res => {
+    if (res === 'success') {
+      load.value = true
+    }
+  })
+})
+</script>
+<script lang="ts">
+export default { name: 'v-map' }
+</script>
+
+<template>
+  <div :id="props.target" :style="{ width: mapWidth, height: mapHeight }">
+    <slot v-if="load"/>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/main.js

@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+import './style.css';
+import App from './App.vue';
+import olMap from '@/components/index';
+createApp(App).use(olMap).mount('#app');
+//# sourceMappingURL=main.js.map

package/src/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,aAAa,CAAA;AACpB,OAAO,GAAG,MAAM,WAAW,CAAA;AAC3B,OAAO,KAAK,MAAM,oBAAoB,CAAA;AAEtC,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA"}

package/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import olMap from '@/components/index'
+
+createApp(App).use(olMap).mount('#app')

package/src/style.css

@@ -0,0 +1,82 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+html,body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  display: flex;
+  place-items: center;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  padding: 0;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}