WebGIS实战
关注
分享
扫一扫
文章平均质量分 60
WebGIS实战小项目
MagicMHD
专注GIS，面向全栈！
展开
-
Cesium三维开发笔记（一、加载三维地球）
目前WebGIS的方向逐渐在从二维地球像三维地球转变，作为一个GISer，三维开发技术也是必须要掌握的一门技术了，Cesium是一个开源的三维地图开发包，是目前市面上用的非常多的一个包，接下来我们就一起学习如何使用Cesium进行三维GIS的开发，本章要讲的就是如何最简单的把Cesium三维地球加载出来！一、系统搭建系统整体结构如下图所示：先来给大家解释一下我为什么分了这么多层结构。我们在开发过程中一直强组件化、调模块化，这里我们虽然是用原生的js来写的，但是我们也要注重代码的条理性、模块性原创 2020-08-31 14:52:45 · 2974 阅读 · 4 评论 -
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 · 5164 阅读 · 7 评论 -
Vue+Webpack+OpenLayers6完成组件化的WebGIS开发（二、组件化开发WebGIS实例）
上一章我们搭建了vue-cli，npm等环境，并且基于组件化开发的模式借助vue+webpack+openlayers6实现了地图的加载。今天这一章，我们将继续组件化的开发地图相关功能，我会通过具体的地图功能实例来进行阐述，大家加油！这里把上一章内容链接发一下：https://blog.csdn.net/MagicMHD/article/details/104962747一、地图双屏联动功...原创 2020-03-27 12:35:50 · 2697 阅读 · 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 · 4970 阅读 · 4 评论 -
OpenLayers学习笔记高级篇（二、地图控件）
在OpenLayers 3中，地图控件指的是下图标注的这些，包括缩放按钮，标尺，版权说明，指北针等等。他们不会随着地图的移动而移动，一直处于一个固定的位置。 在实现上，并不是在画布上绘制的，而是使用传统的HTML元素来实现的，便于同地图分离，也便于界面实现。 在本章节中，将先概览OpenLayers 3中已有的地图控件，对其实现进行分析，在此基础上进一步修改其样式，从而定义自己的控件。...原创 2019-06-11 10:05:38 · 3438 阅读 · 2 评论 -
OpenLayers学习笔记高级篇（三、地图动画）
在OpenLayers 3中，动画是随处可见的，比如平移地图时，地图移动会有惯性，停止移动后，还会继续沿着之前的方向移动一会。 比如下面这个demo地图具有回到原始点的功能，一个是有动画效果的，一个是没有动画效果的。我们先写出来然后做一个直接的视觉对比：1、地图有无动画的对比：<!doctype html><html xmlns=http://www.w3.org/1...原创 2019-06-11 13:40:34 · 2331 阅读 · 0 评论 -
OpenLayers学习笔记高级篇（四、地图开发实战之Geoserver配置与发布地图服务）
本节将讲解ol使用wfs同后台geoserver进行交互，从而实现要素的增删改查。由于geoserver需要服务器端，所以我们将从环境搭建开始讲解，使用公开的数据源，进行查询，修改，添加，删除操作的演示，使得大家最终学会。1、Geoserver环境配置由于wfs协议涉及到跨域的问题，在配置过程中，我们也将把跨域的环境配置好。虽然跨域的解决方式有很多，但此处选择一个稍微简单的方式，详见下面的...原创 2019-06-11 14:51:34 · 2591 阅读 · 0 评论 -
OpenLayers学习笔记高级篇（四、地图开发实战之地图要素的增删改查）
一切都准备好了，现在终于可以通过ol3加载配置好的数据了。上一节中最后的预览结果，大家已经看到了，此处我们自己通过ol来实现这个预览页面，直接上代码如下：1、加载Geoserver发布的wfs地图服务，直接上代码如下：<!doctype html><html lang="en"> <head> <meta charset="UTF...原创 2019-06-18 10:39:36 · 3409 阅读 · 8 评论 -
Arcgis栅格数据的空间分析（一、掩膜分析、密度分析）
一、栅格数据的基础知识：栅格数据是由按行和列（或格网）组织的单元（或像素）矩阵组成的，每个单元都包含一个信息值。栅格数据一般分为两类：专题数据和图像数据。专题数据的栅格值表示某种测量值或某个特定现象的分类，如高程（值）、污染浓度或人口（数量）等；图像数据的栅格值表示诸如卫星图像或照片等的反射或发射的光或能量。栅格数据的组成：1.单个 栅格数据由栅格单元组成，单元是特定区域的方...原创 2019-08-05 21:03:28 · 22327 阅读 · 1 评论 -
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 · 4572 阅读 · 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 · 1360 阅读 · 0 评论 -
OpenLayers学习笔记中级篇（五、地图事件）
事件让很多业务的东西串联在一起，在前端中起着非常重要的作用，比如鼠标点击，移动事件。但其应用远不仅如此，现实生活中就存在很多大大小小的事件。 在OpenLayers 3中，同样存在非常多的事件，比如鼠标左键单击，双击等等。 同时还有一些用于各个模块之间进行协作使用的事件，比如ol.Map的postrender和propertychange事件。 通过这些事件，OpenLayers 3的功能模块协作...原创 2019-06-10 15:56:34 · 3507 阅读 · 2 评论 -
WebGIS入门（二）--------ArcGIS API for Javascript使用tomcat部署到本地
费了半天劲，终于入了个webgis的门把arcgis api for javascript部署到本地了，下面跟大家分享一下！一、用到的工具：1、arcgis api for javascript，可以去官网下载，不过官网下载要注册账号，比较麻烦，这里我给大家推荐一个网站，可以下载各种版本的api：http://www.xiaobaigis.com/Articles/GIS/arcgisa...原创 2018-08-06 15:54:39 · 947 阅读 · 1 评论 -
WebGIS入门（一）--------在线加载ESRI地图
一、首先要添加在线的arcGIS的样式css库和js库，代码如下：<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css"><script src="http://js.arcgis.com/3.11/"></script>这里另外再提一点...原创 2018-08-03 16:13:20 · 7314 阅读 · 6 评论 -
OpenLayers学习笔记初级篇（一、地图加载）
开源的地图包做的比较优秀比较好的就是OpenLayers了，下面我将用我的学习笔记带领一些没接触过OpenLayers的同学进行学习，目前初步将学习笔记分为初级基础篇，中级进阶篇和高级应用篇，我将通过一个个小的demo进行学习，比较有助于大家加深记忆和动手编码能力，下面我们进行初级基础的学习！1、OpenLayers 3简介OpenLayers 3简称ol3，它是一个开源的Web GIS引...原创 2019-06-06 09:58:21 · 3057 阅读 · 9 评论 -
OpenLayers学习笔记初级篇（二、地图基本功能的实现）
废话少说，咱们这节直接学习OpenLayers地图相关功能开发的demo。主要的地图功能包括：单页面多地图的相关功能开发、地图的上下左右移动及定位功能开发、限制地图范围开发、限制地图缩放层级开发和地图的自适配区域开发。1、单页面多地图的开发,直接上代码如下：<!doctype html><html xmlns=http://www.w3.org/1999/xhtml&...原创 2019-06-06 15:09:13 · 2009 阅读 · 0 评论 -
OpenLayers学习笔记中级篇（一、各种地图的加载）
学习了前面的初级篇，相信大家对OplenLayers已经有了一个初步的认识，下面我们再继续深入学习OpenLayers的相关功能！我们这节主要是加载各种各样的地图，包括在线服务的地图，比如天地图、高德、OSM等，还有一些我们自己使用地图服务器发布的地图，比如使用Geoserver发布的wms地图服务，最后还介绍了常用矢量地图数据的加载，好了，让我们开始吧！首先我们再来深入学习一下Sourc...原创 2019-06-09 10:48:02 · 4269 阅读 · 6 评论 -
OpenLayers学习笔记中级篇（二、对矢量地图的操作）
这一节我们主要对上一节我们加载的json格式的矢量地图数据进行一些操作。首先我们来看一下如何获取矢量地图的一些features。话不多说，直接上代码：1、获取features：<!doctype html><html xmlns=http://www.w3.org/1999/xhtml><head> &l...原创 2019-06-09 21:36:32 · 1881 阅读 · 5 评论 -
OpenLayers学习笔记中级篇（三、地图的分辨率设置）
LOD是Levels of Detail的简写，用于根据当前的环境，渲染不同的图像，用于降低非重要的细节度，从而提高渲染效率，在电子游戏中经常运用，对于需要显示全球地图的GIS系统而言，更需要应用这项技术。 在不同的细节层次下，自然分辨率就可能不一样，这两者是紧密结合在一起的。 对于图形显示系统而言，分辨率作为屏幕坐标和世界坐标之间计算的纽带，其作用是非常重要的。 本节将以实例的方式深入浅出的讲解...原创 2019-06-10 09:48:59 · 4210 阅读 · 0 评论 -
OpenLayers学习笔记中级篇（四、地图图标操作）
图标是GIS应用中必不可少的要素，比如在地图上标注饭店，学校，加油站等，就需要添加图标，点击图标，可能需要提示更为详细的信息，比如地址，评价，或者更为复杂的业务信息。本节将从基本的应用入手讲解，直到比较高级一些的自定义特色图标和信息展示。在OpenLayer3中添加图标有两种方式，一种是我们这一小节马上就要介绍的，比较传统的overlay，另一种是下一小节马上就要介绍的Feature+St...原创 2019-06-10 13:38:53 · 3167 阅读 · 1 评论 -
ArcGIS合并和拆分地图
在这里记录一下工作中使用的方法。1、地图Merge（合并）比如我们现在打开了几个村庄的地图如下图：现在我们想要把这几个村庄的地图合并到同一张地图上，具体操作如下：选择Geoprocessing菜单中的Merge方法，然后操作如下：最后直接点击Ok即可。2、地图拆分现在我们在一张地图上有十个村的地图，我们想要把他们拆分成十个村庄，具体操作如下：首先先选...原创 2019-02-27 15:45:14 · 17104 阅读 · 0 评论