WebGis
关注
分享
扫一扫
文章平均质量分 72
WebGis
_NorthernFish
这个作者很懒，什么都没留下…
展开
-
WebGis016-数据加载原理
WebGis016-数据加载原理互联网上的地图数据主要有：矢量数据瓦片地图这两种形式。无论那种格式的gis数据，在web上都是以这两种数据形式加载的。瓦片地图根据缩放级别，将地图图片资源预先处理为：1>4>16>16…的方式切割。在web端通过ajax异步通讯技术，请求指定位置的地图资源。同样有两种方式：本地硬盘中存储读取网络资源服务器指定接口读取通过接口服务这种需要有gis数据服务器的支持。可以使第三方在线瓦片地图服务，像国家地理 天地图这种，也可以是WM原创 2021-07-05 17:51:55 · 413 阅读 · 0 评论 -
WebGis015-测量控件
WebGis015-测量控件在使用地图的过程中常常会使用到测绘工具，比如我就常在地图上测量距离。地图上的测绘分为长度和面积测量。ol5没有提供相应的控件，但是提供了接口。需要基于几何图像的相应接口病及诶和图形绘制功能来实现具体代码如下...原创 2021-06-25 17:58:29 · 224 阅读 · 0 评论 -
WebGis014-动画效果控件
WebGis014-动画效果控件在ol5中，动画效果由ol.View.animate()方法提供。在调用这个方法时，可以通过传递一个或者多个对象参数来实现多种动画效果。可实现；旋转、弹性移动、反弹，结合相关API可做出带有动画的定位效果。在mapControls文件夹下创建mapAnimation.html文件创建map对象添加控制按钮组，给按钮分别绑定事件，在事件中调用view对象的animate方法设置动画各个阶段效果，实现的时候其实有个平滑移动的效果就可以了。代码如下<!D原创 2021-06-25 16:45:35 · 252 阅读 · 0 评论 -
WebGis013-图层探查控件
WebGis013-图层探查控件有前面一下demo可知，每个地图canvas能被看到的只有一个地图图层(除了文字注记图层)。然而有这么一种场景：地图固定一直显示，需要在指定区域内显示另外一种图层。这样的需求前面和图层相关的图层控件就是做不了的。不过实现起来也比较方便。图层探查的原理是在客户端显示时，裁剪上层图层，这样一来地图就可以看到了，上层图层作为对照层也可以看到。这样就可以完成辅助错做或分析。实现步骤如下在mapControls文件夹下创建layerSearch.html 并创建好地图对象，地原创 2021-06-24 23:39:48 · 266 阅读 · 0 评论 -
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 · 324 阅读 · 0 评论 -
WebGis011-鹰眼控件
WebGis011-鹰眼控件鹰眼地图俗称地图的鸟瞰图或缩略图。可参考刺客信条的鹰眼地图。通过鹰眼地图可以俯瞰全景，可以清楚知道当前所处位置。可以在鹰眼上单击、拖动或移动到想要查看的位置。鹰眼的可视范围要比主图大，但是细节不如主图。鹰眼中心框的可视范围就是主图的可视范围，在鹰眼模式下可以查看到主图的周边概况。op5提供的鹰眼控件为ol.controol.OverviewMap。在mapControls文件夹下创建OverviewMap.html页面创建地图对象创建鹰眼控件对象给定参数配置(原创 2021-06-24 10:20:49 · 633 阅读 · 0 评论 -
WebGis010-比例尺控件
WebGis010-比例尺控件比例尺控件用来表示地图上距离相对于实际地图缩小/放大的程度。openLayers同样提供有比例尺控件ol.control.ScaleLine。创建地图对象创建比例尺控件对象并设置相关可变参数将比例尺控件添加到地图对象中去（当然还是可以在地图构造方法中定义）在mapControls文件夹下创建scaleLine.html文件<!DOCTYPE html><html> <head> <meta cha原创 2021-06-24 09:43:04 · 320 阅读 · 0 评论 -
WebGis009-鼠标控件
WebGis009-鼠标控件鼠标位置控件用于显示当前地图容器中鼠标焦点处的空间坐标点的坐标值。显示当前鼠标焦点的坐标，可以更好的辅助用户操作或分析。openLayers提供了一个鼠标位置控件：ol.control.MousePositon。当添加一个默认的MousePosition之后，默认会在地图的右上角展示鼠标焦点处坐标的html元素。该元素可以使用target属性指派。创建地图对象创建鼠标控件对象把鼠标控件通过addControl方法添加到地图对象中去也可以在创建地图对象的构造函原创 2021-06-24 09:09:37 · 294 阅读 · 0 评论 -
WebGis008-图层控件
WebGis008-图层控件实际应用中，一般来说要把地图容器加载的各个图层以列表形式展现出来，供用户自主选择展示哪些图层。ol5.x版本中没有这样的控件。但是实现起来很方便。ol中layer层有提供getVisible和setVisible两个方法。通过这些，就可以做出相应的单选框或者复选框控件。首先定义地图定义若干个图层添加进地图从地图中拿到layers数组遍历layers图层数组并存储数据在dom中新建一个ul列表嵌套input复/单选框组件用以绑定控制图层显示状态原创 2021-06-23 23:24:54 · 319 阅读 · 0 评论 -
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 · 180 阅读 · 0 评论 -
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" />原创 2021-06-23 16:08:15 · 230 阅读 · 0 评论 -
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 · 486 阅读 · 0 评论 -
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 · 370 阅读 · 0 评论 -
WebGis003-加载天地图的方式1-1
WebGis002-加载天地图的方式1-1直接通过TDT.map构造函数中传入所有参数以创建地图对象首先使用hbuilder创建一个基本的web项目(包含js、css、img、的文件夹)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tAlBSBhP-1624430689483)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210623143910514.png)]原创 2021-06-23 14:46:49 · 409 阅读 · 0 评论 -
WebGis002-基于node开发环境的初体验
WebGis002-基于node开发环境的初体验node环境npm i --save-dev parcel-bundler// openLayers 官方推荐的打包环境npm i ol// 安装 openLayers// 初始化项目npm init -y// 根目录创建 index.js 文件// 引入样式文件import "ol/ol.css";// 引入地图类和视图类import {Map,View} from "ol";// 引入地图瓷砖层imp原创 2021-06-23 11:02:26 · 146 阅读 · 0 评论 -
WebGis001-天地图相关
WebGis001-天地图相关注册天地图账号在控制台申请升级为个人开发者[学习阶段]根据需求创建应用并获取对应tk：天地图key使用示例JavaScript API调用以天地图JavaScript API 4.0为例，您只要在引用的API 地址后增加授权信息即可，其余使用方法不变。例如：http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥地图服务调用以天地图影像瓦片底图（球面墨卡托投影）服务为例，在原有瓦片获取请求参数中增加原创 2021-06-23 10:53:28 · 291 阅读 · 0 评论