Sistema de información WebGIS-Element+Vue+OpenLayers
Proyecto Element+Vue+OpenLayers
por
Una imagen de teledetección de un campus como mapa base
, cargue la imagen de detección remota en el navegador a través de OpenLayers, como se muestra en la Figura 1-25.
Haga clic en el botón "Botón" para abrir un cuadro de diálogo, cuyo contenido es "Hola mundo", como se muestra en la Figura 1-26. 
El código de implementación del cuadro de diálogo que se muestra en la Figura 1-26 es el siguiente:
Conmutación multilingüe
El componente Element usa chino de manera predeterminada. Si desea usar otros idiomas, debe configurar varios idiomas. Puede cargar archivos de idioma en línea a través de CDN. Por ejemplo, para usar inglés, debe citar
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>；
Si desea usar chino, debe introducir`
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>`
Puede elegir usar chino o inglés a través del código "ELEMENT.locale (ELEMENT.lang.zh-CN) o ELEMENT.locale (ELEMENT.lang.en)" en el script . Element tiene un total de 60 idiomas incorporados, como chino simplificado (zh-CN), inglés (en) y alemán (de), y los lectores pueden configurar los idiomas requeridos según sus propias necesidades.
Por supuesto, además del método de carga de archivos de idioma CDN en línea, el idioma se puede descargar localmente como referencia. Haga clic en el botón "Componentes" en la página de inicio del sitio web oficial de Element, luego haga clic en "unpkg.com/element-ui", abra la carpeta "lib\umd\locale" en la página emergente y podrá ver la configuración en un archivo de varios idiomas, como se muestra en la Figura 1-27 (la figura solo muestra archivos de configuración para algunos idiomas).
Archivos de configuración para varios idiomas
Figura 1-27 Archivos de configuración en varios idiomas
Abra el archivo zh-CN.js y aparecerá la página del archivo zh-CN.js, como se muestra en la Figura 1-28. Haga clic en el botón "Ver sin procesar" para ver el código JavaScript del archivo zh-CN.js, como se muestra en la Figura 1-29. Presione la combinación de teclas Ctrl+S para guardar el código JavaScript del archivo zh-CN.js localmente y agregarlo al proyecto, simplemente consulte el archivo zh-CN.js en la página HTML.
Figura 1-28 La página del archivo zh-CN.js 
Figura 1-29 El código JavaScript del archivo zh-CN.js
Cambio de estilo de tema personalizado
Element proporciona un conjunto de temas predeterminados, y Element también proporciona formas de usar otros temas personalizados. Para obtener más información, consulte la sección "Temas" en la página de inicio del sitio web oficial de Element. Esta sección utiliza métodos de referencia directa para personalizar el tema.
En la página de inicio del sitio web oficial de Element, haga clic en el botón "Componente", luego haga clic en "unpkg.com/element-ui" y abra la carpeta "lib\theme-chalk" en la página emergente, como se muestra en Figura 1-30.
Figura 1-30 La página de la carpeta theme-chalk
Haga clic en un archivo de la carpeta theme-chalk, como el archivo autocomplete.css, para abrir la página del archivo, como se muestra en la Figura 1-31.
Haga clic en el botón "Ver sin procesar" en la Figura 1-31 para ver el código JavaScript del archivo autocomplete.css, como se muestra en la Figura 1-32 (solo se muestra una parte del código JavaScript). Presione la combinación de teclas Ctrl+S para guardar el código JavaScript del archivo autocomplete.css localmente y agréguelo al proyecto, e importe el archivo autocomplete.css en la página HTML a través de la etiqueta para usarlo.
Figura 1-31 La página del archivo autocompletar.css
Animación de transición de componentes
Los efectos de transición de animación proporcionados por Element incluyen aparición y desaparición gradual, escalado, despliegue y plegado, etc. Entre ellos, los componentes utilizados para la aparición y desaparición gradual y el zoom son, y la aparición y desaparición gradual tienen dos efectos: el-fade-in-linear y el-fade-in, y el zoom tiene el-zoom -in-center, el-zoom-in-top y el-zoom-in-bottom tres efectos. El lector puede lograr el efecto correspondiente cambiando el atributo de nombre en el componente de transición a un nombre diferente (como el-fade-in-linear). El componente utilizado por expand-fold es . En la Figura 1-33 se muestra un ejemplo del efecto de transición de animación del componente. 
Figura 1-33 Ejemplo de efecto de transición de animación de componentes
Al hacer clic en el botón "Alternar" en la Figura 1-33, cada etiqueta se ocultará con diferentes efectos de animación (consulte la Figura 1-34); haga clic en el botón "Alternar" nuevamente, estas etiquetas se muestran de nuevo con diferentes efectos de animación.
