Openlayers初识 之 官网案例在IDEA中实现

最新推荐文章于 2025-11-22 03:22:09 发布
原创 最新推荐文章于 2025-11-22 03:22:09 发布 · 630 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文记录了如何在2020.3 IDEA中引入OpenLayers，并通过GeoServer实例学习其组件设置，包括CSS、JS引入和基本示例实现过程。

使用的是 2020.3 旗舰版的IDEA，这是我摸索学习使用OpenLayers的过程，如果有错，还望指出，谢谢。

本贴记录了我是如何在IDEA中使用OpenLayers的

  1. 新建一个静态Web工程
    在这里插入图片描述

  2. 创建一个名为lib的文件夹
    在这里插入图片描述

  3. 将我们下载好的OpenLayers文件拷贝进lib文件夹中，这样子我们就可以在IDEA中使用OpenLayers给我们提供的资源
    在这里插入图片描述

我们可以借助GeoServer给我们提供的例子初步感受一下OpenLayers

登录GeoServer服务器（默认用户名是admin，默认密码是geoserver），找到Layer Preview
在这里插入图片描述
随便打开一个图层预览，右键查看源码
在这里插入图片描述
分析一下该例子的源码

从我一个目前只学习过前端知识的人来看，该例子的源码包括三部分：

第一部分 —— 导入了OpenLayers框架中的ol.css文件，进行了网页布局的设置
在这里插入图片描述
第二部分 —— 例子导入OpenLayers框架中的ol.js文件
在这里插入图片描述
第三部分 —— 对OpenLayers组件的一些设置
在这里插入图片描述
初步解析完成，我们可以将源码拷贝到IDEA中运行，查看运行效果

在项目中创建一个HTML文件
在这里插入图片描述
将源码拷贝进IDEA中运行,效果如下
在这里插入图片描述

