v-ol-map 1.0.13 → 1.1.0

package/package.json

@@ -1,39 +1,30 @@
 {
   "name": "v-ol-map",
   "private": false,
-  "version": "1.0.13",
+  "version": "1.1.0",
   "main": "lib/ol-map.umd.js",
-  "files": ["lib"],
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "clean:dist": "rimraf dist",
+    "build": "vite build",
+    "clean:lib": "rimraf lib",
     "preview": "vite preview",
     "publish": "npm publish"
   },
-  "dependencies": {
-    "@types/pinyin": "^2.10.0",
-    "pinyin-pro": "^3.11.0",
-    "vite-plugin-eslint": "^1.7.0",
-    "vue": "^3.2.37"
-  },
   "devDependencies": {
-    "@types/node": "^18.6.4",
-    "@typescript-eslint/eslint-plugin": "^5.32.0",
-    "@typescript-eslint/parser": "^5.32.0",
-    "@vitejs/plugin-vue": "^3.0.0",
-    "@vitejs/plugin-vue-jsx": "^2.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",
+    "vite": "^3.0.0",
+    "vite-plugin-vue2": "^2.0.2"
+  },
+  "dependencies": {
     "nanoid": "^4.0.0",
     "ol": "^6.15.1",
-    "typescript": "^4.6.4",
-    "vite": "^3.0.0",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^0.38.4"
+    "pinyin-pro": "^3.11.0",
+    "vue": "^2.7.8",
+    "vue-template-compiler": "^2.7.8"
   }
 }

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,46 @@
+<template>
+  <div id="app">
+    <v-map :view="view" @click="onClick" @contextmenu.prevent="onContextmenu">
+      <v-tile tile-type="BD"></v-tile>
+    </v-map>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  data () {
+    return {
+      view: {
+        city: '厦门',
+        center: [118, 24],
+        zoom: 12
+      }
+    }
+  },
+  methods: {
+    onClick (evt, map) {
+      console.log(evt)
+      console.log(map)
+      this.view.center = evt.coordinate
+    },
+    onContextmenu (evt, map) {
+      console.log(evt)
+      console.log(map)
+    }
+  }
+}
+</script>
+
+<style>
+html,body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+#app {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/index.js

@@ -0,0 +1,25 @@
+import VMap from '@/components/map/index'
+import VTile from '@/components/layers/tile/index'
+
+const components = [VMap, VTile]
+
+const install = function (Vue) {
+  if (install.installed) return
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+}
+
+//  全局引用可自动安装
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  install,
+  ...components
+}
+
+export {
+  VMap
+}

package/src/components/layers/BaseLayer.vue

