Vue项目使用Vuelayers与ol/proj时出现projection.getCode报错

错误Uncaught TypeError: projection.getCode is not a function的核心原因是重复引入OpenLayers导致的版本/实例冲突：Vuelayers框架本身已经内置了OpenLayers依赖，你额外引入的独立ol模块与Vuelayers内置的OL不是同一个实例，导致通过ol/proj创建的投影对象无法被Vuelayers内部正确识别。

另外你的main.js中遗漏了Vuelayers的注册步骤，这会导致组件无法正常使用，也需要一并修正。

具体修改步骤 #

1. 修正main.js #

移除独立的ol导入，并添加Vuelayers的注册：

import { createApp } from 'vue'
import App from './App.vue'
import VueLayers from 'vuelayers'
import 'vuelayers/dist/vuelayers.css'

// 注册Vuelayers插件
createApp(App).use(VueLayers).mount('#app')

2. 修正组件中的投影导入 #

改用Vuelayers内置的OpenLayers模块来创建投影，避免实例冲突：

// ExampleComp.vue的script部分
import { addProjection, createProjection } from 'vuelayers/lib/ol/proj'

let size = [1024, 968]
let extent = [0, 0, ...size]

let customProj = createProjection({
  code: 'xkcd-image',
  units: 'pixels',
  extent,
})

addProjection(customProj)

export default {
  data () {
    return { 
      zoom: 2,
      maxZoom: 8,
      center: [size[0] / 2, size[1] / 2],
      rotation: 0,
      projection: customProj.getCode(),
      imgUrl: 'https://imgs.xkcd.com/comics/online_communities.png',
      imgCopyright: '© <a href="http://xkcd.com/license.html">xkcd</a>',
      imgSize: size,
      imgExtent: extent,
    }
  },
}

额外说明 #

如果确实需要使用独立的ol模块，必须保证其版本与Vuelayers依赖的OL版本完全一致（可查看Vuelayers的package.json文件确认依赖版本），否则会出现实例不兼容的问题。但通常推荐直接使用Vuelayers内置的OL模块，避免版本冲突。

内容的提问来源于stack exchange，提问作者Antigrammer