Primero, debe presentar el paquete de desarrollo API de Openlayer. Dos caminos:
1. Método de importación, es decir, instalación de npm, instalación de npm ol
2. Introducción de js externos.
Dirección de descarga: https://github.com/openlayers/openlayers
Dirección de la versión histórica: Lanzamientos · openlayers/openlayers · GitHub
Hay código fuente y archivos empaquetados en su interior.
Después de la descarga, colóquelo directamente en el proyecto local e impórtelo en el archivo html.
<link href="/static/openlayer/ol/ol.css" rel="stylesheet" />
<script type="text/javascript" src="/static/openlayer/ol/js/ol.js"></script> 3. No se recomienda cotizar el cdn en línea. Después de todo, las imágenes en línea están sujetas a las imágenes de la red, pero se pueden usar como muestra de demostración.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>Utilice la interfaz en su proyecto:
Puedes usarlo directamente así: ol.Map, ol.layer
Personalmente, me gusta definir directamente arriba: const Map = ol.Map; const View = ol.View; no es necesario agregar esos atributos de nombre de clase. En ese momento, si npm lo importaba, era directamente: importar {Punto} de "ol/geom";
Preste atención al directorio de nombres de clases. Para obtener más información, consulte la API del sitio web oficial.
API OpenLayers v7.5.1 - Índice API OpenLayers v7.5.1 - Índice API OpenLayers v7.5.1 - Índice
También hay una versión china traducida por Daniel:
API OpenLayers v7.3.0 - Índice
Ejemplo de mapa
Chino:
Inglés: