精华内容
下载资源
问答
  • openlayers加载wms图层
    2021-03-24 23:58:11

    矢量服务

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.css" type="text/css">
        <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.js" type="text/javascript"></script>
        <title>openLayers使用WMS方式加载shp服务</title>
        <style>
            html, body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
    
            #map {
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
    <div id="map">
    </div>
    
    <script type="text/javascript">
    
        var format = 'image/png';
    
        var untiled = new ol.layer.Image({
            source: new ol.source.ImageWMS({
                ratio: 1,
                url: 'http://192.168.1.253:8181/geoserver/zykj/wms',
                params: {
                    'FORMAT': format,
                    'VERSION': '1.1.1',
                    "LAYERS": 'zykj:china',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                }
            })
        });
        var tiled = new ol.layer.Tile({
            visible: false,
            source: new ol.source.TileWMS({
                url: 'http://192.168.1.253:8181/geoserver/zykj/wms',
                params: {
                    'FORMAT': format,
                    'VERSION': '1.1.1',
                    tiled: true,
                    "LAYERS": 'zykj:china',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                    tilesOrigin: 109.62469100000001 + "," + 20.061807999999967
                }
            })
        });
        var projection = new ol.proj.Projection({
            code: 'EPSG:4326',
            units: 'degrees',
            axisOrientation: 'neu',
            global: true
        });
        var map = new ol.Map({
            target: 'map',
            layers: [
                untiled,
                tiled
            ],
            view: new ol.View({
                projection: projection,
                center: [109.62469, 30.06180],
                zoom: 5
            })
        });
    
    </script>
    </body>
    </html>
    

    栅格服务

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.js"></script>
        <title>openLayers使用WMS方式加载栅格服务</title>
        <style>
            html,body{
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            #map{
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
    <div id="map">
    </div>
        <script type="text/javascript">
            var format = 'image/png';
            var untiled = new ol.layer.Image({
                source: new ol.source.ImageWMS({
                    ratio: 1,
                    url: 'http://192.168.1.253:8181/geoserver/zykj/wms',
                    params: {'FORMAT': format,
                        'VERSION': '1.1.1',
                        "LAYERS": 'zykj:sizhen2',
                        "exceptions": 'application/vnd.ogc.se_inimage',
                    }
                })
            });
            var tiled = new ol.layer.Tile({
                visible: false,
                source: new ol.source.TileWMS({
                    url: 'http://192.168.1.253:8181/geoserver/zykj/wms',
                    params: {'FORMAT': format,
                        'VERSION': '1.1.1',
                        tiled: true,
                        "LAYERS": 'zykj:sizhen2',
                        "exceptions": 'application/vnd.ogc.se_inimage',
                        tilesOrigin: 40424987.811917014 + "," + 3501805.439903641
                    }
                })
            });
            var projection = new ol.proj.Projection({
                code: 'EPSG:4528',
                units: 'm',
                axisOrientation: 'neu',
                global: false
            });
            var map = new ol.Map({
                target: 'map',
                layers: [
                    untiled,
                    tiled
                ],
                view: new ol.View({
                    projection: projection,
                    center:[40424917.48536, 3525223.30211],
                    zoom:10
                })
            });
    
        </script>
    </body>
    </html>
    
    更多相关内容
  • // WMS图层 this.WMSLayer = new TileLayer({ source: new TileWMS({ url: layerUrl, params: { 'TILED': true, 'LAYERS': `${spaceName}:${layerName}` }, serverType: 'geoserver', }), }); this.map.addLayer...
    <template>
      <div id="container">
        <div class="mapWrap" id="map" :style="height"> </div>
      </div>
    </template>
    
    <script>
    import "ol/ol.css";
    import { Map, View} from "ol";
    import {Vector as VectorSource} from 'ol/source';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import XYZ from "ol/source/XYZ";
    import TileWMS  from 'ol/source/TileWMS';
    import { fromLonLat, transform } from "ol/proj";
    export default {
      data() {
        return {
          map: null,
          roadmap: null,
          vectorLayer: null, //创建图层
          vectorSource: null, //图层数据容器
          markers: "", //初始化标记点
        }
      },
      methods: {
        initMap() {
          let _self = this;
          //线路图
          this.roadmap = new TileLayer({
            visible: true,
            name: '电子图',
            source: new XYZ({
              url: baseUrl+"/tiles/ZhengZhouShi/roadmap/{z}/{x}/{y}.png",
              crossOrigin: "anonymous",
            }),
          });
          
          this.map = new Map({
            target: "map",
            layers: [this.roadmap],
            view: new View({
              center: fromLonLat(this.markers),
              zoom: 14,
              minZoom: 12,
              maxZoom: 17,
            }),
          });
    
          // 创建图层
          this.vectorLayer = new VectorLayer();
          // 创建数据容器
          this.vectorSource = new VectorSource();
          // 把数据容器添加到图层
          this.vectorLayer.setSource(this.vectorSource);
          // 添加到地图上
          this.map.addLayer(this.vectorLayer); 
     	  this.WMSLayerFun();
        },
        //WMS图层
          WMSLayerFun() {
            let url = 'https://dev.xxxxxx.com/geoserver/工作空间名/wms?tiled=true@图层名';
            let spaceName = url.match(/geoserver(\S*)wms/)[1].slice(1, -1); //工作空间名
            let layerName = url.match(/@(\S*)/)[1]; //图层名
            let layerUrl = url.match(/(\S*)wms/)[0];
            // WMS图层
            this.WMSLayer = new TileLayer({
              source: new TileWMS({
                url: layerUrl,
                params: {
                  'TILED': true,
                  'LAYERS': `${spaceName}:${layerName}`
                },
                serverType: 'geoserver',
              }),
            });
            this.map.addLayer(this.WMSLayer);
          },
      },
    };
    </script>
    
    <style scoped lang="scss">
    
    </style>
    
    

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

    展开全文
  • 上面的就是 geoserve 发不出来的 WMS 图层连接。具体我不知道为啥这样写哈,但是我这样设置是可以加载出来的啊! 然后就可以了。

    vue 项目 openlayer 加载 WMS 图层

    这个是啥子情况呢,是我用 openlayer 加载 geoserve 发布的图层,然后发布出来的图层是 wms 的,所以说这篇博文主要是用来操作 vue 项目使用 openlayers 加载 geoserve 发布的 wms 图层。

    geoserve 发布的图层地址

    在这里插入图片描述
    上面的就是 geoserve 发不出来的 WMS 图层连接。

    openlayer 加载 WMS 图层

    具体我不知道为啥这样写哈,但是我这样设置是可以加载出来的啊!

    const projection = olProj.get('EPSG:900913');
            const projectionExtent = projection.getExtent();
            const size = olExtent.getWidth(projectionExtent) / 256;
            const resolutions = new Array(19);
            const matrixIds = new Array(19);
            for (let z = 0; z < 19; ++z) {
              resolutions[z] = size / Math.pow(2, z);
              matrixIds[z] = "EPSG:900913:" + z;
            }
            const layerName = 'map:china_all'  // 提换成自己的
            let wmtsSource = new WMTS({
              url: 'http://127.0.0.1:8080/geoserver/gwc/service/wmts',  // 替换成自己服务器的
              layer: layerName,
              matrixSet: 'EPSG:900913',
              format: 'image/png',
              projection: projection,
              tileGrid: new WMTSTileGrid({
                origin: olExtent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds,
              }),
              style: '',
              wrapX: true,
            });
            let wmtsService = new TileLayer({
              source: wmtsSource,
              zIndex: 0,
            });
            this.mapLayers = [wmtsService]
            map.addLayer(wmtsService)
    

    然后就可以了。

    在这里插入图片描述

    展开全文
  • openlayers加载WMS服务图层

    千次阅读 2019-04-19 10:42:40
    这里是加载的 ol.layer.Tile的方法,也可以ol.layer.Image同理source也应该为new ol.source.ImageWMS 总之看请求的服务图层的类型,但是我们这个图层用两种方法都可以加出来。 效果是这样 但是见鬼的是我刚开始就是...
     var tian_di_tu_road_layer = new ol.layer.Tile({
            title: "天地图路网",
            source: new ol.source.XYZ({
                url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=42dca576db031641be0524ee977ddd04"
            })
        });
        //加载天地图--注记图层
        var tian_di_tu_annotation = new ol.layer.Tile({
            title: "天地图文字标注",
            source: new ol.source.XYZ({
                url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=42dca576db031641be0524ee977ddd04'
            })
        });
    
    
        var wmsSource = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: 'http://192.168.9.123:8080/geoserver/testNew1/wms',
                params: { 'LAYERS': 'testNew1:function_layer', 'singleTile': true }
    
            })
        })
        var map = new ol.Map({
            target: 'map',
            layers: [
                tian_di_tu_road_layer,
                tian_di_tu_annotation,
                wmsSource
    
            ],
            // 设置显示地图的视图
            view: new ol.View({
                center: [108.939147, 34.253041],
                projection: 'EPSG:4326',
                zoom: 10,
                maxZoom: 18,
                minZoom: 5
            })
        });

    这里是加载的 ol.layer.Tile的方法,也可以ol.layer.Image同理source也应该为new ol.source.ImageWMS

    总之看请求的服务图层的类型,但是我们这个图层用两种方法都可以加出来。

    效果是这样

    但是见鬼的是我刚开始就是了Tile的方法竟然加载不出来,也许是因为url放错了,URl应该是?前的链接就行,刚开始放的是那个服务图层的整个url,里头会包括他的一些参数详情,不用这样,放问号前的就行。

     

     

     

     

    展开全文
  • Openlayers2图层加载(一)WMS图层

    千次阅读 2018-11-16 19:29:22
    Openlayers+Geoserver来实现前端地图开发,是常见的一种地图开发操作方式。以下简单介绍 js代码 function loadWMSLayer(){ ... baseLayer = new OpenLayers.Layer.WMS( &amp;amp;quot;basic&amp;amp;quot;,
  • 要达到的效果显示geoserver中发布的wms图层,数据使用geoserver自带的示例数据。安装后geoserver后就有的数据 官网示例链接:https://openlayers.org/en/latest/examples/wms-custom-tilegrid-512x256.html 1、...
  • Openlayers4加载WMS地图

    千次阅读 2018-12-13 21:25:02
    ol4加载地图最基本的方法 准备工作 1、shp文件 2、geoserver发布图层 var map,wmsLayer; function initMap(){ wmsLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: &amp;amp;amp;amp;quot;...
  • 跨域配置与WMS服务加载下载与安装访问GeoSever主页发布WMS网络地图...WMS地图服务预览Openlayers加载WMS服务GeoServer图层预览页面详解WMS服务接口GetMap接口GetFeatureInfo接口DescribeLayer接口GetLegendGraphic接口
  • 问题 最近在项目中遇到一个问题,加载的WMS服务需要通过单击的方式获取某个要素的信息,通过要素信息向后台发起删除某个要素的请求,删除后,地图上的该要素... 相关资源 (1): openlayersWMS图层实时更新与刷新问题
  • 我在学习过程中,是租了一台服务器在上面搭建配置相关的服务,然后通过QGIS向PostgreSQL数据库添加数据,然后有向GeoServer中添加图层,之后用OpenLayers加载GeoServer根据WMS规范发布的图层。 大家可以自己在本地...
  • openlayers实现geoserver发布的WMS服务点击查询属性信息比较简单,但对单个要素高亮没有直接有效的方法,因此采用重绘的方法,新建一个矢量图层,然后通过点击事件从geoserver获取要素的全部信息,其中包括要素的...
  • width: 100%; } </style> <script src="./lib/ol.js"></script> <title>... //加载天地图--注记图层 var tian_di_tu_annotation = new ol.layer.Tile({ title: "天地图文字标注", source: new ol.source.XYZ({ url: '...
  • 1 加载图层组 新建一个index.html,代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>Using OpenLayers with Parcel</title> <...
  • 利用ol.js给Openlayers加载wms服务

    千次阅读 2019-10-21 09:52:27
    不知道从哪个版本开始,openlayers的文件引用就开始用import那一套了,真的是看着简单做着难,就引用一个js文件,我怎么引用都是错误的,简直是醉了,我也没有开始研究这个,不过这个肯定是趋势了。 es6里面现在连...
  • 我正在通过WMS服务调用此层,并成功在OpenLayers(v4.6.4)上显示具有默认样式的图层。现在,我想在用户点击地图时更改此图层“区域”的样式(样式描述为zone_sld)。我不想调用存储在GeoServer中的样式(不适合我项目的...
  • 通过WMS请求获取到图层,其实是一张张图片拼在一起的。而矢量图层,是由矢量数据来构造的。OpenLayer是中支持的矢量数据文件格式较多,如GeoJSON、KML、XML等。 以加载GeoJson为例,如下 数据源:GeoJSON文件 示例...
  • openlayers加载geoserver发布的三个wms图层,然后分别给三个图层添加注记弹框。 在网上搜了一天多一直没有找到openlayers怎么可以获取当前点击的图层名,今天终于在简书上看到一个评论里有人也在问同样的问题,惊...
  • 便利贴--15{OpenLayers,vue项目3,添加图层 WMS服务---==样式==}
  • openlayers加载WMS

    2010-06-29 09:28:12
    我们在访问WMS的时候,一般不会只请求一个图层,有可能会是很多图层。 我刚开始使用OpenLayers的时候,是这样使用的: view plaincopy to clipboardprint? var map, layer; function in...
  • OpenLayers最近版本(6.11.0)上看到了使用WebGLTile图层加载GeoTIFF的示例,功能强大,不仅可以在前端直接显示tif影像,还可以做分波段彩色合成,对比度拉伸等色彩上的调整。简单试了下,发现数据源上存在一定的...
  • openlayers加载geoserver的wms服务

    千次阅读 2020-12-03 17:51:32
    openlayers加载geoserver的wms服务 情景应用 本次使用openlayers加载geoserver的目的是在geoserver上发布公司项目的街道背景图作为底图,配合postgis发布离线地图(自定义的地图)。 geoserver使用教程 安装解压 ...
  • OpenLayers访问WMS服务并获取要素的属性

    千次阅读 热门讨论 2019-12-11 20:09:23
    OpenLayers 跨域访问WMS服务并获取要素的属性 整体思路: 1.因为我们这个地图服务是在Geoserver发布,要先解决跨域的问题,GeoServer启动有两种方式,一种是war存放在tomcat里启动,还有一种就是自己启动,所以要根据具体...
  • 要达到的效果通过多边形或者要素属性过滤wms的图形要素 ...1、创建wms图层 wmsSource = new ol.source.TileWMS({ url: 'http://localhost:8080/geoserver/tiger/wms',//端口号要改成自己的 para
  • OpenLayers map preview WMS version: 1.1.1 1.3.0 Tiling: Single tile Tiled Antialias: Full Text only Disabled Format: PNG 24bit PNG 8bit GIF JPEG JPEG-PNG Styles: Default Width/Height: Auto 600 750 950...
  • 一、使用GEOServer发布WMS动态地图服务 大致步骤如下: 1. 新建工作区 左边菜单栏,工作区,新建,起个名字,设置url。 2. 选择数据源 左边菜单栏,选择“数据源”,点击“添加新的数据源”,常用的有shp、...
  • OpenLayers v6.9.0 API - Class: OSM Layer source for the OpenStreetMap tile server. new ol.layer.Tile({ title: "OSM", source: new ol.source.OSM({ url: ...
  • var wmsSource = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: url, params: {'LAYERS': 'noiseMap', 'singleTile': true} }) }) map.addLayer(wmsSource); wmsSource.setOpacity(0.5)
  • OpenLayers5加载GeoServer WMS、WMTS服务

    千次阅读 2019-11-07 22:44:25
    软件版本 OpenLayers 5.3.3 GeoServer 2.16.0 关于GeoServer如何发布WMS、WMTS服务请参考上一篇文章GeoServer...WMS数据加载 直接上代码,代码中有详细的注释说明。 需引入一下OL包: import TileLayer from 'ol/l...
  • openlayers加载tms切片图层

    千次阅读 2020-09-11 09:54:12
    TMS服务主要分为谷歌TMS瓦片和标准TMS瓦片的切片,根据网上找到的资料ol3舍弃了直接加载TMS服务的方法,但是可以通过类似于加载WMS瓦片的形式来加载TMS瓦片地图。网上很多资料说加载瓦片地图的方式如下: 谷歌TMS...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 906
精华内容 362
关键字:

openlayers加载wms图层