Estoy tratando de hacer que openlayers funcione en Nuxt, pero cada vez que intento importar componentes de openlayers, tengo varios errores que resolví, pero uno de ellos es "Blob no está definido - node_modules/ol/worker/webgl.js"
No encontré nada en openlayers y nuxt y estoy teniendo dificultades para hacer que funcione :/
Aquí están los pasos de lo que hice:
npm instalar ol
hizo un archivo con vista de importación desde 'ol/View', recibió el error "no se puede importar el módulo ESM..."
Creé una carpeta de complementos con un ol.js con todos los activos de OL importados y plugins: ['@/plugins/ol'] en nuxt.config vista previa de mi archivo ol.js en mi carpeta de complementos
Tengo el error "no se puede leer el archivo fs"
extend: (config, { isDev, isClient }) => { config.node = {fs: 'empty',} en mi archivo nuxt.config en la compilación
También se agregó standalone: true,
y AHORA tengo blob indefinido y realmente, no tengo ni idea de qué hacer para que Openlayers funcione :/
¡Cualquier ayuda es bienvenida!
EDITAR: Hice algunos cambios
editado nuxt.config
plugins: [{ src: '@/plugins/vuelayers.js', ssr: false }, { ... }], modules: [ ..., '~/shared/vueLayers', ],Cree un archivo shared/ directorio llamado vuelayers.js
export default function (moduleOptions) { this.options.css.push('vuelayers/lib/style.css') }No tengo ningún error pero todavía no se muestra nada en mi componente
El "no se puede importar el módulo ESM..." ocurre porque el paquete ol exporta un módulo ES6 y cuando Nuxt se procesa en el lado del servidor, el proyecto principal usa módulos CommonJS. Como resultado, se produce un error de tiempo de ejecución cuando el código de las capas abiertas no se transpila para la representación del lado del servidor.
Encontré que hay dos soluciones a este problema.
Transpile explícitamente los módulos de capas abiertas que se utilizan en la propiedad de transpile de la propiedad de build en nuxt.config.js
// Build Configuration: https://go.nuxtjs.dev/config-build build: { transpile: [ 'ol/control', 'ol/proj', 'ol/style/Circle', 'ol/style/Fill', 'ol/format/GeoJSON', 'ol/format/MVT', 'ol/Map', // ... ], },Cree un complemento de Nuxt para envolver capas abiertas que solo se usa en el lado del cliente similar al ejemplo que se ve en esta esencia .
Encontré que la segunda solución es más limpia y dado que Open Layers usa <canvas> renderizar el mapa, de todos modos no se puede renderizar fácilmente en el lado del servidor.
Tenga en cuenta que el Gist vinculado anteriormente está un poco anticuado, pero la idea sigue siendo relevante. Un ejemplo moderno podría parecerse al siguiente:
// plugins/open-layers.js import Map from 'ol/Map'; import View from 'ol/View'; export default (context, inject) => { const ol = { Map, View, }; inject('ol', ol); }; // nuxt.config.js export default { // ... plugins: [ { src: '~/plugins/open-layers.js', mode: 'client' }, ], }; // Parent component <template> <client-only> <Map /> </client-only> </template> // Map.vue <template> <div ref="map" /> </template> <script> export default { name: 'Map', methods: { renderChart() { this.map = new $ol.Map({ target: this.$refs.map, view: new $ol.View({}), }); }, }, }; </script>