v-ol-map 1.1.0 → 1.2.1

package/src/utils/index.js

@@ -1,103 +0,0 @@
-import 'ol/ol.css'
-import { Map, View } from 'ol'
-import { defaults as defaultInteraction } from 'ol/interaction'
-import { defaults as defaultControls } from 'ol/control'
-import { getCenterByCity } from '@/utils/cityMap.js'
-import projzh from '@/utils/projConvert'
-import { addCoordinateTransforms, addProjection, Projection } from 'ol/proj.js'
-import { applyTransform } from 'ol/extent.js'
-
-const e = function (t, r, s, i, a, n) {
-  t.getSource()._forEachFeatureAtCoordinate && t.getSource()._forEachFeatureAtCoordinate(r, s,
-    function (e) {
-      return i(e, t)
-    },
-    a, n)
-}
-Map.prototype.forEachSmFeatureAtPixel = function (t, r, s, i) {
-  const a = s && s.layerFilter
-    ? s.layerFilter
-    : function () {
-      return !0
-    }
-  const n = this.getLayers().getArray()
-  const o = this.getView().getResolution()
-  const l = this.getCoordinateFromPixel(t)
-  for (let ss = 0; ss < n.length; ss++) {
-    const h = n[ss]
-    // console.log(h)
-    // eslint-disable-next-line no-useless-call
-    h.getVisible() && a.call(null, h) && e(h, l, o, r, t, i)
-  }
-  return this.forEachFeatureAtPixel(t, r, s)
-}
-
-// 注册百度坐标系
-const baiduMercatorProj = new Projection({
-  code: 'baidu',
-  // extent: applyTransform(extent, projzh.ll2bmerc),
-  units: 'm'
-})
-addProjection(baiduMercatorProj)
-addCoordinateTransforms('EPSG:4326', baiduMercatorProj, projzh.ll2bmerc, projzh.bmerc2ll)
-addCoordinateTransforms('EPSG:3857', baiduMercatorProj, projzh.smerc2bmerc, projzh.bmerc2smerc)
-// 注册高德坐标系
-const AMapMercatorProj = new Projection({
-  code: 'GCJ02',
-  extent: applyTransform([-180, -90, 180, 90], projzh.ll2gcj02mc),
-  units: 'm'
-})
-addProjection(AMapMercatorProj)
-addCoordinateTransforms('EPSG:4326', AMapMercatorProj, projzh.ll2gcj02mc, projzh.gcj02mc2ll)
-addCoordinateTransforms('EPSG:3857', AMapMercatorProj, projzh.mc2gcj02mc, projzh.gcj02mc2mc)
-
-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 const panTo = (map, center, zoom) => {
-  map.getView().animate({ center }, { zoom })
-}
-
-export class OlMap {
-  static map = OlMap
-  constructor (option = {}) {
-    // view
-    const viewOptDefault = {
-      center: [108.552500, 34.322700],
-      zoom: 5,
-      constrainResolution: true,
-      projection: 'EPSG:4326'
-    }
-    const viewOption = { ...viewOptDefault, ...option.view }
-    if (validObjKey(viewOption, 'city') && viewOption.city) {
-      viewOption.center = getCenterByCity(viewOption.city) || viewOption.center || viewOptDefault.center
-    }
-    const view = new View(viewOption)
-
-    // controls
-    const controlsDefault = {
-      zoom: false,
-      rotate: false,
-      attribution: false
-    }
-    const controlsOption = { ...controlsDefault, ...option.controls }
-    const controls = defaultControls(controlsOption).extend([])
-
-    // 生成地图
-    this.map = new Map({
-      target: option.target,
-      view,
-      controls,
-      interactions: defaultInteraction(option.interactions)
-    })
-  }
-
-  static panTo (center, zoom) {
-    return panTo(OlMap.map.map, center, zoom)
-  }
-}

package/src/utils/projConvert.js

