精华内容
下载资源
问答
  • OpenLayer

    千次阅读 2013-02-25 18:35:07
    OpenLayer是一个用于浏览器地图展示的js库,用于构建基于网络的地理应用,OpenLayer使用Prototype.js和Rico作为核心库的基础,实现了工业标准的地理数据访问方法(OGC标准)。在企业级GIS应用中,能较好的作为客户端...

    OpenLayer是一个用于浏览器地图展示的js库,用于构建基于网络的地理应用,OpenLayer使用Prototype.js和Rico作为核心库的基础,实现了工业标准的地理数据访问方法(OGC标准)。在企业级GIS应用中,能较好的作为客户端应用开发框架,消除和GIS服务层之间的耦合。

       ArcGIS Server 9.3对OGC标准提供了更好的支持,OGC标准成为了OpenLayer和ArcGIS Server服务连接的桥梁,基于Ags服务进行OpenLayer开发,是除了adf、js/flex/silverlight api官方开发框架之外的新选择。

        网上已经有很多OpenLayer开发的资源:
       http://www.3snews.net/?uid-10624-action-spacelist-type-blog-itemtypeid-793
        or Google Search "OpenLayer"

        该系列文章会重复部分OpenLayer功能实现,但更重要的是和大家一起研究OpenLayer设计模式,及如何有效利用Ags服务进行OpenLayer开发。

        准备工作:

        1.下载OpenLayer 2.7
        网址:http://openlayers.org/

        2.成功安装ArcGIS Server 9.3
        安装方法:http://bbs.esrichina-bj.cn/ESRI/viewthread.php?tid=3891&extra=page%3D1

        3.准备一套完整的Sample数据,可以从ArcGIS Tutor中copy一份,也可以使用自己已有的或从网站上下载数据。

        暂时无法做好2、3准备工作没有关系,先从OpenLayer(简称OL)开始。

        主体内容:

        1.分析OL代码框架和构成请参考其他文章,从Sample示例中最简单的地图展现开始

    复制内容到剪贴板
    代码:

    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>OpenLayers Basic Single WMS Example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="../lib/OpenLayers.js"></script>
        <script type="text/javascript">
            var map, layer;
            function init(){
                map = new OpenLayers.Map( 'map' );
                layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                        "http://labs.metacarta.com/wms/vmap0",
                        {layers: 'basic'} );
                map.addLayer(layer);
                map.zoomToMaxExtent();
            }
        </script>
      </head>
      <body οnlοad="init()">
        <h1 id="title">Basic Single WMS Example</h1>
        <div id="tags"></div>
        <div id="shortdesc">Show a Simple Map</div>
        <div id="map" class="smallmap"></div>
        <div id="docs">
            This example shows a very simple layout with minimal controls.  This example uses a single WMS base layer.
        </div>
      </body>
    </html>

    几个关键点:
        (1)引入OpenLayer.js
        (2)body onload中初始化地图

        OpenLayer.Layer要和中文翻译的“图层”概念区分开,这里的一个Layer是一个完整的服务,例如Ags服务器发布出来的一个WMS服务,这个服务可能有一个或多个图层组成。

        2.理解OpenLayer.Layer

    复制内容到剪贴板
    代码:

    function init(){
        map = new OpenLayers.Map('map');

        var ol_wms = new OpenLayers.Layer.WMS(
            "OpenLayers WMS",
            "http://labs.metacarta.com/wms/vmap0",
            {layers: 'basic'}
        );

        var jpl_wms = new OpenLayers.Layer.WMS(
            "NASA Global Mosaic",
            "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
            {layers: "landsat7"}
        );

        var dm_wms = new OpenLayers.Layer.WMS(
            "DM Solutions Demo",
            "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
            {
                layers: "bathymetry,land_fn,park,drain_fn,drainage," +
                    "prov_bound,fedlimit,rail,road,popplace",
                transparent: "true", format: "image/png"},
            {
                minResolution: 0.17578125,
                maxResolution: 0.703125
            }
        );

        map.addLayers([ol_wms, jpl_wms, dm_wms]);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.zoomToMaxExtent();
    }

    这里添加了三个wms服务,每个服务都是作为OL Map的一个Layer,运行之后可以看到Base Layer和Overlayers,并不包含三个服务中的具体图层。


       服务前面有的是单选框,有的是复选框,显示复选框是因为设置了transparent为true,透明图层一般放置在地图上方,不会用做底图,因此OL使用复选框方便用户选择或取消该服务地图的显示,设置为false之后,全部为底图只能单选。


        3.一次性添加多个服务
    除了map.addLayers逐个添加服务外,还可以将多个服务作为一个Array一次性加入map中:

    复制内容到剪贴板
    代码:
    function init(){
    map = new OpenLayers.Map( 'map' );

    var urlArray = ["http://t1.labs.metacarta.com/wms-c/Basic.py",
    "http://t2.labs.metacarta.com/wms-c/Basic.py"];
    layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", urlArray, {layers: 'basic'} );
    map.addLayer(layer);
    }


    4.OL文档

        OL在线和下载包中都有一份参考文档,devdocs更全一些,但还是没有囊括所有参数说明,可以从前面使用到的OpenLayer.Layer.WMS对象得到证实,构造方法中的参数:
    name {String} A name for the layer
    url {String} Base url for the WMS (e.g.  http://wms.jpl.nasa.gov/wms.cgi)
    params {Object} An object with key/value pairs representing the GetMap query string parameters and parameter values.
    options {Ojbect} Hashtable of extra options to tag onto the layer

        到此就没有更详细的说明了,只能根据Sample示例和源码去积累,如第三组参数除layers外还有:

    复制内容到剪贴板
    代码:
    {
    layers: "bathymetry,land_fn,park,drain_fn,drainage,prov_bound,fedlimit,rail,road,popplace",
    transparent: "true",
    format: "image/png"
    }


    还可以设置第四组参数{'displayInLayerSwitcher': false},layer服务将不显示在服务列表(上图中的蓝色面板)中,默认值为true。{'isBaseLayer': false},默认值为true,服务前显示单选框。这些都需要我们逐步去摸索。

        5.OpenLayers.Layer.WMS

        刚才提到过两个参数displayInLayerSwitcher、isBaseLayer,它们并没有在OpenLayers.Layer.WMS定义,而是在父类OpenLayers.Layer,中间还有OpenLayers.Layer.HTTPRequest、 OpenLayers.Layer.Grid,文档中没有详细说明,但可以从源码中获得更多信息。从这种继承关系中可以发现,OpenLayers继承全部通过prototype原型继承方式实现。

        小结:

        Map对象是地图展示的核心,一切和地图操作相关都要和Map打交道,里面的属性方法很多,可以去学习controls入手,之前我们都没有定义 controls,但还是可以通过鼠标操作地图,那是因为默认情况下,地图自动拥有Navigation、PanZoom、ArgParser、 Attribution四个controls。





    (转自 http://www.cnblogs.com/flyingis/archive/2008/11/07/1328987.html)作者:Flyingis

    展开全文
  • 因为geoserver内部嵌的前端是openlayer,所以先讲openlayer的使用。 但openlayer相对来说,还是要难一些,小众一些,所以不想用openlayer的,可以看后面的leaflet专题,脚本库不一样,实现效果一样。 本文主要看...

    本章开始地图的前端渲染。

    因为geoserver内部嵌的前端是openlayer,所以先讲openlayer的使用。

    但openlayer相对来说,还是要难一些,小众一些,所以不想用openlayer的,可以看后面的leaflet专题,脚本库不一样,实现效果一样。

    本文主要看openlayer怎么加载地图。

     

    一、js库代码下载

    前端脚本库可以用网络资源,也可以下载下来,但openlayer官网不是很稳定,所以可以把examples、docs、sources都下载下来。

    下载链接:https://openlayers.org/download/

    openlayer的examples都是拿NodeJS构建的,想要本地看效果,还要部署环境,打包,有点麻烦。

    为了简便,好理解,好学习,我们后续的前端页面,都只有一个HTML文件,引入的js库,只有ol.js和jquery.js,css文件只有ol.css。

     

    Jquery下载:https://code.jquery.com/jquery/,版本很多,选一个常用的,点击uncompressed,复制src里的连接,https://code.jquery.com/jquery-1.7.2.js,把内容保存到本地。

     

     

     

    二、加载瓦片地图

    文件结构如下图,在html文件夹内,有ol文件夹,openlayer的js和css都放在这个文件夹下面,jquery放在html下,还有一个页面LoadTileMap.HTML。

     

    在LoadTileMap.HTML中,我们加载了腾讯底图和geoserver发布的gismap:v6_time_cnty_pts_utf_wgs84图层。

    源码如下:

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>瓦片地图展示</title>
        <link rel="stylesheet" href="ol/ol.css">
        <script src="ol/ol.js"></script>
        <script src="jquery-1.7.2.js"></script>
        <style type="text/css">
            #map,
            html,
            body {
                height: 100%;
                width: 100%;
            }
            .content {
                width: 100px;
            }
    
        </style>
    </head>
    
    <body>
    <div id="map"></div>
    </body>
    <script type="text/javascript">
        //页面
        var view = new ol.View({
            // 设置中心点坐标,因为加载的腾讯瓦片地图的坐标系是墨卡托投影坐标系('EPSG:3857'),所以要对经纬度坐标点进行投影,ol.proj.transform既是openlayer自带的坐标系转换函数,支持WGS84和墨卡托投影的互换。
            center: ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'),
            // 比例尺级数为9
            zoom: 9
        });
    
        var layers = [
            // 加载腾讯瓦片底图
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: "http://rt{0-3}.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0"
                })
            }),
            // 加载geoserver发布的WTMS底图,其实数据源是4326坐标系的,但是geoserver会适配前端的坐标系。
            new ol.layer.Image({
                source: new ol.source.ImageWMS({
                    ratio: 1,
                    url: 'http://localhost:8080/geoserver/gismap/wms?',//这个可以打开geoserver的preview,看openlayer页面截取url
                    // 请求参数
                    params: {
                        'SERVICE': 'WMS',
                        'VERSION': '1.1.0',
                        'REQUEST': 'GetMap',
                        'FORMAT': 'image/png',
                        'TRANSPARENT': true,
                        'tiled': true,
                        'LAYERS': 'gismap:v6_time_cnty_pts_utf_wgs84',//图层,前面是工作空间,后面是图层名,
                        'exceptions': 'application/vnd.ogc.se_inimage',
                        'singleTile': true//单瓦片,渲染成一张图片
                    }
                }),
            }),        
        ];
        //地图
        var map = new ol.Map({
    
            target: 'map',//指向div
            layers: layers,
            view: view
        });
    
    </script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
    
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
    </html>
    

    效果如下:

     

     

     

    三、单瓦片格式

    在geoserver中发布一个带注记的面图层,将HTML中的加载瓦片地图的参数修改一下。

    修改:

    'LAYERS': 'gismap:v6_time_pref_pgn_utf_wgs84'

    删掉:

    'singleTile': true

    效果如下:

     

    可以看出地图内容返回的是一整张图片,而不是一个个小的方块。

    在openlayer早期版本中,还需要设置'singleTile': true才能返回一整张图片,否则返回的是一个个小瓦片,就像腾讯底图的瓦片一样。因为整张图是由小瓦片拼接起来的,所以会有注记冗余的情况。

    Openlayer修复了这个问题,注记冗余的问题,我们以后可以在leaflet中看。

     

    加载地图和wms图层结束,接下来,我们看怎么渲染并查询矢量要素。

     

      

     

     

     

    展开全文
  • openlayer 加载postgis矢量切片使用openlayer叠加postgis缓存切片**ps: 由于postgis 切片生成的是mvt格式图片,所以只能使用web墨卡托坐标系**下边上代码: 使用openlayer叠加postgis缓存切片 openlayer 加载大量数据...

    使用openlayer叠加postgis缓存切片

    openlayer 加载大量数据一直没有特别好的解决方案,之前试过geoserver缓存矢量切片,不知是方法不对路还是怎么什么原因,加载几万条数据,前端渲染速度明显不流畅; 后来领导提出可以使用postgis 矢量切片,经过几番尝试踩坑之后,总算叠加在地图上,现在记录一下.

    ps: 由于postgis 切片生成的是mvt格式图片,所以只能使用web墨卡托坐标系

    后台配置,这位大佬已经写得很清楚了,而且写了mapbox调用示例
    https://blog.csdn.net/zhaoquanfeng/article/details/81874270

    下边上代码:

       getMVTVectorTileLayer(tableName) {
    
            let mvtVectorTileSource = new VectorTileSource({
                format: new MVT(),
                url:  url  //请求后台地址,
                crossOrigin: 'Anonymous',
            });
    
            let style = new Style({
                //填充色
                fill: new Fill({
                    color:  '#000000',
                }),
                //边线颜色
                stroke: new Stroke({
                    color:  '#0000ff',
                    width: 3
                }) 
            });
    
            let  MVTVectorTileLayer = new VectorTileLayer({
                declutter: true,
                visible: true,
                source: mvtVectorTileSource,
                style: style,
            })
    
            return MVTVectorTileLayer;
        }
    
    展开全文
  • openlayer坐标系分析

    千次阅读 2019-10-18 11:39:36
    openlayer坐标系有几点注意: 1、openlayer默认是3857投影坐标系,坐标是一长串的那种 2、因此定位经纬度的时候,需要将经纬度转为投影坐标,一长串的那种 3、离线地图若是高德地图,那么加载的点需要是高德坐标系...

    openlayer坐标系有几点注意:
    1、openlayer默认是3857投影坐标系,坐标是一长串的那种
    2、因此定位经纬度的时候,需要将经纬度转为投影坐标,一长串的那种
    3、离线地图若是高德地图,那么加载的点需要是高德坐标系对应的点。
    4、地图如果是openstreetmap,那么加载的点需要是WGS84坐标系

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • openlayer3 简介

    千次阅读 2018-01-10 15:42:42
    openlayer3 结构理解
  • OpenLayer加载常见在线地图案例

    千次阅读 2018-01-26 10:44:22
    最近在学习OpenLayer,测试了几种国内在线地图服务并作出分享与大家讨论 参考资料: OpenLayers 3 之 加载天地图 高德,百度,Google地图定位偏移以及坐标系转换 OpenLayer基础教程 OpenLayer基础教程 ...
  • Openlayer离线发布

    2017-11-20 16:00:02
     本实例中使用的Openlayer 版本为最新的 Openlayer3,地图下载器使用的是Bigemap 地图下载器。  Openlayer 下载地址:https://github.com/openlayers/ol3/releases/download/v3.20.1/v3.20.1-dist.zip 二....
  • OpenLayer基础概念翻译

    2018-09-21 17:36:13
    最近正在学习gis,openlayer学习记点笔记。 0penLayer基本概念翻译笔记MAP openlayer组件核心是map,它被渲染到一个目标容器 target (e.g. web页面上一个包含map的div元素)。 所有的map参数可以在构建地图时配置,...
  • 本实例中使用的Openlayer 版本为最新的 Openlayer3,地图下载器使用的是Bigemap 地图下载器。 Openlayer 下载地址:https://github.com/openlayers/ol3/releases/download/v3.20.1/v3.20.1-dist.zip 二. 下载地图...
  • openlayer4加载ArcGIS离线瓦片地图

    千次阅读 2018-01-12 12:01:21
    Openlayer4加载ArcGIS离线瓦片地图 本来以前是用openlayer2,在太乐地图下载的地图,会有模版.之前直接在此基础上更改的代码,但是随着项目的发展功能的增多,openlayer2越来越不适应现在的项目,所以决定换成open...
  • extjs使用OpenLayer3

    2016-04-04 09:09:39
    本文是对之前学习openlayer3的一个学习,包括:  OpenLayer是什么? OpenLayer的使用结构 Openlayer使用GPX  Openlayer是什么?  OpenLayers是一個完全OpenSource的API,為建立地图及地理空间咨询的程式语言...
  • webGIS openlayer使用方法

    2018-06-25 15:03:52
    在我们这开发组中用的最多的就是地图,使用的第三方地图也是非常多的,常用的地图控制就是openlayer,一个openlayer最核心就是ol.Map,之后在ol.Map构造方法中进行view,layer,target,control等操作,在初学open...
  • openLayer的学习小结

    千次阅读 2017-08-01 17:55:23
    WebGIS引擎–openLayer的学习小结之前一直以为是一个简单的图层插件,后来在项目中用到了,才发现openLayer是如此的强大。ol.Map作为最重要的一个地图类,在创建地图时必须使用,主要格式如下:var map=new ol.Map({......
  • openlayer 在线例子

    千次阅读 2016-05-04 14:50:52
    openlayer 在线例子 http://dev.openlayers.org/examples/
  • 如何使用Openlayer发布地图 一. 说明:  本实例中使用的Openlayer 版本为最新的 Openlayer3,地图下载器使用的是Bigemap 地图下载器。  Openlayer 下载地址:...
  • 1、导入openlayercss包、js包 2、在APP首页index.html中... index.html引入openlayer包 <...--引入openlayer css-->...link rel="stylesheet" href="lib/openlayer/css/ol.css"> <!--引...
  • openlayer展示热力图

    2020-08-02 22:34:09
    一,安装openlayer cnpm i -S ol 二, <!-- home --> <template> <div class="home"> <div class="width:500px;height:300px"> <span>blur</span> <el-slider v-...
  • openlayer 3 长按事件

    千次阅读 2016-04-10 10:34:47
    openlayer 3没有长按事件,通过常用事件模拟长按事件。 /*** *地图 长按事件 */ var longpress = false; //click 事件 map.on("click", (longpress) ? alert("Long Press") : alert("Short Press"); console....
  • openlayer结合地图描绘经纬点 openlayer入门案列
  • openlayer中添加Geojson矢量数据

    千次阅读 2019-09-10 15:40:40
    openlayer中添加Geojson矢量数据 1.创建矢量图层源,用于加载矢量feature 2.使用ol提供的GeoJSON 类初始化对象,读取你的geojson对象中的feature列表 3.将遍历出来的feature列表遍历设置样式,并添加到矢量图层...
  • OpenLayer3自定义测量控件 MeasureTool

    千次阅读 2016-12-20 16:53:41
    OpenLayer3自定义测量控件 MeasureTool 一直苦恼于OpenLayer3没有现成的测量工具,看了歪果仁做的图层控件,于是自己结合了官网上的measure实例和歪果仁的模板鼓捣出了一个测量工具控件。 下载地址:...
  • 很长一段时间,在我的认知里,对地图的理解都只是在百度和高德,直到我换了工作岗位后,才知道原来有个很有名的开源地图库叫作Openlayer(与它同级别的还有LeafLet),因为项目需要,所以开始学习这个库,这篇文章带...
  • 第一次接触openlayer3绘制地图,遇到很多问题。虽然有api.但是小白表示看的不在状态。整理记录一下openlayer3绘制地图过程的小问题及解决方法,希望能帮助更多的朋友马上解决问题。 首先,分享大家一位大神的学习...
  • 基于OpenLayer 6的标绘sdk(开源)

    千次阅读 热门讨论 2019-07-27 13:59:36
    原作者是基于Openlayer3 开发的sdk。我已用es6+rollup重新打包编译了项目。封装了部分业务层。只暴露了一个主类。 原作者博客在这里。多谢原作者代码给与的参考。 二、演示 演示截图 在线体验: ...
  • OpenLayer Web端GIS引擎介绍
  • OpenLayer Web端GIS引擎 部署
  • 关于ztree + openlayer控制图层,相关文章百度上有,如一位好友lzugis的博客,自查 check回掉函数是控制图层是否显示的函数,但是无法接收直接关联图层的参数,若直接传入图层作为参数则更为方便,so, 构造节点...
  • openlayer官网上有kml加载显示的方法: openlayer官网加载kml示例 只是其中url是相对前端服务器根目录路径: 然而开发过程中出现需要加载本地文件的需求,本来是想通过上传ftp曲线救国,但是考虑到现在很多浏览器...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 86,938
精华内容 34,775
关键字:

openlayer