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

最新推荐文章于 2024-06-04 09:45:18 发布
最新推荐文章于 2024-06-04 09:45:18 发布
阅读量500 收藏 4
点赞数
分类专栏： GIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wwinky/article/details/116243776
版权

使用的是 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中运行,效果如下
在这里插入图片描述

__Wwinky
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
openlayers常用示例
m0_51431448的博客
02-04 919
简单说一下吧，最近做了十来天的的openlayers，然后稍微研究了一下，这里总结并做了一些示例给大家分享一下，应该是相对常用的一部分吧，由于做的时间比较短，这里写了十来个示例了，有实际项目用到的，也有自己想实现的，根据官网的示例改编总结之后的。虽然只有十几个示例，但是代码量还是很大，所以代码就不在这里贴了，我都写在了Gitee上，大家可以拉下来看源码，每个示例都是单独来写，一个组件一个示例（公用的部分抽离了），相对简洁明了。然后看下目前已经做了的示例吧！
openlayers中文.rar
08-20
通过阅读这份中文手册，开发者不仅可以了解OpenLayers的基本概念，还能学习如何在实际项目中应用OpenLayers，从而构建出功能丰富的地图应用。不断实践和研究，将使你成为OpenLayers的熟练使用者。
OpenLayers之官网实例
12-14 3567
研究了几天的webgis的后端之后，正式开始研究前端代码。 从OpenLayers开始，官网的demo例子如下 https://openlayers.org/en/latest/examples/index.html github如下： https://github.com/openlayers/openlayers 又一个学习网址： http://anzhihun.cod...
数据可视化利器：OpenLayers 示例集锦
最新发布
gitblog_00036的博客
06-04 353
数据可视化利器：OpenLayers 示例集锦 项目地址:https://gitcode.com/QingyaFan/data-visualization 1. 项目介绍 在大数据时代，数据可视化成为理解和探索信息的关键工具。为此，我们带来了这个开源项目 —— Data Visualization，它是一个集合了多种基于 OpenLayers 和 MapboxGL 的数据可视化示例。该项目由资深开...
OpenLayers如何使用官网实例
m0_37565924的博客
07-15 1538
最近一直在寻找如何运行成功官网的例子，花费几天时间终于解决了。 官网的代码是ECMAScript的写法需要用到import，需要依赖node.js，对于新手来说这个有点难以理解 所以我们还是按照熟悉的方式，将js包下载到本地引用，并且需要修改import的内容 现在以openlayers官网Examples 第一个实例（View Animation）为例，说一下我修改的过程 首先，要把所有...
【WebGIS初学到入职】（12）从OpenLayers官网案例出发
ReBeX
12-14 1603
一、前言 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 1248
OpenLayers官方实例，源码整理改写。
基于openlayers实现图片地图，路径绘制，点是否在区域中判定，路径播放，回放控制
02-16
1、实现图片地图，图片地图比例尺 2、绘制点的路径 3、绘制多边形，定位不规则多边形中心点，显示名称 4、多边形编辑 5、地图全屏，地图截图 6、点是否在区域中判定 7、暂停，播放，向前，向后20s，倍速播放控制路径...
openlayers中文api.zip
07-29
OpenLayers 是一个强大的开源JavaScript库，专用于在Web上创建交互式地图应用。这个"openlayers中文api.zip"文件包含了OpenLayers中文版的API文档，为开发者提供了详细且易懂的指南，帮助他们更好地理解和使用这个库...
openlayers 中文文档
07-02
OpenLayers中文学习文档，原始文档是.md格式的转换成Html后转换成了chm格式，感谢原文作者。
OpenLayers实现图层切换控件
10-14
在OpenLayers中，图层切换控件是用于让用户在多个图层之间自由切换的重要功能。由于OpenLayers库本身并未直接提供这样的控件，开发者需要自定义来实现这一功能。本文将详细介绍如何利用OpenLayers创建一个图层切换...
Openlayers经典例子
03-29
Openlayers经典例子 案例地址 2 一. Popup 2 二、 图层叠加 3 三、 编辑功能 5 四、 鹰眼 7 五、 书签及样式 7 六、 改变显示内容 9 七、 SLD 9 八、 动画效果 10 九、 获得属性 11 十、 局部放大 12 十一、 记录上次操作历史 12 十二、 鼠标滚轮 13 十三、 鼠标坐标 13 十四、 标签 14 十五、 全屏 14 十六、 显示缩放比例 15
使用openlayers构建项目
weixin_45523066的博客
01-19 804
初步步骤 为你的项目创建一个新的空目录，然后通过运行导航到该目录mkdir new-project && cd new-project。使用初始化项目。 npm init 这将package.json在您的工作目录中创建一个文件。使用以下方式将OpenLayers添加为对您的应用程序的依赖` npm install ol npm install ol 此时，您可以要求NPM通过...
OpenLayers开篇： Hello OpenLayers
AbbottKilig的博客
04-08 1790
作为整个项目的一部分，要学习openlayers的基础知识，在此写下学习openlayers的基本思路，希望一起努力！ 1、什么是openlayers OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等， 用户还可以用简单的图片地图作为背景图，与
开源WebGIS开发2——开发环境（IntelliJ IDEA）
yl14774636230的博客
09-28 408
1、下载网址：Other Versions - IntelliJ IDEA 选择对应版本下载，推荐.exe下载 2、安装过程和配置参考博客：IntelliJ IDEA 下载安装配置教程（完整版）_爱思考的小伙-CSDN博客_idea安装教程 3、初步使用IDEA来验证环境是否配置成功 （1）新建web工程 （2）新建文件夹lib后将该文件（openlayers开发包）复制进去，然后新建html文件“map.html”，将下面的代码拷贝进去，用浏览器打开，出现下方所示地图，则证明环境配置..
开源地图库OpenLayers的简单使用
湖北太米网络科技有限公司
12-19 1580
在"OpenLayers的简单使用"这篇文章中，第四部分将探讨关于交互与控件的内容。在这一部分中，我们将重点介绍自定义交互与控件的方法和技巧。自定义交互是指根据自己的需求来设计和实现特定的交互方式，例如自定义绘制交互、自定义选择交互等。而自定义控件是指根据自己的需求来添加和定制特定的控件组件，例如自定义缩放控件、自定义图例控件等。通过本节的学习，读者将了解到如何通过OpenLayers的API来实现自定义交互与控件，为地图应用增加更多的交互性和功能性。​。
OpenLayers开发离线地图支持谷歌、高德、百度
bigemap的博客
06-23 3018
（OpenLayers DEMO）点击下载 本案例介绍如何在离线（单机、或局域网无Internet）状态下发布离线地图，且结合OpenLayer做基于地图的二次开发。 一、 离线地图数据下载 离线地图下载，可以使用bigemap地图下载器全能版（下载地址http://www.bigemap.com/reader/download/detail201802015.html）。 打开bigemap地图下载器，左上角“选择地图”选择谷歌地球，右上角“选择行政区域”我们...
Openlayers9 项目实战训练（一）：初识地图控件
qq_30379395的博客
03-27 1676
OpenLayers使得在任何网页中放置动态地图变得很容易。它可以显示从任何来源加载的地图瓦片，矢量数据和标记。OpenLayers的开发是为了进一步利用各种地理信息。它是完全免费的，开源JavaScript，在2条款BSD许可证(也称为FreeBSD)下发布。地址上面这段话大家简单看下就行，就一句话，ol是免费的，可以自定义地图源，支持更多的定制化地图操作，支持内网开发，地图数据更安全，可以自己发布地图服务，坐标数据完全存储在本地。以上就是ol基础入门，ol下一节我们聊聊绘画;
OpenLayers3使用教程
群来群往的博客
09-26 1464
教程地址：http://anzhihun.coding.me/ol3-primer/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值