@@ -1,320 +0,0 @@
-function forEachPoint (func) {
-  return function (input, optOutput, optDimension) {
-    const len = input.length
-    const dimension = optDimension || 2
-    let output
-    if (optOutput) {
-      output = optOutput
-    } else {
-      if (dimension !== 2) {
-        output = input.slice()
-      } else {
-        output = new Array(len)
-      }
-    }
-    for (let offset = 0; offset < len; offset += dimension) {
-      func(input, output, offset)
-    }
-    return output
-  }
-}
-
-const sphericalMercator = {
-  RADIUS: 6378137,
-  MAX_LATITUDE: 85.0511287798,
-  RAD_PER_DEG: Math.PI / 180,
-  forward: forEachPoint(function (input, output, offset) {
-    const lat = Math.max(Math.min(sphericalMercator.MAX_LATITUDE, input[offset + 1]), -sphericalMercator.MAX_LATITUDE)
-    const sin = Math.sin(lat * sphericalMercator.RAD_PER_DEG)
-
-    output[offset] = sphericalMercator.RADIUS * input[offset] * sphericalMercator.RAD_PER_DEG
-    output[offset + 1] = sphericalMercator.RADIUS * Math.log((1 + sin) / (1 - sin)) / 2
-  }),
-  inverse: forEachPoint(function (input, output, offset) {
-    output[offset] = input[offset] / sphericalMercator.RADIUS / sphericalMercator.RAD_PER_DEG
-    output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / sphericalMercator.RADIUS)) - (Math.PI / 2)) / sphericalMercator.RAD_PER_DEG
-  })
-}
-
-function getRange (v, min, max) {
-  v = Math.max(v, min)
-  v = Math.min(v, max)
-
-  return v
-}
-
-function getLoop (v, min, max) {
-  const d = max - min
-  while (v > max) {
-    v -= d
-  }
-  while (v < min) {
-    v += d
-  }
-
-  return v
-}
-
-function convertor (input, output, offset, table) {
-  const px = input[offset]
-  const py = input[offset + 1]
-  const x = table[0] + table[1] * Math.abs(px)
-  const d = Math.abs(py) / table[9]
-  const y = table[2] +
-    table[3] *
-    d +
-    table[4] *
-    d *
-    d +
-    table[5] *
-    d *
-    d *
-    d +
-    table[6] *
-    d *
-    d *
-    d *
-    d +
-    table[7] *
-    d *
-    d *
-    d *
-    d *
-    d +
-    table[8] *
-    d *
-    d *
-    d *
-    d *
-    d *
-    d
-
-  output[offset] = x * (px < 0 ? -1 : 1)
-  output[offset + 1] = y * (py < 0 ? -1 : 1)
-}
-
-const baiduMercator = {
-  MCBAND: [12890594.86, 8362377.87,
-    5591021, 3481989.83, 1678043.12, 0],
-  LLBAND: [75, 60, 45, 30, 15, 0],
-  MC2LL: [
-    [1.410526172116255e-8, 0.00000898305509648872, -1.9939833816331,
-      200.9824383106796, -187.2403703815547, 91.6087516669843,
-      -23.38765649603339, 2.57121317296198, -0.03801003308653,
-      17337981.2],
-    [-7.435856389565537e-9, 0.000008983055097726239,
-      -0.78625201886289, 96.32687599759846, -1.85204757529826,
-      -59.36935905485877, 47.40033549296737, -16.50741931063887,
-      2.28786674699375, 10260144.86],
-    [-3.030883460898826e-8, 0.00000898305509983578, 0.30071316287616,
-      59.74293618442277, 7.357984074871, -25.38371002664745,
-      13.45380521110908, -3.29883767235584, 0.32710905363475,
-      6856817.37],
-    [-1.981981304930552e-8, 0.000008983055099779535, 0.03278182852591,
-      40.31678527705744, 0.65659298677277, -4.44255534477492,
-      0.85341911805263, 0.12923347998204, -0.04625736007561,
-      4482777.06],
-    [3.09191371068437e-9, 0.000008983055096812155, 0.00006995724062,
-      23.10934304144901, -0.00023663490511, -0.6321817810242,
-      -0.00663494467273, 0.03430082397953, -0.00466043876332,
-      2555164.4],
-    [2.890871144776878e-9, 0.000008983055095805407, -3.068298e-8,
-      7.47137025468032, -0.00000353937994, -0.02145144861037,
-      -0.00001234426596, 0.00010322952773, -0.00000323890364,
-      826088.5]],
-  LL2MC: [
-    [-0.0015702102444, 111320.7020616939, 1704480524535203,
-      -10338987376042340, 26112667856603880,
-      -35149669176653700, 26595700718403920,
-      -10725012454188240, 1800819912950474, 82.5],
-    [0.0008277824516172526, 111320.7020463578, 647795574.6671607,
-      -4082003173.641316, 10774905663.51142, -15171875531.51559,
-      12053065338.62167, -5124939663.577472, 913311935.9512032,
-      67.5],
-    [0.00337398766765, 111320.7020202162, 4481351.045890365,
-      -23393751.19931662, 79682215.47186455, -115964993.2797253,
-      97236711.15602145, -43661946.33752821, 8477230.501135234,
-      52.5],
-    [0.00220636496208, 111320.7020209128, 51751.86112841131,
-      3796837.749470245, 992013.7397791013, -1221952.21711287,
-      1340652.697009075, -620943.6990984312, 144416.9293806241,
-      37.5],
-    [-0.0003441963504368392, 111320.7020576856, 278.2353980772752,
-      2485758.690035394, 6070.750963243378, 54821.18345352118,
-      9540.606633304236, -2710.55326746645, 1405.483844121726,
-      22.5],
-    [-0.0003218135878613132, 111320.7020701615, 0.00369383431289,
-      823725.6402795718, 0.46104986909093, 2351.343141331292,
-      1.58060784298199, 8.77738589078284, 0.37238884252424, 7.45]],
-  forward: forEachPoint(function (input, output, offset) {
-    const lng = getLoop(input[offset], -180, 180)
-    const lat = getRange(input[offset + 1], -74, 74)
-
-    let table = null
-    let j
-    for (j = 0; j < baiduMercator.LLBAND.length; ++j) {
-      if (lat >= baiduMercator.LLBAND[j]) {
-        table = baiduMercator.LL2MC[j]
-        break
-      }
-    }
-    if (table === null) {
-      for (j = baiduMercator.LLBAND.length - 1; j >= 0; --j) {
-        if (lat <= -baiduMercator.LLBAND[j]) {
-          table = baiduMercator.LL2MC[j]
-          break
-        }
-      }
-    }
-    output[offset] = lng
-    output[offset + 1] = lat
-    convertor(output, output, offset, table)
-  }),
-  inverse: forEachPoint(function (input, output, offset) {
-    const Y_ABS = Math.abs(input[offset + 1])
-
-    let table = null
-    for (let j = 0; j < baiduMercator.MCBAND.length; j++) {
-      if (Y_ABS >= baiduMercator.MCBAND[j]) {
-        table = baiduMercator.MC2LL[j]
-        break
-      }
-    }
-
-    convertor(input, output, offset, table)
-  })
-}
-
-const gcj02 = {
-  PI: Math.PI,
-  AXIS: 6378245.0,
-  // eslint-disable-next-line no-loss-of-precision
-  OFFSET: 0.00669342162296594323, // (a^2 - b^2) / a^2
-  delta: function (wgLon, wgLat) {
-    let dLat = this.transformLat(wgLon - 105.0, wgLat - 35.0)
-    let dLon = this.transformLon(wgLon - 105.0, wgLat - 35.0)
-    const radLat = wgLat / 180.0 * this.PI
-    let magic = Math.sin(radLat)
-    magic = 1 - this.OFFSET * magic * magic
-    const sqrtMagic = Math.sqrt(magic)
-    dLat = (dLat * 180.0) / ((this.AXIS * (1 - this.OFFSET)) / (magic * sqrtMagic) * this.PI)
-    dLon = (dLon * 180.0) / (this.AXIS / sqrtMagic * Math.cos(radLat) * this.PI)
-    return [dLon, dLat]
-  },
-  outOfChina: function (lon, lat) {
-    if (lon < 72.004 || lon > 137.8347) {
-      return true
-    }
-    return lat < 0.8293 || lat > 55.8271
-  },
-  transformLat: function (x, y) {
-    let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
-    ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0
-    ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0
-    ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0
-    return ret
-  },
-  transformLon: function (x, y) {
-    let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
-    ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0
-    ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0
-    ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0
-    return ret
-  },
-  toWGS84: forEachPoint(function (input, output, offset) {
-    let lng = input[offset]
-    let lat = input[offset + 1]
-    if (!gcj02.outOfChina(lng, lat)) {
-      const deltaD = gcj02.delta(lng, lat)
-      lng = lng - deltaD[0]
-      lat = lat - deltaD[1]
-    }
-    output[offset] = lng
-    output[offset + 1] = lat
-  }),
-  fromWGS84: forEachPoint(function (input, output, offset) {
-    let lng = input[offset]
-    let lat = input[offset + 1]
-    if (!gcj02.outOfChina(lng, lat)) {
-      const deltaD = gcj02.delta(lng, lat)
-      lng = lng + deltaD[0]
-      lat = lat + deltaD[1]
-    }
-    output[offset] = lng
-    output[offset + 1] = lat
-  })
-}
-
-const bd09 = {
-  PI: Math.PI,
-  X_PI: Math.PI * 3000 / 180,
-  toGCJ02: function (input, output, offset) {
-    const x = input[offset] - 0.0065
-    const y = input[offset + 1] - 0.006
-    const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * bd09.X_PI)
-    const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * bd09.X_PI)
-    output[offset] = z * Math.cos(theta)
-    output[offset + 1] = z * Math.sin(theta)
-    return output
-  },
-  fromGCJ02: function (input, output, offset) {
-    const x = input[offset]
-    const y = input[offset + 1]
-    const z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * bd09.X_PI)
-    const theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * bd09.X_PI)
-    output[offset] = z * Math.cos(theta) + 0.0065
-    output[offset + 1] = z * Math.sin(theta) + 0.006
-    return output
-  },
-  toWGS84: function (input, optOutput, optDimension) {
-    const output = forEachPoint(bd09.toGCJ02)(input, optOutput, optDimension)
-    return gcj02.toWGS84(output, output, optDimension)
-  },
-  fromWGS84: function (input, optOutput, optDimension) {
-    const output = gcj02.fromWGS84(input, optOutput, optDimension)
-    return forEachPoint(bd09.fromGCJ02)(output, output, optDimension)
-  }
-}
-
-const projzh = {
-  smerc2bmerc: function (input, optOutput, optDimension) {
-    let output = sphericalMercator.inverse(input, optOutput, optDimension)
-    output = bd09.fromWGS84(output, output, optDimension)
-    return baiduMercator.forward(output, output, optDimension)
-  },
-  bmerc2smerc: function (input, optOutput, optDimension) {
-    let output = baiduMercator.inverse(input, optOutput, optDimension)
-    output = bd09.toWGS84(output, output, optDimension)
-    return sphericalMercator.forward(output, output, optDimension)
-  },
-  bmerc2ll: function (input, optOutput, optDimension) {
-    const output = baiduMercator.inverse(input, optOutput, optDimension)
-    return bd09.toWGS84(output, output, optDimension)
-  },
-  ll2bmerc: function (input, optOutput, optDimension) {
-    const output = bd09.fromWGS84(input, optOutput, optDimension)
-    return baiduMercator.forward(output, output, optDimension)
-  },
-  mc2gcj02mc: function (input, optOutput, optDimension) {
-    let output = sphericalMercator.inverse(input, optOutput, optDimension)
-    output = gcj02.fromWGS84(output, output, optDimension)
-    return sphericalMercator.forward(output, output, optDimension)
-  },
-  gcj02mc2mc: function (input, optOutput, optDimension) {
-    let output = sphericalMercator.inverse(input, optOutput, optDimension)
-    output = gcj02.toWGS84(output, output, optDimension)
-    return sphericalMercator.forward(output, output, optDimension)
-  },
-  gcj02mc2ll: function (input, optOutput, optDimension) {
-    const output = sphericalMercator.inverse(input, optOutput, optDimension)
-    return gcj02.toWGS84(output, output, optDimension)
-  },
-  ll2gcj02mc: function (input, optOutput, optDimension) {
-    const output = gcj02.fromWGS84(input, optOutput, optDimension)
-    return sphericalMercator.forward(output, output, optDimension)
-  },
-  ll2smerc: sphericalMercator.forward,
-  smerc2ll: sphericalMercator.inverse
-}
-
-export default projzh

package/style.css

@@ -1,97 +0,0 @@
-: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;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #f7df1eaa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-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;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

package/vite.config.js

@@ -1,32 +0,0 @@
-import { resolve } from 'path'
-import { createVuePlugin } from 'vite-plugin-vue2'
-
-export default {
-  server: {
-    host: 'localhost',
-    port: 8080,
-    open: true
-  },
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, 'src')
-    }
-  },
-  plugins: [createVuePlugin()],
-  build: {
-    outDir: 'lib',
-    lib: {
-      entry: resolve(__dirname, 'src/components/index.js'),
-      name: 'ol-map',
-      fileName: (format) => `ol-map.${format}.js`
-    },
-    rollupOptions: {
-      external: ['vue'],
-      output: {
-        globals: {
-          vue: 'Vue'
-        }
-      }
-    }
-  }
-}