OpenLayers 3
关注
分享
扫一扫
文章平均质量分 92
大树下躲雨
让未来的自己感谢现在的我
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
OpenLayers 3 内置交互
OpenLayers 3 交互一、OpenLayers 3 内置交互类OpenLayers 3提供了最基本的地图放大，缩小，平移等功能，以满足用户浏览地图的需要。 这些功能都是内置的，实现类都放在包ol.interaction下面，可以通过官网API查询到。交互类描述旋转ol.interaction.DragRotate按住alt+shift键，用鼠标左键拖动地图，就能让地图旋转ol.interaction.PinchRotate两个手指旋转地图，针对触摸屏原创 2022-02-15 13:36:26 · 747 阅读 · 0 评论 -
OpenLayers 3 事件应用
OpenLayers 3 事件应用常用鼠标事件 地图鼠标左键单击事件 对应的类为ol.Map，事件名为singleclick。 地图鼠标左键双击事件 对应的类为ol.Map，事件名为dblclick。 地图鼠标点击事件 对应的类为ol.Map，事件名为click。 地图鼠标移动事件 对应的类为ol.Map，事件名为pointermove。 地图鼠标拖拽事件 对应的类为ol.Map，事件名为pointerdrag。原创 2022-01-25 14:29:03 · 2444 阅读 · 0 评论 -
OpenLayers 3地图添加图标
OpenLayers 3地图添加图标一、overlay方式在地图添加图标1、项目结构2、map.html<!Doctype html><html xmlns='http://www.w3.org/1999/xhtml'><head> <meta http-equiv='Content-Type' content='text/html;charset=utf-8'> <meta http-equiv='X-UA-Compat原创 2021-12-24 13:39:58 · 3552 阅读 · 3 评论 -
OpenLayers 3加载矢量地图源
OpenLayers 3加载矢量地图源一、矢量地图矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。矢量图形最大的优点是无论放大、缩小或旋转等不会失真。在地图中存在着大量的应用，是地图数据中非常重要的组成部分。为了便于存储，传递，使用，矢量地图会按照一定的格式来表达，比如常见的GeoJSON，TopoJSON，GML，KML，ShapeFile等等。 除了最后一个Shap原创 2021-12-22 14:48:11 · 1997 阅读 · 0 评论 -
OpenLayers 3的Layer和Source
Layer和Source一、Map、Layer和Source图层Layer与地图源Source是一对一的关系。当创建了一个图层Layer，相应的需要给图层添加地图源Source，然后将图层Layer添加到地图Map上，就可以得到我们想要的地图了。二、地图源Source地图源Source分类：分类描述ol.source.Tile瓦片数据源，现在网页地图服务中，绝大多数都是使用的瓦片地图ol.source.Image图片地图源，不像瓦片那样很多张图，从而无需切片，也原创 2021-12-21 13:35:32 · 1470 阅读 · 1 评论 -
OpenLayers 3 View 简单应用
View简单应用视图View除了设置地图中心，还可设置地图显示范围和地图缩放级别一、设置地图显示范围1、地图项目结构2、核心代码 // 设置显示地图的视图 view: new ol.View({ //设置成都为地图中心 center: [104.06, 30.67], /** * 根据中心设置地图显示范围 * 注：此时设置的显示层级会失原创 2021-12-13 14:12:29 · 1054 阅读 · 0 评论 -
OpenLayers 3 坐标、坐标系、投影
OpenLayers 3 坐标、坐标系、投影一、坐标代码中我们常见到的数组 [0,0] 就是我们常说的坐标坐标是一个包含两个元素的数组，第一个元素代表地图上的x坐标，第二个元素代表地图上的y坐标。通过x坐标和y坐标我们就可以定位到地图上的任何一个位置二、坐标系学过地理知识都知道，地球并不是一个完全规则的球体。在不同的地区，为了在数学上表示它，就出现了多种不同的参考椭球体，比如克拉索夫斯基(Krasovsky)椭球体，WGS1984椭球体，更多的椭球体参见参考椭球体。在参考椭球体的基础上，就发展出原创 2021-12-10 13:51:46 · 2238 阅读 · 0 评论 -
OpenLayer 3 ：地图的交互
OpenLayer 3 ：地图的交互一、demo介绍通过下方按钮，可对地图进行操作（上下左右移动,移动到指定坐标，地图层级放大缩小）二、地图的交互1、地图项目结构2、map.html<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml><head> <meta http-equiv=Content-Type content="text/html;charset=utf-8">原创 2021-12-09 13:53:59 · 1043 阅读 · 0 评论 -
OpenLayers 3引入和使用（Html版）：创建一个地图
OpenLayers 3引入和使用（Html版）一、OpenLayers 3下载1、OpenLayersg 3官网http://openlayers.org/2、OpenLayers 3下载地址（github）https://github.com/openlayers/openlayers/releases3、下载文件选择如果你不需要研究源码和例子，只用下载第一个 v6.9.0-dist.zip，下载解压后，里面包含ol.css，ol.js，ol.css.map，ol.js.map，这四个文件原创 2021-12-09 13:23:35 · 4188 阅读 · 2 评论