_NorthernFish-优快云博客

原创前置准备工作-88804

准备工作开篇介绍各位读者你们好！我是致远。很高兴以这样的方式与你们进行交流。出于个人兴趣爱好和工作场景中需要的沟通能力提升，特意准备并开启了这次 Java编程经验分享。为什么不叫教程呢？是因为互联网上各大平台中出自各权威机构或老师的相关不同领域方面的知识教程非常多。自认内容和质量上都相差甚远。所以将此次计划定义为针对Java初学者的经验分享，仅仅是笔者的个人见解且笔者能力有限，姑妄言之，姑妄听之。Java是什么编程语言呢，书籍和互联网上概念都比较书面化，不太利于初学者理解。本系列中，会使用较

2021-12-12 16:10:42 350

原创 WebGis016-数据加载原理

WebGis016-数据加载原理互联网上的地图数据主要有：矢量数据瓦片地图这两种形式。无论那种格式的gis数据，在web上都是以这两种数据形式加载的。瓦片地图根据缩放级别，将地图图片资源预先处理为：1>4>16>16…的方式切割。在web端通过ajax异步通讯技术，请求指定位置的地图资源。同样有两种方式：本地硬盘中存储读取网络资源服务器指定接口读取通过接口服务这种需要有gis数据服务器的支持。可以使第三方在线瓦片地图服务，像国家地理天地图这种，也可以是WM

2021-07-05 17:51:55 518

原创 003.vue-cli2.x中使用echarts时，配置trigger=axis无效不显示的解决办法

问题描述：vue2.x中在使用Echarts时配置trigger：‘item’ 鼠标移入坐标系无提示信息配置代码摘自官网，添加tooltip配置项 lineOption: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, tooltip:

2021-06-30 14:40:28 2064

原创 002.vue-cli2.x中使用嵌套路由时，二级路由激活，一级路由状态丢失的解决办法

