精华内容
下载资源
问答
  • OpenLayers的动态网格实现6。 在当前视图范围内渲染点的规则网格。 旨在用作高级捕捉控件的一部分。 入门 多合一示例 <!doctype html > < html lang =" en " > < head > < link rel =" ...
  • OpenLayers6.rar

    2020-04-03 16:27:36
    这个文件中包含了 Openlayers6.2.1 版本的部分功能示例代码,详细教程请参考文章:https://blog.csdn.net/Supreme_Sir/article/details/105123438
  • Openlayers6环境部署

    2021-09-26 15:51:45
    简单记录一下在openlayer6环境部署时出现的错误,具体的环境部署步骤可参考如下链接:https://www.cnblogs.com/youzi-xuchongyou/p/12205670.html 1.完成node安装后,生成package.json文件时出现的错误如下 该错误...

    简单记录一下在openlayer6环境部署时出现的错误,具体的环境部署步骤可参考如下链接:https://www.cnblogs.com/youzi-xuchongyou/p/12205670.html
    1.完成node安装后,生成package.json文件时出现的错误如下
    在这里插入图片描述

    该错误显示没有管理员权限,因此在打开node.js conmmand prompt时选择以管理员身份运行即可。
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 资源:OpenLayers3示例 ???? 资源:OpenLayers_3_入门教程完整版.pdf # 下载 官网:https://openlayers.org/download/ 这里根据自己所需点击下载即可(-dist.zip只包含必要的css、js文件(约1M),.zip包含...

    # 前言

       资源:OpenLayers3示例

       资源:OpenLayers_3_入门教程完整版.pdf

    # 下载

      官网:https://openlayers.org/download/

      👉 这里根据自己所需点击下载即可

      (1)-dist.zip 仅包括开发库(开发与调试的js库、css样式),文件大小约1M;

      (2).zip 包括开发库、开发库代码、示例、API等所有的开发资源,文件大小约27M;

      在进行具体开发时,引用OpenLayers 开发库即可,其他为辅助资源,在开发的过程中供查看、参考。

       也可以直接使用网络资源

    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css">

      历史版本:https://github.com/openlayers/openlayers/releases

    # 基本概念

       OpenLayers将抽象事物具体化为类,其核心类是Map、Layer、Source、View,几乎所有的动作都围绕这个核心类展开,从而实现地图加载和相关操作。

    ## 1. Map 

        📌 OpenLayers v6.9.0 API - Class: Map

        OpenLayers 的核心部件是 Map(ol.Map)。它被呈现到对象 target 容器(例如,网页上的 div 元素)。所有地图的属性可以在构造时进行配置,或者通过使用 setter 方 法,如 setTarget()

    <div id="map"></div>
    <script>
        var map = new ol.Map({target: 'map'});
    </script>
    

    ## 2. View

        📌 OpenLayers v6.9.0 API - Class: View

        ol.View 负责地图的中心点,放大,投影之类的设置。

        一个 ol.View 实例包含投影 projection,该投影决定中心 center 的坐标系以及分辨率的单位,如果没有指定,默认的投影是球墨卡托(EPSG:3857),以米为地图单位。 放大 zoom 选项是一种方便的方式来指定地图的分辨率,可用的缩放级别由 maxZoom(默认值为 28)、zoomFactor(默认值为 2)、maxResolution(默认由投影在 256×256 像素瓦片的有效程度来计算)决定。起始缩放级别 0,以每像素 maxResolution 的单位为分辨率,后续的缩放级别是通过 zoomFactor 区分之前的缩放级别的分辨率来计算的,直到缩放级别达到 maxZoom

    map.setView(new ol.View({
       center: [0, 0],
       zoom: 2
    }));
    

        😶拓展一:地理空间数据可能来自各种坐标参照系,一个数据集可能是以度为单位的地理(经纬)坐标系,另一个可能是以米为单位的投影坐标系。由于一个地方的地理坐标相对来说更容易知道,使用 ol.proj.transform 方法将地理坐标系("EPSG:4326")转化为墨卡托坐标系("EPSG:3857")。

    view: new ol.View({
        center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),
        zoom:9
    })
    

        😮拓展二:如果想要使用其他投影的数据,在使用 ol.proj.transform 方法之前需要添加一些额外的信息。

        例如,使用"EPSG:21781" 坐标参照系的数据,添加以下两条 script 标签到页面中:

    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js"
    type="text/javascript"></script>
    <script src="http://epsg.io/21781-1753.js"type="text/javascript"></script>

        然后在应用程序代码中,注册该投影并设置其有效范围,代码如下:

    var projection = ol.proj.get('EPSG:21781');
    projection.setExtent([485869.5728, 76443.1884, 837076.5648, 299941.7864]);

    ## 3. Source

        📌 OpenLayers v6.9.0 API - Class: Source

        OpenLayers 使用 ol.source.Source 子类获取远程数据图层,包含免费的和商业的地图瓦片服务,如 OpenStreetMap、Bing、OGC 资源(WMS 与 WMTS)、矢量数据(GeoJSON 格式、 KML 格式…)等。

        当资源(source)与地图视图(view)的坐标系相同时,无需再次设置投影projection(默认与view坐标系一致),只有在资源与视图的投影不同的情况下,才需要在资源中明确指定 projection 属性来表示要素缓存的投影

    var osmSource = new ol.source.OSM();

    ## 4. Layer

        📌 OpenLayers v6.9.0 API - Class: Layer

        一个图层是资源中数据的可视化显示,OpenLayers 包含几种基本图层类型:

    • ol.layer.Tile 用于显示瓦片资源,这些瓦片提供了预渲染,并且由特定分辨率的缩放级别组织的瓦片图片网格组成。    
    • ol.layer.Image 用于显示支持渲染服务的图片,这些图片可用于任意范围和分辨率。
    • ol.layer.Vector 用于显示在客户端渲染的矢量数据。
    • ol.layer.VectorTile 用于显示在客户端渲染的矢量瓦片数据。
    • ol.layer.WebGLTile 用于提供预渲染、平铺的瓦片图像,按特定分辨率的缩放级别组织。
    var osmLayer = new ol.layer.Tile({source: osmSource});
    
    map.addLayer(osmLayer);
    

    ## 5. 总结

        上述片段可以合并成一个自包含视图和图层的地图配置: 

    <div id="map"></div>
    <script>
        new ol.Map({
             layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
             ],
             view: new ol.View({
                 center: [0, 0],
                 zoom: 2
             }),
             target: 'map'
        });
    </script>

    # 示例:地图显示

        这里我们使用了天地图的矢量图层作为底层(需要申请token),由于该图层使用了球面墨卡托[来源],所以在ol.View处设置了坐标系为EPSG:3857,center要采用投影坐标。

    • vec: 矢量底图=Vector
    • cva: 矢量注记图层(中文)=Chinese Vector Annotation
    • xxx_w:球面墨卡托投影
    • xxx_c:经纬度投影(经纬度直投)

        球面墨卡托:WebGIS系列(一):坐标系

        工具:经纬度与墨卡托转换 

        资源:天地图在线资源说明

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>openlayers入门基础一</title>
    
        <style>
            #map{
                height: 780px;
            }
        </style>
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css">
    
    </head>
    
    <body>
        <div id="map"></div>
    
        <script type="text/javascript">
            var tianditu_token = '' // 填入您的token
    
            var map = new ol.Map({
                    target:'map',
                    layers:[
                        new ol.layer.Tile({
                            title: "天地图矢量图层",
                            source: new ol.source.XYZ({
                                url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + tianditu_token,
                                wrapX: false
                            })
                        }),
                        new ol.layer.Tile({
                            title: "天地图矢量注记图层",
                            source: new ol.source.XYZ({
                                url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + tianditu_token,
                                wrapX: false
                            })
                        })
                    ],
                    view: new ol.View({
                        projection: 'EPSG:3857',
                        center: [12128773.43,4240249.00],
                        zoom: 4,
                    })
            });
    
        </script>
    
    </body>
    </html>
    

    # 其它

         默认情况下 ol.control.Attribution 控件被添加到所有地图中,使得地图视窗中显示图层资源的归属信息来源(地图的右下角处)。

        若想将信息一直展现出来,可在 ol.Map 构造函数中添加以下代码。

    controls: ol.control.defaults({
        attributionOptions:{
            collapsible:false
        }
    }),

        添加比例尺

    controls: ol.control.defaults().extend([
        new ol.control.ScaleLine()
    ]),

    展开全文
  • 栗子:dragrotateandzoom (shift + 鼠标拖拽进行缩放和旋转地图)6. 写在最后 1. 什么是地图交互 interaction ??? 地图交互功能都是不可见的,如鼠标双击、滚轮滑动等,手机设备的手指缩放等。 地图的交互功能...

    1. 什么是地图交互 interaction ???

    地图交互功能都是不可见的,如鼠标双击、滚轮滑动等,手机设备的手指缩放等。

    地图的交互功能包含很多,如地图双击放大,鼠标滚轮缩放,矢量要素点选,地图上绘制图形等等。只要是涉及到与地图的交互,就会涉及到 intercation 类,它定义了用户与地图进行交互的基本要素和事件。下面我们就来看看用户与地图都有那些交互,怎么交互。

    2. 简述地图交互 interaction

    在之前的文章中有写到一个地图map,是必须存在的三个属性 target ,view,layers。那么地图是不是还可以存在其他属性呢?当然是有的,现在这篇就为大家讲解另外的一个属性 interaction 地图的交互功能。

    可以看到官网的描述:最初添加到地图的互动。如果未指定, module:ol/interaction~defaults则使用。
    也就是说这个属性不是必须 存在的,默认使用的是 interaction~defaults 内容,并且是已 Array 数组形式存在,也就是说可以像图层一样,已多个交互功能承载在地图上。
    在这里插入图片描述

    3. interaction 介绍

    在 OpenLayers 6 中,表达交互功能的基类是 interaction,它是一个虚基类,不负责实例化,交互功能都继承该基类, OpenLayers 6 中可实例化的子类及其功能如下:

    • doubleclickzoom ,双击放大交互功能;
    • draganddrop ,以“拖文件到地图中”的交互添加图层;
    • dragbox,拉框,用于划定一个矩形范围,常用于放大地图;
    • dragpan ,拖拽平移地图;
    • dragrotateandzoom,拖拽方式进行缩放和旋转地图;
    • dragrotate ,拖拽方式旋转地图;
    • dragzoom ,拖拽方式缩放地图;
    • draw,绘制地理要素功能;
    • keyboardpan ,键盘方式平移地图;
    • keyboardzoom ,键盘方式缩放地图;
    • select,选择要素功能;
    • modify ,更改要素;
    • mousewheelzoom ,鼠标滚轮缩放功能;
    • pinchrotate,手指旋转地图,针对触摸屏;
    • pinchzoom ,手指进行缩放,针对触摸屏;
    • pointer ,鼠标的用户自定义事件基类;
    • snap,鼠标捕捉,当鼠标距离某个要素一定距离之内,自动吸附到要素。
    • interaction defaults ,规定了默认添加的交互功能;

    4. interaction defaults - 默认添加的交互功能

    https://openlayers.org/en/latest/apidoc/module-ol_interaction.html

    该类规定了默认包含在地图中的功能,他们都是继承自 ol.interaction 类。 主要是最为常用的功能,如缩放、平移和旋转地图等,具体功能有如下这些:

    • altShiftDragRotate 是否需要Alt-Shift-拖动旋转 (布尔值:默认为true)
    • doubleClickZoom 是否鼠标或手指双击缩放地图(布尔值:默认为true)。
    • keyboard 是否需要键盘交互(布尔值:默认为true)
    • mouseWheelZoom 是否鼠标滚轮缩放地图。布尔值 (默认为true)
    • shiftDragZoom 是否需要Shift拖动缩放(布尔值:默认为true) 。
    • dragPan 是否鼠标或手指拖拽平移地图(布尔值:默认为true)
    • pinchRotate 是否两个手指旋转地图,针对触摸屏(布尔值:默认为true)
    • pinchZoom 是否两个手指旋转地图,针对触摸屏(布尔值:默认为true)
    • zoomDelta 使用键盘或双击缩放时的缩放级别增量。(数)
    • zoomDuration 缩放动画的持续时间(数:以毫秒为单位)
    • onFocusOnly 仅在地图具有焦点时进行交互。这会影响MouseWheelZoom和的DragPan相互作用,并且在没有浏览器焦点的地图需要页面滚动时很有用(布尔值:默认为false)

    可以看出,很多都兼容移动设备的触摸屏,键盘,鼠标事件,这就是OpenLayers 3以后的改进,跨平台改进。这些功能都是默认添加的,如果要更改默认的选项,需要在相应的选项设置为 false。

    栗子:如果想去掉默认的 DoubleClickZoom 功能,配置如下:

    interactions: ol.interaction.defaults([
        doubleClickZoom: false
    ]),
    

    这样就取消双击放大功能,去除其他的默认功能,是一样的。

    5. 栗子:dragrotateandzoom (shift + 鼠标拖拽进行缩放和旋转地图)

    import {
        defaults as defaultInteractions,
        DragRotateAndZoom
    } from "ol/interaction";
    
    this.map = new Map({
        target: target,
        layers: tileLayer,
        view: view,
        interactions: defaultInteractions().extend([
            new DragRotateAndZoom()
        ])
    });
    

    6. 写在最后

    地图交互功能内容实在是太多了,包括 键盘事件鼠标事件拖拽平移缩放 等一些基本的交互动作,还有后面会写到的 测距测面,通过draw 绘制,选择要素 selectmodify,铺捉吸附的 snap 和鼠标自定义事件 pointer 都构成了openlayers 更加强大的交互功能系统,提升更优的用户体验。
    通过一系列的交互改变(新增,删除,更新)数据实现动态交互。

    展开全文
  • openlayers6加载百度地图偏移问题解决

    千次阅读 2020-04-12 18:10:08
    openlayers6加载百度地图偏移问题解决 标题功能说明 openlayers升级到6版本后,3、4、5版本加载百度地图的代码,加载的地图发生了偏移,原始代码和偏移情况如下 let baiduSource = new TileImage({ projection: ...

    openlayers6加载百度地图偏移问题解决

    标题功能说明

    openlayers升级到6版本后,3、4、5版本加载百度地图的代码,加载的地图发生了偏移,原始代码和偏移情况如下

    let baiduSource = new TileImage({
                        projection: projection,
                        tileGrid: tilegrid,
                        tileUrlFunction: function (tileCoord, pixelRatio, proj) {
                            if (!tileCoord) {
                                return '';
                            }
                            let z = tileCoord[0];
                            let x = tileCoord[1];
                            let y = tileCoord[2]; 
                            return "http://online1.map.bdimg.com/onlinelabel/?qt=tile&x=" +
                                x + "&y=" + y + "&z=" + z +
                                "&styles=pl&scaler=1&udt=20191119";
                        },
                        crossOrigin: 'anonymous'
                    });
    

    偏移情况
    ###解决方案

    修改tileUrlFunction方法
    详情:openlayers6加载百度地图偏移问题解决

    展开全文
  • 我们主要看热力图的效果,区域绘制效怎么设置详细内容可以访问 openlayers6【十七】vue VectorLayer矢量图层画地图省市区,多省市区(粤港澳大湾区)效果详解 在 openlayers 中,图层是使用 layer 对象表示的,主要有 ...
  • 文章目录1. 写在前面2. ol.style 属性及子类3....了解更多矢量图层可以参考:openlayers6【十三】地图矢量图层 Vector 详解 2. ol.style 属性及子类 1.1 可以配置的选项 /* * @typedef {{ * geometry: (undefined|
  • openlayers6 测距测面积

    2020-07-08 18:02:17
    使用方法: import {getMeasureLength} from ‘文件.js’ getMeasureLength(map,LineString) getMeasureLength(map,polygon)``` 默认坐标系是EPSG:4326 /** Currently drawn feature. @type {module:ol/Feature~...
  • // 矢量图层 this.vectorLayer = new VectorLayer({ source: new VectorSource(), style: new Style({ stroke: new Stroke({ width: 2, color: [242,114,60, 1], lineDash:[1,2,3,4,5,6], }), fill: new Fill({ ...
  • OpenLayers6 鼠标移动获取地图上的Feature 代码如下: map.on('pointermove', function (e) { let pixel = map.getEventPixel(e.originalEvent); let hit = map.hasFeatureAtPixel(pixel, { layerFilter: ...
  • openlayers6【十一】vue 使用overlay实现弹窗框popup效果

    千次阅读 热门讨论 2020-06-01 17:02:25
    在之前的文章 openlayers6【九】地图覆盖物overlay三种常用用法 popup弹窗,marker标注,text文本 提及到了overlay三种常用方式就说到了popup弹窗效果。本篇文章我们具体详解一个popup是怎么实现的。 弹窗效果在...
  • angular中使用openlayers本来是没什么难度的,但是如果要加载百度地图还是有些问题的,在openlayers3中坐标是从原点右上递增,而openlayers6中是右下递增,这就导致使用百度地图作为底图时出现图层错乱的问题,同时...
  • openLayers6系列理论基础——Layer篇

    千次阅读 2020-04-26 11:48:43
    openLayers6系列理论基础——Layer篇 一、Layer介绍 Layer是Map的核心组成部分,ol定义了四种基本的图层类型,分别是分别是Tile(瓦片)、Image(图片)、Vector(矢量)、VectorTile(矢量切片),这四种类有一...
  • openlayers6【七】地图控件controls详解

    千次阅读 2020-05-27 10:50:03
    文章目录1. controls 简述2. 常见的 controls 控件3. 控件的使用3.1 fullscreen 全屏控件3.2 mouseposition 鼠标位置控件3.3 overviewmap 地图全局视图(鹰眼图)控件3.4 scaleline 比例尺控件3.5 zoom 缩放控件3.6 ...
  • openlayers 6【四】地图图层Layers详解

    千次阅读 多人点赞 2020-04-30 16:42:36
    文章目录1. 什么是图层???1.1 线状图层1.2 点状图层1.3 面状图层2. 图层存在一个或者多个3. Layers 的常见属性4. Layers 各种图层及图层类型4.1 `Graticule` 地图上覆盖的网格标尺图层4.2 `... Layers 事件触发6. 写
  • Openlayers6 要素的绘制、编辑、GeoJson格式输出1. 问题描述2.代码实现 1. 问题描述 在使用openlayers开发时,遇到过交互绘制、编辑要素,有时还需要存储要素,今天就写一个demo简单粗暴地记录一下这三个功能实现。...
  • OpenLayers概述 Map、Layer、Source和View是OpenLayers框架体系中的核心类,几乎所有的动作都围绕这几个核心类展开,以实现地图的加载与其相关操作。 在OpenLayers的体系框架中:把整个地图看作一个容器(Map),...
  • 可以使用overlay去实现,overlay原理就是创建一个div,通过css样式去控制闪烁(如:如何用css3做openLayers3的闪烁效果),想要遍历实现的话,就创建多个overlay的div。这种也是网上百度出来最多的一种。 1.2 实现...
  • 写在前面 在 openlayers 6【二】vue 初始化map地图详解 中,我们讲了初始化一个地图,必不可少的三要素。target,view,layers。在前面的两片文章中也讲了 view 和 layers 是什么。source 是 Layer 的重要组成部分...
  • var projection = new ol.proj.get("EPSG:3857"); var resolutions = []; for (var i =0;i< 19; i++){ resolutions[i] = Math.pow(2,18-i); ... var tilegrid = new ol.tilegrid.TileGrid({ ...
  • 今天是使用OpenLayers6加载天地图和高德地图,主要就是创建一个ol.Map类的对象,再与显示区域的DOM的对象进行绑定就可以了,关于ol.layer.Tile的文档可见https://openlayers.org/en/latest/apidoc/module-
  • openlayers 6【一】 简介openlayers背景,优势,如何使用及实际使用场景
  • openLayers系列理论基础——Map篇 最近开源GIS这块尝试的比较多,leaflet、ol等都接触了一下,主要是因为项目中有需求,想了解下这些开源的GIS到底哪些好用。学习一个新的API,首先就是撸官网,查找各种API的具体...
  • OpenLayers_6.1.0.zip

    2020-08-17 21:11:12
    OpenLayers 是一个专为WebGIS 客户端开发的JavaScript 类库包,用于实现对相关地图的操作展示,目前最新版本为Openlayers6,本文的版本为Openlayers6.11版本;
  • openlayers 6【三】 地图视图 View 详解

    千次阅读 2020-04-03 11:56:06
    官方文档:https://openlayers.org/en/latest/apidoc/module-ol_View-View.html 上篇文章讲到 ,初始化map地图,必备的三要素之一就是视图(view),这个对象主要是控制地图与人的交互,如进行缩放,调节分辨率、...
  • 首先,我用的是vue项目,引入的静态资源,因为我觉得安装依赖后按需引入特别麻烦 ... <div id="map"> <div class="tool">...div @click="addLayer('dt')" :class="{active: toolName == 'dt'}">...
  • 由于openlayers6加载地图的方式是右下递增,原先是右上递增,所以在原先加载百度地图的基础之上,将tileUrlFunction中的y坐标变为原先的负值即可。 3、解决方法 var resolutions = []; for (var i = 0; i < 19; i...
  • <!... <... <head> ...meta charset="utf-8">...link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css"> <style>.
  • 在地图上挖一个洞对地图进行显示 下载svg文件,在线转换为Converter 在线转换地址:http://demo.qunee.com/svg2canvas/ map.vue 官网例子:https://openlayers.org/en/latest/examples/layer-clipping.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,051
精华内容 4,820
关键字:

openlayers6