OpenLayers
关注
分享
扫一扫
MagicMHD
专注GIS，面向全栈！
展开
-
SpringBoot+Vue+OpenLayers6完成前后端分离的“疫情地图”实战项目（一、地图数据处理及代码托管）
前面我们介绍了Vue+webpack+openlayer的地图基础知识，从这一章开始，我们将正式开始我们的基于SpringBoot+Vue+OpenLayers的实战项目---疫情地图！一、疫情地图数据处理这里我介绍一下数据来源，我们首先从这里：http://datav.aliyun.com/tools/atlas/#&lat=34.994003757575776&lng=...原创 2020-03-27 20:37:03 · 5240 阅读 · 7 评论 -
Vue+Webpack+OpenLayers6完成组件化的WebGIS开发（二、组件化开发WebGIS实例）
上一章我们搭建了vue-cli，npm等环境，并且基于组件化开发的模式借助vue+webpack+openlayers6实现了地图的加载。今天这一章，我们将继续组件化的开发地图相关功能，我会通过具体的地图功能实例来进行阐述，大家加油！这里把上一章内容链接发一下：https://blog.youkuaiyun.com/MagicMHD/article/details/104962747一、地图双屏联动功...原创 2020-03-27 12:35:50 · 2764 阅读 · 1 评论 -
Vue+Webpack+OpenLayers6完成组件化的WebGIS开发（一、项目搭建）
一、Vue环境构建1、安装Vue-cli脚手架因为需要使用 npm 安装 Vue cli，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 https://nodejs.org/en/ 下载即可。下载完成以后打开cmd查看node和npm是否已经安装好：如上图所示表示已经安装好了node和npm。之后可以选择安装 cnpm，即 np...原创 2020-03-19 19:37:29 · 5086 阅读 · 4 评论 -
SpringBoot+Vue+OpenLayers6完成前后端分离的WebGIS项目（整体介绍）
在前面的博客中，我们学习了SpringBoot、学习了Vue、也学习了OpenLayers，并且也都基于它们做了实战的小项目，现在我们要把这些目前市面上非常流行的技术融合在一起开发一个WebGIS项目。我会从零开始逐步编码逐步讲解，从基础知识学起到最后完成一个实战项目！跟大家一起从头开始利用SpringBoot做后台框架，Vue做前端框架，OpenLayers做GIS框架来开发一个完整的WebGI...原创 2020-03-18 21:07:57 · 3762 阅读 · 1 评论 -
OpenLayers学习笔记高级篇（四、地图开发实战之地图要素的增删改查）
一切都准备好了，现在终于可以通过ol3加载配置好的数据了。上一节中最后的预览结果，大家已经看到了，此处我们自己通过ol来实现这个预览页面，直接上代码如下：1、加载Geoserver发布的wfs地图服务，直接上代码如下：<!doctype html><html lang="en"> <head> <meta charset="UTF...原创 2019-06-18 10:39:36 · 3471 阅读 · 8 评论 -
OpenLayers学习笔记高级篇（四、地图开发实战之Geoserver配置与发布地图服务）
本节将讲解ol使用wfs同后台geoserver进行交互，从而实现要素的增删改查。由于geoserver需要服务器端，所以我们将从环境搭建开始讲解，使用公开的数据源，进行查询，修改，添加，删除操作的演示，使得大家最终学会。1、Geoserver环境配置由于wfs协议涉及到跨域的问题，在配置过程中，我们也将把跨域的环境配置好。虽然跨域的解决方式有很多，但此处选择一个稍微简单的方式，详见下面的...原创 2019-06-11 14:51:34 · 2635 阅读 · 0 评论 -
OpenLayers学习笔记高级篇（三、地图动画）
在OpenLayers 3中，动画是随处可见的，比如平移地图时，地图移动会有惯性，停止移动后，还会继续沿着之前的方向移动一会。 比如下面这个demo地图具有回到原始点的功能，一个是有动画效果的，一个是没有动画效果的。我们先写出来然后做一个直接的视觉对比：1、地图有无动画的对比：<!doctype html><html xmlns=http://www.w3.org/1...原创 2019-06-11 13:40:34 · 2377 阅读 · 0 评论 -
OpenLayers学习笔记高级篇（二、地图控件）
在OpenLayers 3中，地图控件指的是下图标注的这些，包括缩放按钮，标尺，版权说明，指北针等等。他们不会随着地图的移动而移动，一直处于一个固定的位置。 在实现上，并不是在画布上绘制的，而是使用传统的HTML元素来实现的，便于同地图分离，也便于界面实现。 在本章节中，将先概览OpenLayers 3中已有的地图控件，对其实现进行分析，在此基础上进一步修改其样式，从而定义自己的控件。...原创 2019-06-11 10:05:38 · 3504 阅读 · 2 评论 -
OpenLayers学习笔记高级篇（一、openlayers画点线面）
话不多说直接上代码：<!doctype html><html xmlns=http://www.w3.org/1999/xhtml><head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <met...原创 2019-06-10 17:27:46 · 4606 阅读 · 1 评论 -
OpenLayers学习笔记中级篇（六、地图交互）
1、Feature选取之选中样式<!doctype html><html xmlns=http://www.w3.org/1999/xhtml><head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> &...原创 2019-06-10 16:34:57 · 1383 阅读 · 0 评论 -
OpenLayers学习笔记中级篇（五、地图事件）
事件让很多业务的东西串联在一起，在前端中起着非常重要的作用，比如鼠标点击，移动事件。但其应用远不仅如此，现实生活中就存在很多大大小小的事件。 在OpenLayers 3中，同样存在非常多的事件，比如鼠标左键单击，双击等等。 同时还有一些用于各个模块之间进行协作使用的事件，比如ol.Map的postrender和propertychange事件。 通过这些事件，OpenLayers 3的功能模块协作...原创 2019-06-10 15:56:34 · 3533 阅读 · 2 评论 -
OpenLayers学习笔记中级篇（四、地图图标操作）
图标是GIS应用中必不可少的要素，比如在地图上标注饭店，学校，加油站等，就需要添加图标，点击图标，可能需要提示更为详细的信息，比如地址，评价，或者更为复杂的业务信息。本节将从基本的应用入手讲解，直到比较高级一些的自定义特色图标和信息展示。在OpenLayer3中添加图标有两种方式，一种是我们这一小节马上就要介绍的，比较传统的overlay，另一种是下一小节马上就要介绍的Feature+St...原创 2019-06-10 13:38:53 · 3224 阅读 · 1 评论 -
OpenLayers学习笔记中级篇（三、地图的分辨率设置）
LOD是Levels of Detail的简写，用于根据当前的环境，渲染不同的图像，用于降低非重要的细节度，从而提高渲染效率，在电子游戏中经常运用，对于需要显示全球地图的GIS系统而言，更需要应用这项技术。 在不同的细节层次下，自然分辨率就可能不一样，这两者是紧密结合在一起的。 对于图形显示系统而言，分辨率作为屏幕坐标和世界坐标之间计算的纽带，其作用是非常重要的。 本节将以实例的方式深入浅出的讲解...原创 2019-06-10 09:48:59 · 4297 阅读 · 0 评论 -
OpenLayers学习笔记中级篇（二、对矢量地图的操作）
这一节我们主要对上一节我们加载的json格式的矢量地图数据进行一些操作。首先我们来看一下如何获取矢量地图的一些features。话不多说，直接上代码：1、获取features：<!doctype html><html xmlns=http://www.w3.org/1999/xhtml><head> &l...原创 2019-06-09 21:36:32 · 1907 阅读 · 5 评论 -
OpenLayers学习笔记中级篇（一、各种地图的加载）
学习了前面的初级篇，相信大家对OplenLayers已经有了一个初步的认识，下面我们再继续深入学习OpenLayers的相关功能！我们这节主要是加载各种各样的地图，包括在线服务的地图，比如天地图、高德、OSM等，还有一些我们自己使用地图服务器发布的地图，比如使用Geoserver发布的wms地图服务，最后还介绍了常用矢量地图数据的加载，好了，让我们开始吧！首先我们再来深入学习一下Sourc...原创 2019-06-09 10:48:02 · 4329 阅读 · 6 评论 -
OpenLayers学习笔记初级篇（二、地图基本功能的实现）
废话少说，咱们这节直接学习OpenLayers地图相关功能开发的demo。主要的地图功能包括：单页面多地图的相关功能开发、地图的上下左右移动及定位功能开发、限制地图范围开发、限制地图缩放层级开发和地图的自适配区域开发。1、单页面多地图的开发,直接上代码如下：<!doctype html><html xmlns=http://www.w3.org/1999/xhtml&...原创 2019-06-06 15:09:13 · 2038 阅读 · 0 评论 -
OpenLayers学习笔记初级篇（一、地图加载）
开源的地图包做的比较优秀比较好的就是OpenLayers了，下面我将用我的学习笔记带领一些没接触过OpenLayers的同学进行学习，目前初步将学习笔记分为初级基础篇，中级进阶篇和高级应用篇，我将通过一个个小的demo进行学习，比较有助于大家加深记忆和动手编码能力，下面我们进行初级基础的学习！1、OpenLayers 3简介OpenLayers 3简称ol3，它是一个开源的Web GIS引...原创 2019-06-06 09:58:21 · 3099 阅读 · 9 评论