一、openlayer开发介绍

首先需要引入openlayer api开发包。两种方式:

1、import方式,也就是npm安装,npm install ol

2、外部js引入。

下载地址:https://github.com/openlayers/openlayers

历史版本地址:Releases · openlayers/openlayers · GitHub

里边有源码,有打包的文件。

下载后直接放入本地项目,在html文件引入即可

  <link href="/static/openlayer/ol/ol.css" rel="stylesheet" />
  <script type="text/javascript" src="/static/openlayer/ol/js/ol.js"></script> 

3、引用cdn在线的,不推荐,毕竟在线的受网络影像,但是做做demo样例可以用

  <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>

在项目中使用接口:

可以直接这样用:ol.Map,ol.layer

个人喜欢直接在上面直接这样定义:const Map = ol.Map; const View = ol.View;就不用加那些类名属性了。当时npm导入的话,直接就是:import { Point } from "ol/geom"; 

都要注意类名目录。具体可以看官网api

OpenLayers v7.5.1 API - IndexOpenLayers v7.5.1 API - IndexOpenLayers v7.5.1 API - Index

还有大牛翻译的中文版:

OpenLayers v7.3.0 API - Index

地图示例

中文:

OpenLayers Examples

英文:

OpenLayers Examples

猜你喜欢

转载自blog.csdn.net/qq_39330397/article/details/132356739
今日推荐