地图学习
文章平均质量分 82
nie-ny
小小的前端
展开
-
OpenLayers - 加载静态图片(十二)
简介本文讲解,如何使用OpenLayers在载静态图片上添加标记,预览图片。主要使用ol.source.ImageStatic用于显示单个静态图像的图层源。使用OpenLayers的好处有,地图的放大、缩小等view视图功能都可以使用,根据地理坐标绘制标注也能很好的使用,对于演示而言,无疑加快了开发效率。开始使用初始化地图<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /原创 2022-04-26 10:14:38 · 3703 阅读 · 3 评论 -
OpenLayers - 使用Cluster绘制聚合标注(十一)
简介本文介绍如何绘制聚合标注。在开发中往往需要我们绘制大量的标注点,当地图层级缩放到最大时就需要加载全部的点。看上去比较密集不能直接知道大概位置有多少数据。为了解决这一问题OpenLayers提供了ol.source.Clusterol.source.Cluster它是对矢量数据进行聚类的图层源。没错它不是图层,只是矢量图层的数据源。使用方式就是实例化Cluster,作为要素加入矢量图层中。ol.source.Cluster({ distance: 10, // 标注元素之间的间距,原创 2022-02-20 15:03:06 · 1290 阅读 · 0 评论 -
OpenLayers - Vector绘制地图省市区(十)
简介本文讲解经常在开发中出现的功能,绘制地图省市区。主要使用Vector图层通过绘制多边行的方法,绘制出省市区的多边行,把该图层添加到地图图层上,就实现了绘制省市区图形。Vector矢量图层: 在客户端呈现的矢量数据。构成一个矢量图层需要一个数据源(source)和一个样式(style),数据源构成矢量图层的要素,样式规定要素显示的方式和外观。一个矢量图层包含一个到多个要素(feature),每个要素由地理属(geometry)和其他属性组成。常用于从数据库中请求数据,接受数据,并将接收的数据解析原创 2022-02-20 15:02:19 · 1213 阅读 · 1 评论 -
OpenLayers - 图层透视效果 (九)
简介本文主要讲解的是,通过控制图层,层级和大小来实现图层透视功能。主要使用图层监听事件 prerender监听图层渲染之前,postrender监听图层渲染之后。实现DEMO初始化地图<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />原创 2022-02-20 15:01:11 · 956 阅读 · 0 评论 -
OpenLayers - Overlay简介 (八)
Overlay是什么让HTML元素显示在地图上某个位置。他和控件很像都是在地图上添加可见元素,不同的是,它不是根据屏幕位置固定的,而是与地理坐标相关联,因此平移地图将移动 Overlay。常用的大致有三类,弹窗、标注、文本信息。每个覆盖物都会生成对应的HTML元素,所以我们也可以使用css来修改去样式。overlay 常用属性id,覆盖物的唯一标识 ,便于 getOverlayById 方法取得相应的 overlay。element,要添加到覆盖物元素。offset,偏移量,像素为单位。ove原创 2022-02-20 15:00:16 · 3720 阅读 · 0 评论 -
OpenLayers - interaction简介 (七)
Interaction是什么Interaction是用来控制地图的。没看错它和控件一样的作用。不过它们的区别是控件触发都是一些可见的 HTML元素触发,如按钮、链接等;交互功能都是一些设备行为触发,都是不可见的,如鼠标双击、滚轮滑动,手机设备的手指缩放等。Interaction,是一个虚基类,不负责实例化,交互功能都继承该基类。常用交互功能doubleclickzoom ,双击地图进行缩放;draganddrop ,以“拖文件到地图中”的交互添加图层;dragbox,拉框,用于划定一个矩形原创 2022-02-20 14:59:30 · 1752 阅读 · 1 评论 -
OpenLayers - control简介 (六)
control是什么Controls是用来控制地图的。如通过按钮控制地图大小,在地图map上添加修饰等。在Openlayers中多数Controls直接可以在地图上添加,比如Navigation(导航栏)。第二类是需要放在Div元素中才能用。第三类需要放置在panel(面板)中的操作类似于网页HTML中button按钮,需要点击或绑定才能起作用。最后一类就是自定义类型的。常用的控件controldefaults,地图默认包含的控件。fullscreen,全屏控件,用于全屏幕查看地图。mou原创 2022-02-20 14:58:31 · 1340 阅读 · 0 评论 -
OpenLayers - Layer简介 (五)
Layer 是什么图层就像是含有文字或图形等元素的图片,一张张按顺序叠放在一起,组合起来形成页面的最终效果。Layer就是创建这一张张图的函数。Layer是派生所有图层类型的基类。定义了诸多不同图层类型共用的特征和方法。要使用Layer需要先从 source 接收到的数据,然后添加到 map 中。常用参数className 设置图层元素的 CSS类名称。extent 图层渲染的边界范围。zIndex 图层渲染的 z-index。在渲染时,图层将被排序,首先是 Z-index原创 2022-02-20 14:58:00 · 1566 阅读 · 0 评论 -
OpenLayers - Source简介 (四)
Source是什么数据来源和格式。简单理解就是在使用layers(图层)时,不同的图层需要传入不同的数据类型,才能渲染地图。它们需要的数据格式都是通过Source定义好的,我们只需要把现有的数据,按照规定传入数据源中,就不需要关心其他操作。Source的一些数据类型ol.source.BingMaps Bing 地图图块数据的图层源。ol.source.CartoDB CartoDB Maps API 的图层源。ol.source.Cluster 聚簇矢量数据。ol.source.Vect原创 2022-02-20 14:57:16 · 1453 阅读 · 1 评论 -
OpenLayers - View详解 (三)
View是什么表示地图的简单 2D 视图。简单理解就是用来控制地图在容器中移动,方法的。主要用于更改地图的中心、分辨率和旋转的对象。视图具有projection。投影决定了中心的坐标系,其单位决定了分辨率的单位(每像素的投影单位)。默认投影是球面墨卡托 (EPSG:3857)。需要注意的是,在构造函数中添加了约束后,在使用方法设置或者获取数据都是在约束内的。常用参数center 视图的初始中心。constrainRotation 旋转约束。 false意味着没有约束。true意味着没有约原创 2022-02-20 14:56:32 · 1750 阅读 · 1 评论 -
OpenLayers - Map详解 (二)
Map是什么是 OpenLayers 的核心组件。用于初始化地图对象。初始化地图(Map),需要一个视图(view)、一个或多个图层( layer),和一个地图加载的目标 HTML 标签(target)。参数controls 添加到地图上的控件。默认加载 ol/control 下 defaults,默认控件组。pixelRatio 设备上物理像素与设备无关像素(下降)之间的比率。interactions 添加到地图的交互事件。默认加载 ol/interaction 下 defaults,默原创 2022-02-20 14:54:38 · 1934 阅读 · 0 评论 -
OpenLayers - 入门 (一)
简介在地图项目的开发中,有时候也需要不依赖于任何公司来开发项目。那么前端地图展示,图层控制就需要一个开源的框架来开发,我一下就相中了OpenLayers(其实是公司要求)。什么是 OpenLayers这里使用的是 OpenLayers v6.6.1OpenLayers 是一个开源的JavaScript类库,主要是用于开发Web GIS客户端。要想完整的开发一个地图项目,还需要后端提供地图瓦片的服务,如可以使用geoserver等。它可以轻松地在任何网页中放置动态地图。且能支持移动设备。它可原创 2022-02-14 10:09:53 · 1065 阅读 · 0 评论 -
百度地图 - 使用Echarts绘制飞线图
简介为了更好的理解Echarts,把配置项看完是有必要的。但是看完了也不一定记得住,比如说我。一天看一些,当看完后觉得Echarts好强大。然后除了觉得Echarts强大外,其他的基本忘了。所以动手写一些DEMO也是很有必要的。下面来了解一下如何在地图上使用Echarts绘制飞线图。引入 Api通过<script>标签引入地图api地址、echarts地址、扩展插件地址,这里的ak是你在地图服务中心注册的。不了解ak的点击 这里 。不了解地图扩展插件的点击 这里 。<!--原创 2022-02-14 10:07:39 · 5807 阅读 · 0 评论 -
百度地图 - 在Echarts中使用地图api
简介在地图可视化项目的开发中,为了进度领导是不会给你多余的时间完成一个功能。这时,就需要我们在社区中寻找框架,来实现这个功能。在许多符合条件的框架中,发现Echarts最符合产品的要求。Echarts地图扩展插件贡献者:沈毅百度地图扩展,可以在百度地图上展现点图,线图,热力图等。数据格式跟在 geo 坐标系上一样,每一项都是 [经度,纬度,数值大小,其它维度...]配置方式非常简单,如下:option = { // 加载 bmap 组件 bmap: { //原创 2022-02-14 10:06:59 · 2934 阅读 · 5 评论 -
百度地图 - 自定义ECharts覆盖物
简介在开发地图可视化页面时,产品想在城市的对应位置展示一个统计图。这时候先不要慌,大声的说你是在哪抄的这个需求。好看到页面了,就没有前端人不会(抄的)开发的。研究后发现使用的是,百度地图api自定义了ECharts覆盖物。覆盖物在百度地图中所有的覆盖物都继承Overlay,所以我们通过继承基类实现自定义覆盖物。initialize(),用于初始化覆盖物,当调用map.addOverlay时,API将调用此方法。draw(),当地图状态发生变化时,由系统调用对覆盖物进行绘制。show(),显原创 2022-02-14 10:06:10 · 1421 阅读 · 0 评论 -
百度地图 - MapVGL中使用three.js
简介在使用MapVGL进行数据可视化展示数据时,发现了ThreeLayer图层,深入了解后发现它非常的强大。以前听到产品说要在地图上使用模型,第一反应就是这玩意我好想做不了。了解ThreeLayer后,使用模型也不是不可以,不过的加钱,嘿嘿。下面我们就开始深入了解它。ThreeLayer是MapVGL中的一个图层,继承自 Layer。可以把Threejs开发的模型放入ThreeLayer图层中,通过MapVGL加入百度地图上。要使用ThreeLayer图层,需要额外引入mapvgl.threel原创 2022-02-14 10:05:27 · 3105 阅读 · 0 评论 -
百度地图 - 使用数据可视化MapVGL
简介在地图项目的开发中,往往会伴随大量的数据展示。这时候使用地图api提供的覆盖物函数绘制元素,在页面上会生成大量的DOM元素导致页面变卡。为了解决大量数据展示,百度地图开发了一套处理数据可视化的框架MapVGL。使用webGL的技术在canvas中绘制图形,能有效的提高页面性能。MapVGLMapVGL,是一款基于WebGL的地理信息可视化库,可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。而且支持three.js,就是说原创 2022-02-14 10:04:44 · 7516 阅读 · 10 评论 -
百度地图 - 绘制海量点
简介在开发大屏项目时,要在地图上一次显示上万个点。为了页面的性能,我们不能绘制上万个标注来展示。有两种实现方式:在地图的最上层使用画布覆盖上去,在这个画布上根据地理坐标和像素转换绘制点。所有的控制都要自己判断。通过百度地图覆盖物函数Overlay,实现自定义画布覆盖物,在画布覆盖物绘制点。地图放大、缩小、位移,的回调由地图控制。这里讲解第二种方式实现。覆盖物所有通过map.addOverlay(),添加到地图上的内容都是覆盖物。如标注、矢量图形元素信息窗口等。覆盖物拥有自己的地理原创 2022-02-14 10:04:06 · 3488 阅读 · 2 评论 -
百度地图 - 周边检索
简介今天我们学习一个比较好玩的 地图api LocalSearch。通过它我们可以在地图上对周边地址检索,也可以在规定范围检索地址。LocalSearch属于地图api的服务类,主要用于位置检索、周边检索和范围检索。参数类型可以是地图实例、坐标点或城市名称的字符串。当参数为地图实例时,检索位置由当前地图中心点确定,且搜索结果的标注将自动加载到地图上,并支持调整地图视野层级;当参数为坐标时,检索位置由该点所在位置确定;当参数为城市名称时,检索会在该城市内进行。详细文档关键字检索searc原创 2022-02-14 10:03:24 · 3649 阅读 · 1 评论 -
百度地图 - 绘制驾车路线图
简介在地图的开发中,最常出现的需求就是驾车线路规划。没开发过的人都会认为比较复杂,当把文档看了一遍之后你就会发现百度api比我们想象中还要强大。下面就开始介绍如何通过百度api轻松的实现这个功能。创建地图通过<script>标签引入百度地图地址,这里的ak是你在地图服务中心注册的。不了解的可以点 这里<!DOCTYPE html><html> <head> <meta http-equiv="X-UA-Compatible" c原创 2022-02-14 10:02:39 · 5346 阅读 · 2 评论 -
百度地图 - 绘制扇区
简介为了更加熟练的使用百度地图api,最简单的方式就是实现一个个DEMO。当然DEMO也是一个个慢慢实现的,在这里我们先讲解一个简单的扇区绘制功能。引入地图通过script标签加载地图api,然后通过BMapGL.Map('bmap')实例化地图。一个简单的地图就实现了。 <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script> <div id="b原创 2022-02-14 10:01:06 · 1649 阅读 · 0 评论 -
入门百度地图 JavaScript API
注册先申请百度账号,创建地图应用生成 AK。百度地图平台注意应用类型选择浏览器端。白名单输入*号,所有地址都可以访问。载入地图在页面使用script标签引入<script src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script><script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥">原创 2021-09-02 17:34:49 · 331 阅读 · 0 评论