@@ -0,0 +1,59 @@
+<script>
+export default {
+  render (createElement, context) {
+    return null
+  },
+  props: {
+    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: () => { }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,7 @@
+import vTile from '@/components/layers/tile/index.vue'
+
+vTile.install = function (Vue) {
+  Vue.component(vTile.name, vTile)
+}
+
+export default vTile

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

@@ -0,0 +1,308 @@
+<script>
+import BaseLayer from '@/components/layers/BaseLayer.vue'
+import { nanoid } from 'nanoid'
+import { validObjKey } from '@/utils/index.js'
+import TileGrid from 'ol/tilegrid/TileGrid'
+import { OSM, TileWMS, XYZ } from 'ol/source.js'
+import TileLayer from 'ol/layer/Tile.js'
+
+export default {
+  name: 'v-tile',
+  render (createElement, context) {
+    return null
+  },
+  extends: BaseLayer,
+  inject: ['VMap'],
+  props: {
+    layerId: {
+      type: String,
+      default () {
+        return `tile-layer-${nanoid()}`
+      }
+    },
+    preload: {
+      type: Number,
+      default: 0
+    },
+    tileType: {
+      type: String,
+      default: 'TD',
+      validator: value => ['TD', 'TD_IMG', 'XYZ', 'BD', 'GD', 'OSM', 'PGIS_TILE', 'PGIS_HPYX', 'WMS'].includes(value)
+    },
+    tdVec: {
+      type: String
+    },
+    tdCva: {
+      type: String
+    },
+    tdImg: {
+      type: String
+    },
+    tdCia: {
+      type: String
+    },
+    gdUrl: {
+      type: String
+    },
+    base: {
+      type: Boolean,
+      default: true
+    },
+    xyz: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    wms: {
+      type: Object,
+      default () {}
+    }
+  },
+  data () {
+    return {
+      layer: null,
+      layers: []
+    }
+  },
+  computed: {
+    map () {
+      return this.VMap.map
+    }
+  },
+  watch: {
+    tileType: {
+      handler (newValue, oldValue) {
+        if (newValue && newValue !== oldValue) {
+          this.clear(oldValue)
+          this.init()
+        }
+      },
+      immediate: false,
+      deep: true
+    },
+    visible: {
+      handler (value) {
+        this.layer.setVisible(value)
+      },
+      immediate: false
+    },
+    zIndex: {
+      handler (value) {
+        this.layer.setZIndex(value)
+      },
+      immediate: false
+    },
+    maxZoom: {
+      handler (value) {
+        this.layer.setMaxZoom(value)
+      },
+      immediate: false
+    },
+    minZoom: {
+      handler (value) {
+        this.layer.setMinZoom(value)
+      },
+      immediate: false
+    },
+    extent: {
+      handler (value) {
+        this.layer.setExtent(value)
+      },
+      immediate: false
+    }
+  },
+  methods: {
+    clear (oldValue) {
+      const layers = this.map.getLayers().getArray().filter(x => x.get('base'))
+      if (layers && layers.length > 0) {
+        layers.forEach(layer => {
+          if (layer.get('tileType') === oldValue || layer.get('isDefault')) {
+            this.map.removeLayer(layer)
+          }
+        })
+      }
+    },
+    init () {
+      console.log(this.map)
+      switch (this.tileType) {
+        case 'XYZ':
+          this.initTileXYZ()
+          break
+        case 'WMS':
+          this.initTileWMS()
+          break
+        case 'TD':
+          this.initTD()
+          break
+        case 'TD_IMG':
+          this.initTDIMG()
+          break
+        case 'BD':
+          this.initBD()
+          break
+        case 'GD':
+          this.initGD()
+          break
+        case 'OSM':
+          this.initTileOSM()
+          break
+        default:
+          this.initTD()
+          break
+      }
+    },
+    initTileXYZ () {
+      let tileGrid
+      if (validObjKey(this.xyz, 'tileGrid')) {
+        tileGrid = new TileGrid(this.xyz.tileGrid)
+      }
+      const xyzOpt = { ...this.xyz, ...{ tileGrid } }
+      const source = new XYZ(xyzOpt)
+      const layerOpt = { ...this.$props, ...{ source } }
+      this.layer = new TileLayer(layerOpt)
+      this.layer.set('base', this.base)
+      this.layer.setZIndex(0)
+      this.layers = [this.layer]
+      this.map.addLayer(this.layer)
+    },
+    initTileWMS () {
+      let tileGrid
+      if (validObjKey(this.wms, 'tileGrid')) {
+        tileGrid = new TileGrid(this.wms.tileGrid)
+      }
+      const wmsOpt = { ...this.wms, ...{ tileGrid } }
+      const source = new TileWMS(wmsOpt)
+      const layerOpt = { ...this.$props, ...{ source } }
+      this.layer = new TileLayer(layerOpt)
+      this.layer.set('base', this.base)
+      this.layer.setZIndex(0)
+      this.layers = [this.layer]
+      this.map.addLayer(this.layer)
+    },
+    initTD () {
+      const layerVec = this.initXYZbyURL(this.tdVec || 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a')
+      const layerCva = this.initXYZbyURL(this.tdCva || 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a')
+      this.layers = [layerVec, layerCva]
+      this.layers.forEach(layer => {
+        this.map.addLayer(layer)
+      })
+    },
+    initXYZbyURL (url) {
+      const xyzOpt = { ...{ crossOrigin: 'anonymous' }, ...this.$props.xyz, ...{ url } }
+      const source = new XYZ(xyzOpt)
+      const layerOpt = { ...this.$props, ...{ source } }
+      const layer = new TileLayer(layerOpt)
+      layer.set('base', true)
+      layer.setZIndex(0)
+      return layer
+    },
+    initTDIMG () {
+      const layerImg = this.initXYZbyURL(this.tdImg || 'http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a')
+      const layerCia = this.initXYZbyURL(this.tdCia || 'http://t3.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a')
+      this.layers = [layerImg, layerCia]
+      this.layers.forEach(layer => {
+        this.map.addLayer(layer)
+      })
+    },
+    initBD () {
+      this.layers = this.getBDMap(this.xyz, this.$props)
+      if (this.layers.length > 0) {
+        this.layers.forEach(layer => {
+          layer.setZIndex(0)
+          this.map.addLayer(layer)
+        })
+      }
+    },
+    getBDMap (xyz, tileLayer) {
+      // const extent = [72.004, 0.8293, 137.8347, 55.8271]//中国范围
+      // 计算百度使用的分辨率
+      const resolutions = []
+      for (let i = 0; i < 19; i++) {
+        resolutions[i] = Math.pow(2, 18 - i)
+      }
+      const tilegrid = new TileGrid({
+        // extent: applyTransform(extent, projzh.ll2bmerc),
+        origin: [0, 0], // 设置原点坐标
+        resolutions // 设置分辨率
+      })
+      // 创建百度地图的数据源
+      const xyzOpt = {
+        ...xyz,
+        ...{
+          projection: 'baidu',
+          tileGrid: tilegrid,
+          tileUrlFunction: function (tileCoord, pixelRatio, proj) {
+            if (!tileCoord) {
+              return ''
+            }
+            const z = tileCoord[0]
+            const x = tileCoord[1]
+            const y = -tileCoord[2] - 1
+            return 'https://maponline1.bdimg.com/tile/?qt=vtile&x=' +
+                x + '&y=' + y + '&z=' + z +
+                '&styles=pl&scaler=1&udt=20220113&from=jsapi2_0'
+          },
+          crossOrigin: 'anonymous'
+        }
+      }
+      const tile = new XYZ(xyzOpt)
+      // 百度地图层
+      const layerOpt = { ...tileLayer, ...{ source: tile } }
+      const layer = new TileLayer(layerOpt)
+      layer.set('type', 'bd')
+      layer.set('name', 'bd')
+      layer.set('base', true)
+      return [layer]
+    },
+    initGD () {
+      this.layers = this.getAMap(this.xyz, this.$props, this.gdUrl)
+      this.layers.forEach(layer => {
+        this.map.addLayer(layer)
+      })
+    },
+    getAMap (xyz, tileLayer, url) {
+      const xyzOpt = {
+        ...xyz,
+        ...{
+          url: url || 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7',
+          projection: 'GCJ02',
+          crossOrigin: 'anonymous'
+        }
+      }
+      const tile = new XYZ(xyzOpt)
+      const layerOpt = { ...tileLayer, ...{ source: tile } }
+      const layer = new TileLayer(layerOpt)
+      layer.set('type', 'AMap')
+      layer.set('name', 'AMap')
+      layer.set('base', true)
+      return [layer]
+    },
+    initTileOSM () {
+      const source = new OSM()
+      const layerOpt = { ...this.$props, ...{ source } }
+      this.layer = new TileLayer(layerOpt)
+      this.layer.set('base', this.base)
+      this.layer.setZIndex(0)
+      this.layers = [this.layer]
+      this.map.addLayer(this.layer)
+    }
+  },
+  updated () {
+    this.init()
+  },
+  mounted () {
+    this.init()
+  },
+  beforeUnmount () {
+    this.layers.forEach(layer => {
+      layer.getSource().clear()
+      this.map.removeLayer(layer)
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/map/index.js

@@ -0,0 +1,7 @@
+import VMap from '@/components/map/index.vue'
+
+VMap.install = function (Vue) {
+  Vue.component(VMap.name, VMap)
+}
+
+export default VMap

package/src/components/map/index.vue

@@ -0,0 +1,194 @@
+<template>
+  <div :id="target" :style="{'width':mapWidth,'height':mapHeight}">
+    <a :id="downLoadId" :download="downloadName"></a>
+    <slot v-if="load"></slot>
+  </div>
+</template>
+
+<script>
+import { nanoid } from 'nanoid'
+import { OlMap } from '@/utils/index.js'
+
+export default {
+  name: 'v-map',
+  provide () {
+    return {
+      VMap: this
+    }
+  },
+  props: {
+    // 地图容器宽度
+    width: {
+      type: [String, Number],
+      default () {
+        return '100%'
+      }
+    },
+    // 地图容器高度
+    height: {
+      type: [String, Number],
+      default () {
+        return '100%'
+      }
+    },
+    // 地图容器Id
+    target: {
+      type: String,
+      default: `map-${nanoid()}`
+    },
+    // 视窗属性
+    view: {
+      type: Object
+    },
+    // 未引入tile组件时默认加载图层
+    defaultTile: {
+      type: String,
+      default: 'TD'
+    },
+    // 控制属性
+    controls: {
+      type: Object
+    },
+    // 控制类扩展
+    controlsExtend: {
+      type: Object
+    },
+    // 交互属性
+    interactions: {
+      type: Object
+    },
+    // 交互类扩展
+    interactionsExtend: {
+      type: Object
+    }
+  },
+  computed: {
+    mapOption () {
+      return {
+        target: this.target,
+        view: this.view,
+        controls: this.controls,
+        interactions: this.interactions
+      }
+    },
+    map () {
+      return OlMap.map.map
+    },
+    mapWidth () {
+      return typeof this.width === 'string' ? this.width : this.width.toString() + 'px'
+    },
+    mapHeight () {
+      return typeof this.height === 'string' ? this.height : this.height.toString() + 'px'
+    }
+  },
+  watch: {
+    'view.center': {
+      handler (value) {
+        if (value) {
+          OlMap.panTo(value)
+        }
+      },
+      immediate: false,
+      deep: true
+    }
+  },
+  data () {
+    return {
+      vMap: null,
+      load: false,
+      downLoadId: `download-${nanoid()}`,
+      downloadName: 'map.png',
+      noBase: true,
+      properties: {
+        isDefault: true
+      },
+      modify: null,
+      select: null,
+      translates: null,
+      dragRotateAndZoom: null,
+      fullScreen: null
+    }
+  },
+  methods: {
+    init () {
+      return new Promise((resolve, reject) => {
+        OlMap.map = new OlMap(this.mapOption)
+        if (OlMap.map.map) {
+          resolve('success')
+        } else {
+          reject(new Error('fail'))
+        }
+      })
+    },
+    dispose () {
+      if (!this.map) return
+      const layers = [...this.map.getLayers().getArray()]
+      layers.forEach(layer => {
+        if (layer) {
+          const layerTitle = layer.get('users')
+          if (layerTitle) {
+            console.log('destroying layer', layerTitle)
+            layer.getSource().clear()
+            layer.getRenderer().dispose()
+            layer.setSource(undefined)
+            this.map.removeLayer(layer)
+          }
+        }
+      })
+      this.map.disposeInternal()
+    },
+    zoomEnd (evt) {
+      this.$emit('changeZoom', evt, this.map)
+      evt.map.once('moveend', (evt) => {
+        this.zoomEnd(evt)
+      })
+    }
+  },
+  mounted () {
+    this.init().then(res => {
+      if (res === 'success') {
+        // 点击事件
+        this.map.on('singleclick', (r) => {
+          this.$emit('click', r, this.map)
+          this.map.forEachSmFeatureAtPixel(r.pixel, (i, e) => {
+            this.$emit('onClickFeature', i, e, r)
+          }, {}, r)
+        })
+        // 层级变化
+        this.map.getView().once('change:resolution', () => {
+          this.map.once('moveend', (evt) => {
+            this.zoomEnd(evt)
+          })
+        })
+        // 鼠标悬浮
+        this.map.on('pointermove', evt => {
+          const pixel = this.map.getEventPixel(evt.originalEvent)
+          const hit = this.map.hasFeatureAtPixel(pixel)
+          this.map.getTargetElement().style.cursor = hit ? 'pointer' : ''
+          this.map.getLayers().getArray().forEach(layer => {
+            if (layer.get('type') === 'graphic') {
+              const data = layer.getData(evt.pixel)
+              const hitImage = data && data[3] > 0 // transparent pixels have zero for data[3]
+              this.map.getTargetElement().style.cursor = hitImage || hit ? 'pointer' : ''
+            }
+          })
+          this.$emit('pointermove', evt, this.map)
+        })
+        // 鼠标右键
+        this.map.on('contextmenu', evt => {
+          this.$emit('contextmenu', evt, this.map)
+        })
+        this.$emit('load')
+        this.load = true
+      }
+    })
+  },
+  beforeUnmount () {
+    this.dispose()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>