openlayers常用示例
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
02-04 1228
简单说一下吧，最近做了十来天的的openlayers，然后稍微研究了一下，这里总结并做了一些示例给大家分享一下，应该是相对常用的一部分吧，由于做的时间比较短，这里写了十来个示例了，有实际项目用到的，也有自己想实现的，根据官网的示例改编总结之后的。虽然只有十几个示例，但是代码量还是很大，所以代码就不在这里贴了，我都写在了Gitee上，大家可以拉下来看源码，每个示例都是单独来写，一个组件一个示例（公用的部分抽离了），相对简洁明了。然后看下目前已经做了的示例吧！
OpenLayers案例-我的理解 01-24
mollerlala的博客
03-17 2480
目录 1. 可键盘操作的地图，Accessible Map 2.矢量平铺层，Advanced Mapbox Vector Tiles 3.视图定位，Advanced View Positioning 4.动态GIF，Animated GIF 5.ArcGIS服务获取Feature对象，ArcGIS REST Feature Service 6.ArcGIS显示512*512平铺，ArcGIS REST with 512x512 Tiles 7.版权归属，Attributions 8.波段对.
Openlayers经典例子
03-29
Openlayers经典例子 案例地址 2 一. Popup 2 二、 图层叠加 3 三、 编辑功能 5 四、 鹰眼 7 五、 书签及样式 7 六、 改变显示内容 9 七、 SLD 9 八、 动画效果 10 九、 获得属性 11 十、 局部放大 12 十一、 记录上次操作历史 12 十二、 鼠标滚轮 13 十三、 鼠标坐标 13 十四、 标签 14 十五、 全屏 14 十六、 显示缩放比例 15
OpenLayers 数据可视化完全指南：10个实战案例带你从入门到精通
gitblog_00918的博客
11-22 1040
OpenLayers 是一个功能强大的开源 JavaScript 库，专门用于在 Web 浏览器中显示交互式地图和数据可视化。无论你是数据分析师、Web 开发者还是 GIS 专业人士，掌握 OpenLayers 都能让你的数据展示更加生动直观。🚀 ## 什么是 OpenLayers 数据可视化？ OpenLayers 数据可视化 是将地理空间数据以图形化方式呈现的过程，它能够将复杂的地理信息
OpenLayers之官网实例
12-14 3684
研究了几天的webgis的后端之后，正式开始研究前端代码。 从OpenLayers开始，官网的demo例子如下 https://openlayers.org/en/latest/examples/index.html github如下： https://github.com/openlayers/openlayers 又一个学习网址： http://anzhihun.cod...
OpenLayers如何使用官网实例
m0_37565924的博客
07-15 1633
最近一直在寻找如何运行成功官网的例子，花费几天时间终于解决了。 官网的代码是ECMAScript的写法需要用到import，需要依赖node.js，对于新手来说这个有点难以理解 所以我们还是按照熟悉的方式，将js包下载到本地引用，并且需要修改import的内容 现在以openlayers官网Examples 第一个实例（View Animation）为例，说一下我修改的过程 首先，要把所有...
精选资源
基于openlayers实现图片地图，路径绘制，点是否在区域中判定，路径播放，回放控制
02-16
1、实现图片地图，图片地图比例尺 2、绘制点的路径 3、绘制多边形，定位不规则多边形中心点，显示名称 4、多边形编辑 5、地图全屏，地图截图 6、点是否在区域中判定 7、暂停，播放，向前，向后20s，倍速播放控制路径...
精选资源
openlayers中文.rar
08-20
通过阅读这份中文手册，开发者不仅可以了解OpenLayers的基本概念，还能学习如何在实际项目中应用OpenLayers，从而构建出功能丰富的地图应用。不断实践和研究，将使你成为OpenLayers的熟练使用者。
OpenLayers初识 之 API文档的使用
Wwinky的博客
04-27 2650
OpenLayers初识之API文档的使用 OpenLayers的安装可以查看GIS环境配置 可以在OpenLayers官网中查看API文档 官方API文档界面如下： 分为左右两块，右方给我们列举了OpenLayers的几大组件：（之后会逐一讲解） Map —— map是openlayers的核心，包含图层、交互事件、UI控制元素等 View —— 用于管理地图视图 Layers —— 用于图层信息管理 Control —— UI控制器 Interactions —— 交互操作 Sources and f
openlayers 中文文档
07-02
OpenLayers中文学习文档，原始文档是.md格式的转换成Html后转换成了chm格式，感谢原文作者。
openlayers中文API文档
最新发布
12-29
在"openlayers中文API 帮助文档"中，可以获取关于OpenLayers库的全面信息，这将有助于使用者深入理解并高效运用这一强大的工具。 文档通常包含以下几个核心部分：1. **安装与引入**：说明如何将OpenLayers库集成到...
【WebGIS初学到入职】（12）从OpenLayers官网案例出发
ReBeX
12-14 2091
一、前言 OpenLayers的官网给我们提供了相当多的例子，打开一个例子你就能直接看到运行效果还有一些说明，接着就是下面的代码：main.js、index.html、package.json 但如果一个纯纯纯小白比如我，点开来之后可能会有些懵： 还没学到JS模块化编程，就可能看不懂这一堆的import： import 'ol/ol.css'; import Map from 'ol/Map'; import OSM from 'ol/source/OSM'; 或者是还没学过node.js的可能会不知道
OpenLayers官方实例全集
GISer小辉
03-03 1417
OpenLayers官方实例，源码整理改写。
使用openlayers构建项目
weixin_45523066的博客
01-19 942
初步步骤 为你的项目创建一个新的空目录，然后通过运行导航到该目录mkdir new-project && cd new-project。使用初始化项目。 npm init 这将package.json在您的工作目录中创建一个文件。使用以下方式将OpenLayers添加为对您的应用程序的依赖` npm install ol npm install ol 此时，您可以要求NPM通过...
开源地图库OpenLayers的简单使用
4G/5G随身WiFi专业DIY改装
12-19 2190
在"OpenLayers的简单使用"这篇文章中，第四部分将探讨关于交互与控件的内容。在这一部分中，我们将重点介绍自定义交互与控件的方法和技巧。自定义交互是指根据自己的需求来设计和实现特定的交互方式，例如自定义绘制交互、自定义选择交互等。而自定义控件是指根据自己的需求来添加和定制特定的控件组件，例如自定义缩放控件、自定义图例控件等。通过本节的学习，读者将了解到如何通过OpenLayers的API来实现自定义交互与控件，为地图应用增加更多的交互性和功能性。​。
OpenLayers开篇： Hello OpenLayers
AbbottKilig的博客
04-08 1877
作为整个项目的一部分，要学习openlayers的基础知识，在此写下学习openlayers的基本思路，希望一起努力！ 1、什么是openlayers OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等， 用户还可以用简单的图片地图作为背景图，与
OpenLayers 3入门教程
u013341164的博客
06-21 1121
转载《OpenLayers 3 Primer》 http://weilin.me/ol3-primer/ 介绍 这是一个关于OpenLayers 3使用的入门教程。帮助初学者逐步认识OpenLayers 3，理解地图组成，以及各个组成部分的作用。在此基础上，逐个突破，结合大量的实例，指导大家应用OpenLayers 3开发出符合业务的地图。在这个过程中，辅以对应的理论知识，学习了解OpenLaye...
开源WebGIS开发2——开发环境（IntelliJ IDEA）
yl14774636230的博客
09-28 537
1、下载网址：Other Versions - IntelliJ IDEA 选择对应版本下载，推荐.exe下载 2、安装过程和配置参考博客：IntelliJ IDEA 下载安装配置教程（完整版）_爱思考的小伙-优快云博客_idea安装教程 3、初步使用IDEA来验证环境是否配置成功 （1）新建web工程 （2）新建文件夹lib后将该文件（openlayers开发包）复制进去，然后新建html文件“map.html”，将下面的代码拷贝进去，用浏览器打开，出现下方所示地图，则证明环境配置..
OpenLayers项目入门-实例
qq_41829867的博客
01-19 2668
文章目录前言一、OpenLayers是什么？二、入门实例1.在线版本2.离线版本总结 前言 由于工作，需要学习一下OpenLayers，了解了基础知识后发现网上好多所谓入门实例太坑人了，对我这样的前端小白太不友好了，所以，在测试了一个最简单的版本后，我准备自己写一个，喜欢点赞哈。 一、OpenLayers是什么？ OpenLayers使在任何网页中轻松放置动态地图成为可能。它可以显示从任何来源加载的地图图块，矢量数据和标记。OpenLayers的开发旨在进一步利用各种地理信息。重点在于是一个完全免费的J
Openlayers 10.2.1在Android Compose中的地图集成实现
本文所涉及的知识点主要围绕“OpenLayers在Android Compose项目中的集成与应用”，重点展示了如何将Web端强大的地图渲染库OpenLayers 10.2.1版本嵌入到基于Jetpack Compose构建的安卓原生应用中，实现高德或百度在线...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值