vue2.x中使用嵌套路由时，二级路由激活，一级路由状态丢失问题描述：vue2.x中在使用嵌套路由(二级)，在二级路由激活时，一级路由的激活状态丢失。已有激活样式类如下:.router-link-exact-active { color: #42b983;}原因分析 …解决步骤:为需要添加的路由标签添加动态绑定样式类代码v-bind:class={ '样式类名' : 表达式或布尔值 }/** * v-bind:class={ '样式类名' : 表达式或布尔值 } 当前

2021-06-28 14:23:15 604

原创 WebGis015-测量控件

WebGis015-测量控件在使用地图的过程中常常会使用到测绘工具，比如我就常在地图上测量距离。地图上的测绘分为长度和面积测量。ol5没有提供相应的控件，但是提供了接口。需要基于几何图像的相应接口病及诶和图形绘制功能来实现具体代码如下...

2021-06-25 17:58:29 275

原创 WebGis014-动画效果控件

WebGis014-动画效果控件在ol5中，动画效果由ol.View.animate()方法提供。在调用这个方法时，可以通过传递一个或者多个对象参数来实现多种动画效果。可实现；旋转、弹性移动、反弹，结合相关API可做出带有动画的定位效果。在mapControls文件夹下创建mapAnimation.html文件创建map对象添加控制按钮组，给按钮分别绑定事件，在事件中调用view对象的animate方法设置动画各个阶段效果，实现的时候其实有个平滑移动的效果就可以了。代码如下<!D

2021-06-25 16:45:35 302

原创 WebGis013-图层探查控件

WebGis013-图层探查控件有前面一下demo可知，每个地图canvas能被看到的只有一个地图图层(除了文字注记图层)。然而有这么一种场景：地图固定一直显示，需要在指定区域内显示另外一种图层。这样的需求前面和图层相关的图层控件就是做不了的。不过实现起来也比较方便。图层探查的原理是在客户端显示时，裁剪上层图层，这样一来地图就可以看到了，上层图层作为对照层也可以看到。这样就可以完成辅助错做或分析。实现步骤如下在mapControls文件夹下创建layerSearch.html 并创建好地图对象，地

2021-06-24 23:39:48 324

原创 WebGis012-全屏地图控件

WebGis012-全屏地图控件很多时候在查阅地图时需要放大到全屏显示，可以扩大视野范围，便于更好的操作地图。ol5.x提供了ol.control.FullScreen控件，该控件仅支持非IE内核的浏览器，不过现在IE也用chroinum内核了。在mapControls文件夹下创建fullScreen.html文件创建地图创建全屏控件地图和控件绑定<!DOCTYPE html><html> <head> <meta chars

2021-06-24 10:40:04 397

原创 WebGis011-鹰眼控件

WebGis011-鹰眼控件鹰眼地图俗称地图的鸟瞰图或缩略图。可参考刺客信条的鹰眼地图。通过鹰眼地图可以俯瞰全景，可以清楚知道当前所处位置。可以在鹰眼上单击、拖动或移动到想要查看的位置。鹰眼的可视范围要比主图大，但是细节不如主图。鹰眼中心框的可视范围就是主图的可视范围，在鹰眼模式下可以查看到主图的周边概况。op5提供的鹰眼控件为ol.controol.OverviewMap。在mapControls文件夹下创建OverviewMap.html页面创建地图对象创建鹰眼控件对象给定参数配置(

2021-06-24 10:20:49 766

原创 WebGis010-比例尺控件

WebGis010-比例尺控件比例尺控件用来表示地图上距离相对于实际地图缩小/放大的程度。openLayers同样提供有比例尺控件ol.control.ScaleLine。创建地图对象创建比例尺控件对象并设置相关可变参数将比例尺控件添加到地图对象中去（当然还是可以在地图构造方法中定义）在mapControls文件夹下创建scaleLine.html文件<!DOCTYPE html><html> <head> <meta cha

2021-06-24 09:43:04 390

原创 WebGis009-鼠标控件

WebGis009-鼠标控件鼠标位置控件用于显示当前地图容器中鼠标焦点处的空间坐标点的坐标值。显示当前鼠标焦点的坐标，可以更好的辅助用户操作或分析。openLayers提供了一个鼠标位置控件：ol.control.MousePositon。当添加一个默认的MousePosition之后，默认会在地图的右上角展示鼠标焦点处坐标的html元素。该元素可以使用target属性指派。创建地图对象创建鼠标控件对象把鼠标控件通过addControl方法添加到地图对象中去也可以在创建地图对象的构造函

2021-06-24 09:09:37 387

原创 WebGis008-图层控件

WebGis008-图层控件实际应用中，一般来说要把地图容器加载的各个图层以列表形式展现出来，供用户自主选择展示哪些图层。ol5.x版本中没有这样的控件。但是实现起来很方便。ol中layer层有提供getVisible和setVisible两个方法。通过这些，就可以做出相应的单选框或者复选框控件。首先定义地图定义若干个图层添加进地图从地图中拿到layers数组遍历layers图层数组并存储数据在dom中新建一个ul列表嵌套input复/单选框组件用以绑定控制图层显示状态

2021-06-23 23:24:54 384

原创 WebGis007-基本操作控件

WebGis007-基本操作控件创建 operation.html文件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="../../css/ol.css" /> <script src="../../js/ol.js"

2021-06-23 17:08:58 227

原创 WebGis006-缩放、区域缩放及滑块控件

WebGis006-缩放、区域缩放及滑块控件在之前项目page目录下创建mapControls文件夹创建zoomSlider.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="../../css/ol.css" /&gt

2021-06-23 16:08:15 282

原创 WebGis005-加载天地图的方式2-1

WebGis005-加载天地图的方式2-1事件函数式加载天地图首先使用hbuilder创建一个基本的web项目(包含js、css、img、的文件夹)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yy0Bq8Kk-1624431194480)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210623143910514.png)]然后再css/js/img同级目录

2021-06-23 14:54:03 556

原创 WebGis004-加载天地图的方式1-2

WebGis004-加载天地图的方式1-2先使用map()构造函数创建一个基本的地图对象，随后再陆续添加其他图层对象首先使用hbuilder创建一个基本的web项目(包含js、css、img、的文件夹)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s5RcSliG-1624431043934)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-2021062314391051

2021-06-23 14:51:27 458

www.fc88804.cn