一、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/ol@v7.3.0/ol.css" type="text/css"><script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/44019.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UVa10048 Audiophobia(floyd)

题意 给出一个图&#xff0c;图中的边表示从点u到点v路径上的噪音。给出q个查询&#xff0c;问从u到v所经路径上的最小噪音 思路 在使用floyd计算点对之间的路径时&#xff0c; D u , v k m i n { D u , v k − 1 , m a x { D u , k k − 1 , D k , v k − 1 } } D_{u, v}^…

华为手机Outlook手机APP无法登录邮箱,提示[2002]错误代码

近期遇到不少华为手机的Outlook APP无法登录邮箱Office365邮箱的案例&#xff0c;并且提示&#xff1a; 错误 出错了。[2002] 经测试&#xff0c;这应该是华为应用市场下载的Outlook版本有问题。 解决方法&#xff1a; 把Outlook卸载之后从微软官网重新下载官网版本去安装&am…

Creating a document in Overleaf

1、Uploading a project上传项目 This artcle provides a step-by-step guide showing how to create an Overleaf project by uploading a .zip file containing LaTeX files stored on your local computer 1、Create a .zip file containing your local files (images, bib…

redux的介绍、安装、三大核心与执行流程

redux的介绍、安装、三大核心与执行流程 一、redux的基本介绍二、redux的安装三、redux核心概念3.1 action3.2 reducer3.3 store 四、Redux代码执行流程五、加减案例练习 一、redux的基本介绍 redux中文官网Redux 是 React 中最常用的状态管理工具&#xff08;状态容器&#x…

管理类联考——逻辑——真题篇——按知识分类——汇总篇——二、论证逻辑——支持加强——第四节——分类4——比例支持

文章目录 第四节 支持加强-分类4-比例支持题-支持加强-分类4-比例支持(数据支持)-同比削弱,差比支持真题(2011-54)-支持加强-分类4-比例支持(数据支持)-同比削弱,差比支持第四节 支持加强-分类4-比例支持 题-支持加强-分类4-比例支持(数据支持)-同比削弱,差比支持…

基于深度学习创建-表情符号--附源码

表情符号深度学习概述 如今,我们使用多种表情符号或头像来表达我们的心情或感受。它们充当人类的非语言线索。它们成为情感识别、在线聊天、品牌情感、产品评论等的关键部分。针对表情符号驱动的故事讲述的数据科学研究不断增加。 从图像中检测人类情绪非常流行,这可能是由…

Ansible 实战

Ansible 实战 1. httpd 角色 目录 rootubuntu1904:~#tree -f httpd/ httpd ├── httpd/default │ └── httpd/default/main.yml ├── httpd/files │ ├── httpd/files/httpd.conf │ └── httpd/files/index.html ├── httpd/handlers │ └── http…

【数据结构】 单链表面试题讲解

文章目录 引言反转单链表题目描述示例&#xff1a;题解思路代码实现&#xff1a; 移除链表元素题目描述&#xff1a;示例思路解析&#xff1a; 链表的中间结点题目描述&#xff1a;示例&#xff1a;思路解析代码实现如下&#xff1a; 链表中倒数第k个结点题目描述示例思路解析&…

自动拉取 GitHub 仓库更新的脚本

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 由于将 HAUE-CS-WIKI 部署到了我自己的服务器上作为国内镜像站&#xff0c;每次在源站更新后都需要手动拉取镜像站的更新实在是太麻烦了&#xff0c;因此产生了编写该脚本的需求&#xff08; 读者可根据该…

腾讯大佬用了8小时讲完的Python,整整315集,拿走不谢!

Python在近几年越来越受追捧&#xff0c;很多童鞋或者职场小伙伴想要提升技能-学习Python。 这是非常好的事情&#xff0c;但问题在于很多人不知道学Python做什么&#xff0c;所以什么零碎细末、艰难晦涩、长篇大论的都去看&#xff0c;很容易陷入学不下去的困境。必须要有针对…

【docker练习】

1.安装docker服务&#xff0c;配置镜像加速器 看这篇文章https://blog.csdn.net/HealerCCX/article/details/132342679?spm1001.2014.3001.5501 2.下载系统镜像&#xff08;Ubuntu、 centos&#xff09; [rootnode1 ~]# docker pull centos [rootnode1 ~]# docker pull ubu…

【全面概览 stable diffusion】:从安装到完整使用指南

在CSDN上&#xff0c;我写了一系列关于 stable diffusion 的专栏文章&#xff0c;涵盖了从安装到使用的完整指南。在这个专栏中&#xff0c;我详细介绍了stable diffusion的基本概念、使用方法以及相关的插件和模型。 以下是该专栏的总结&#xff0c;其中包含了相关文章的链接…

前端HTML进阶

day02&#xff1a;列表、表格、表单 目标&#xff1a;掌握嵌套关系标签的写法&#xff0c;使用列表标签布局网页 01-列表 作用&#xff1a;布局内容排列整齐的区域。 列表分类&#xff1a;无序列表、有序列表、定义列表。 无序列表 作用&#xff1a;布局排列整齐的不需要规…

小程序-uni-app:hbuildx uni-app 安装 uni-icons 及使用

一、官方文档找到uni-icons uni-app官网 二、下载插件 三、点击“打开HBuildX” 四、选择要安装的项目 五、勾选要安装的插件 六、安装后&#xff0c;项目插件目录 根目录uni_modules目录下增加uni-icons、uni-scss 七、引入组件&#xff0c;使用组件 <uni-icons type&qu…

kubernetes — 常用命令介绍

目录 一、基础操作 1、简化别名设置 2、查看kubernetes的资源对象 3、创建、查看namespace 4、Pod 增删改查 二、YAML文件创建Pod 1、标签部分作用 1.生成yaml文件 2.修改yaml中的标签名 2、imagePullPolicy 1.增加镜像拉取策略 2.yaml批量创建pod 3.通过label查询…

十、Linux的root用户、用户和用户组的问题

目录 1、Linux的root用户 &#xff08;1&#xff09;基础 &#xff08;2&#xff09;如何进入root模式 &#xff08;3&#xff09;如何给普通用户配置root权限&#xff1f; 注意点&#xff1a; 配置方法&#xff1a; 2、用户/用户组问题 &#xff08;1&#xff09;用户/用…

pdf怎么合并在一起?这几个合并方法了解一下

pdf怎么合并在一起&#xff1f;在日常工作、学习和生活中&#xff0c;我们常常会遇到需要将多个PDF文件合并成一个文件的情况。比如&#xff0c;在学术论文写作中&#xff0c;我们可能需要将多篇论文合并成一个文件进行打印和提交。在工作中&#xff0c;我们可能需要将多个报告…

MacOS 安装Redis并设置密码

在开发过程中&#xff0c;需要本地进行安装Redis进行测试&#xff0c;记录了下MacOS环境下安装Redis&#xff0c;以及设置密码。 Brew 安装 $ brew install redis启动服务 # 启动服务 brew services start redis # 关闭服务 brew services stop redis # 重启服务 brew servic…

深入竞品:解读竞品分析的艺术与策略

引言&#xff1a;为何竞品分析至关重要&#xff1f; 在当今的产品环境中&#xff0c;市场变得越来越拥挤。每个角落都有新的创业公司试图创造下一个行业的颠覆者&#xff0c;同时也有成熟的巨头在不断地迭代和优化他们的产品。在这样的环境中&#xff0c;不了解您的竞争对手是…

03架构管理之测试管理

专栏说明&#xff1a;针对于企业的架构管理岗位&#xff0c;分享架构管理岗位的职责&#xff0c;工作内容&#xff0c;指导架构师如何完成架构管理工作&#xff0c;完成架构师到架构管理者的转变。计划以10篇博客阐述清楚架构管理工作&#xff0c;专栏名称&#xff1a;架构管理…