精华内容
下载资源
问答
  • wms图层
    2021-10-09 13:53:23
    <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>
    
    

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

    更多相关内容
  • SuperMap iClient 6R for JavaScript示例演示了WMS 图层与分块动态图层叠加
  • var config = { REQUEST:"GetMap", //操作名称 VERSION:"1.1.1", //请求服务的版本 SERVICE:"WMS", //服务类型标识符 LAYERS:"3", //用","分隔的多个图层列表 ... //将WMS图层添加到地图上
  • Leaflet.TileLayer.WMS 与 bgbuffer 在 WMS 图层中启用后台缓冲区以在更改参数时实现平滑重新加载的插件用法新产品经理npm install --save leaflet-wms-bgbuffer require ( 'leaflet-wms-bgbuffer' ) ; 或者 < ...
  • 上面的就是 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)
    

    然后就可以了。

    在这里插入图片描述

    展开全文
  • 添加WMS图层1

    2022-08-03 15:24:11
    添加WMS图层Web地图服务(WMS)是由 的开放地理空间联盟(OGC) 由许多地理空间服务器实施,我们可以在其中找到免费和开源项目GeoServer(http
  • GeoServer实现了行业标准的OGC协议,如Web属性服务(WFS)、Web地图服务(WMS)和Web覆盖物服务(WCS),以及可选的Web处理服务(WPS)和Web地图瓦片服务(WMTS)等。其官方网站为: http://www.geoserver.org/, GeoServer有...

    本章主要讲述如何下载和安装使用GeoServer服务器,介绍了GeoServer的管理界面,并演示了发布地理数据的简单流程。

    主要从以下几个方面展开叙述:

    1. 下载和安装GeoServer
    2. GeoServer管理界面
    3. 发布图层数据的流程

    1. 下载和安装GeoServer

    GeoServer是一个共享地理空间数据的开源服务器,为提空间数据的交互性而设计,可以使用开放标准发布主流的空间数据源。GeoServer实现了行业标准的OGC协议,如Web属性服务(WFS)、Web地图服务(WMS)和Web覆盖物服务(WCS),以及可选的Web处理服务(WPS)和Web地图瓦片服务(WMTS)等。其官方网站为:

    http://www.geoserver.org/,

    GeoServer有两种运行方式,可以作为独立程序单独运行,也可以以war包的形式部署在Web应用服务器中运行。本文使用war包部署方式运行,所用的GeoServer版本号为2.20.1,下载地址为:

    https://sourceforge.net/projects/geoserver/files/GeoServer/2.20.1/geoserver-2.20.1-war.zip

    将下载回来的war包放到Tomcat服务器的Webapps文件夹下,Tomcat就会自动部署该应用,打开浏览器,输入访问地址 http://localhost:8080/geoserver,可看到如下管理界面:

     2. GeoServer管理界面

    输入默认的用户名admin,密码geoserver即可进入管理界面了。

    每次进入管理界面都会显示欢迎界面,欢迎界面中会显示当前共有多少个工作区、数据存储和图层,并提示为了安全请及时修改master和admin的默认密码。

    管理界面左侧为功能菜单,右部为工作区。功能菜单分为“数据”“服务”“设置”“瓦片缓存”“安全”等几个栏目,每个本项目中包含多个功能选项,点击每个功能选项会在右侧的工作区显示该功能的简单描述和具体内容,可挨个点击以熟悉管理界面的功能。

    3.发布图层数据的流程

    “数据”栏主要用来进行图层数据的发布。在GeoServer中,使用工作区、数据存储和图层共三级结构来组织管理地理空间数据,发布一个地理空间数据基本上也是按照这个顺序进行操作。准备好数据源,我们要开始了。

    (1)新建工作区

    工作区相当于一个命名空间,用于组织一系列数据的存储,可以为这些数据存储进行统一管理,并分配统一的安全权限。点击“新建工作区”按钮即可打开“新建工作区”界面如下:

    在这个界面中给工作区起一个有意义的名字,并输入一个URI作为命名空间与这个工作区相关联,也可在“Security”标签页中进行安全设置,然后点“保存”就可以创建这个新工作区了。

    (2)新建数据源

    一个工作区下可以创建多个数据源,数据源是真正存储地理空间数据的地方,点击“添加新的数据存储”就可以打开“新建数据源”页面。

     

     在“新建数据源”页面中,可以看到GeoServer可以支持矢量数据源、栅格数据源和其他数据源,每种类别下都有很多常见的主流地理空间数据格式。其中GeoTIFF(Tagged Image File Format with Geographic information)的数据源最通用也最易获得,所以这里就以GeoTIFF格式为例演示如何创建新的数据源。

    在“栅格数据源”类别下点击“GeoTIFF”即可进入“添加栅格数据源”页面。

    在这个页面中,首先选择前面创建的工作区,然后为数据源起一个容易识别的名字。“连接参数”处的URL为数据源文件的存储位置,此处可选择提前准备好的GeoTIFF格式的文件,一定要保证Tomcat具有读取这个文件的权限,否则会导致访问失败。最后选中“启用”并点击“保存”按钮,数据源就算创建成功了。

    (3)新建和编辑图层

    通常,在第(2)步点击“保存”按钮后,会自动跳转到“新图层”界面,此时直接点“发布”就可以添加新图层了。

     如果没有跳转到“新图层”页面,则需要点击“添加新的资源”来进入“新建图层”页面了。

    此时选择第(2)步中创建的数据源,下面会自动显示出可发布的图层名称和“发布”按钮,如果这个图层以前发布过,就会出现“再次发布”的字样,点击“发布”会打开“编辑图层”页面。

     在这里简单的设置一下图层的名称,如果所选中的GeoTIFF文件中包含有坐标参考系统和边界框信息,就会自动填充在下面的输入框里,否则的话就需要手工填写相关地理信息。

    检查无误后点击“保存”即可。

    (4)预览图层

    从左侧工具栏中进入“图层预览”页面,根据第(3)步中设置的图层名称找到新添加的图层,然后点击后面的“OpenLayers”就会打工一个新的页面预览选中的图层了,试着滚动一下鼠标滚轮,对图层进行放大缩小等操作。

    通过以上4步操作,一个最简单的图层发布流程就演示完了,赶紧去试试吧!

    展开全文
  • QGIS如何使用WMS图层

    千次阅读 2019-06-16 16:39:04
    这边文章的讲的是QGIS如何使用WMS图层以及其WMS图层原理和缺点。 1.什么是WMS? (WMS) Web Mapping Service 是一种远程的地图服务,好像一个网站,你可以通过连接一个远程服务器来获取,QGIS可以直接加载WMS图层。...

     

    这边文章的讲的是QGIS如何使用WMS图层以及其WMS图层原理和缺点。

    1.什么是WMS?

    (WMS)  Web Mapping Service 是一种远程的地图服务,好像一个网站,你可以通过连接一个远程服务器来获取,QGIS可以直接加载WMS图层。WMS图层不像从GOOGLE地图上加载的栅格地图,它是静态的,一旦你下载了图片,它就不会再更新变化了(除非你删除缓存)。但通过放大和缩小地图、WMS图层却是可以动态更新的,

    2.导入WMS 图层

    你既可以使用以前配置好的地图也可以创建一个新地图加载一些已经存在的图层,下面我们用一个新地图导入places和landuse图层并配置符号,然后我们开始导入WMS图层。

    在导入WMS 图层之前,首先需要禁用动态投影 “on the fly” (settings->options->CRS)这可能造成图层不能正确叠加,不过不用担心 我们后边会单独对其进行修复。

    我们通过点击工具栏中的Add WMS Layer button 来加载WMS图层,类似加载SpatiaLite数据库图层,图层数据是存储在数据库中的,为了使用这些图层,我们首先要连接这些数据库。而添加WMS图层,需要先连接远程服务器。

     

    点 NEW 按钮 创建一个新的WMS连接,首先需要一个WMS 服务地址 ,互联网上有许多免费的WMS 服务,例如: terrestris,它是利用OpenStreetMap数据发布的。

     

    为了使用WMS,需要如下设置对话框:

    1)Name field 填写     terrestris。

    2)URL       填写  field http://ows.terrestris.de/osm/service

    3)点OK 完成设置。

    点连接后,在server listed列表中你能够看到导入的WMS入口,它们是该WMS SERVER管理的所有图层。

    单击 OSM-WMS图层,将显示该图层的参考坐标系,

    由于我们不使用WGS84坐标系,我们需要重新选择,点Change按钮,将显示坐标系对话框。我们需要一个投影坐标系,选择WGS 84 / Pseudo Mercator。

    点OK按钮设置完成。

    点 添加 按钮 新的名叫OSM-WMS.的图层将出现在地图上,在图层列表上,点选并拖动图层到地图列表的底端。

     

    我们发现你的图层位置不准确,这是因为  “on the fly” projection 动态投影被禁用了。我们将重新启用动态投影,选择与OSM-WMS图层同样的投影,也就是WGS 84 / Pseudo。

    3.启用动态投影

    在 SETTING->Project Properties dialog对话框中的 CRS TAB页中,输入pseudo 过滤坐标系

    从列表中选择 WGS 84 / Pseudo Mercator

    点 OK设置完毕

    然后 右键点击在图层面板中的相应图层,选择Zoom to layer extent. 查看Swellendam区域。

    4.WMS 的优点和局限

    我们注意到WMS 图层实际上包含很多FEATURE,有街道、河流、自然保护区等。它好像像是矢量格式,但其实他是栅格格式的,我们是不能改变这些FEATURE的样式的。

    因为它类似一个纸质的地图,只是它是个图片而已,我们平时使用的矢量图层,QGIS会负责其渲染成但是我们使用WMS时矢量图层在WM SSERVER服务器上,服务器会渲染地图并生成图片发送到客户端QGIS上由QGIS显示。所以我们不能改变符号的样式,因为这些是在服务器端完成的工作。这其实有很多好处,因为你不必去再设计图层的符号样式,他已经在服务端设计好了。如果不喜欢当前的样式设计你也不能改变,但有时你也想在客户端改变图层样式,这时就要使用WFS图层,它会传给客户端矢量图层。而不是将地图作为整体传输。

    展开全文
  • 近期公司有项目需求,需要开发一款桌面端的三维地球。由于本人是Android开发人员,做过WorldWind Android开发,所以,就安排我来实现桌面端的WorldWind。这个项目刚开始阶段,着实费了很大的精力。...
  • WmsViewer 该项目是使用版本6.2.3生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件,该应用程序将自动重新加载。 代码脚手架 运行ng generate component ...docker push shookas/wms-viewer:
  • 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;,
  • Android WMS层使用Google Map API在Android中添加WMS图层。 该项目是基于gradle的项目。原始项目
  • 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:...
  • 磁贴大小越大,对服务器的请求越少,但生成更大图像的计算时间就越多,每个图像的下载量也就越大。创建一个自定义JavaScript文件,并使用Stamen集合中的背
  • openlayers点击wms图层获取其信息

    千次阅读 2019-08-14 13:48:38
    var wmsSource = new ol.source.ImageWMS({ url: buildIp+'/geoserver/tianjin/wms', params: {'LAYERS': 'tianjin:tianjin_build_leqn'}, serverType: 'geoserver', crossOrigin: 'anonymous'...
  • 目录需求一、添加点击事件二、WMS图层三、WFS图层 需求 使用vue、openlayer加载浙江省范围内的5000个点,一开始使用mapbox的矢量切片mvt,但是数量一多就变得非常卡顿,影响使用,可能openlayer对这个支持并不好吧...
  • Openlayers获取GeoServer发布的WMS图层服务属性问题 Openlayers获取GeoServer发布的WMS图层服务属性时出现: Either no layer was queryable, or no layers were specified using QUERY_LAYERS 错误信息。 经过排查...
  • 要达到的效果显示geoserver中发布的wms图层,数据使用geoserver自带的示例数据。安装后geoserver后就有的数据 官网示例链接:https://openlayers.org/en/latest/examples/wms-custom-tilegrid-512x256.html 1、...
  • 这次我们来学习一下关于arcgis for android 100.5加载wms地图服务,wms地图服务相信大家都不陌生了。发布wms地图服务服务程序也是很多的,你比如geoserver,arcgis server都是可以的,好了我们来看一下新版中是如何...
  • OpenLayers+天地图+Geoserver+WMS图层服务

    千次阅读 2017-04-08 18:26:02
    OpenLayers+天地图+Geoserver+WMS图层服务
  • uniapp 实现聚合点,点闪烁,动态展示选择的行政区域点,wms图层展示 最近使用uniapp 开发地图时发现,uniapp 的地图组件能呈现的功能比较简单,不能满足项目需求,项目地图上要求要实现点的聚合展示,点上的设备...
  • 天地图+GeoServer WMS图层样例

    千次阅读 2017-04-08 18:18:37
    天地图+GeoServer WMS图层样例
  • 要达到的效果通过多边形或者要素属性过滤wms的图形要素 ...1、创建wms图层 wmsSource = new ol.source.TileWMS({ url: 'http://localhost:8080/geoserver/tiger/wms',//端口号要改成自己的 para
  • 前言前阵子利用echarts+百度地图做系统的门户首页,遇到一个要地图上叠加产业城影响范围示意图的需求。查阅文档之后,发现百度地图API确实提供了叠加...后面查阅相关文档才发现,百度地图是支持WMS图层服务的,...
  • WebGIS WebGIS homework 采用开发技术: Geoserver OpenLayers ExtJS 功能: 1)加载OSM底图、WMS图层,WFS图层 2)地图浏览 3)WFS-T实线增删查改 4)ExtJS实现查询结果显示
  • 热图依赖于一些需要一些跳圈才能在 virtualenv 中工作的库(SciPy 很大,而且用途如此之小,因此删除是 TODO):-安装 gdal-python 仅安装绑定,但仍然需要该库。 你需要去sudo apt-get install libgdal-dev 。...
  • 在高德地图 Android SDK上添加GeoServer发布的WMS图层

    千次阅读 热门讨论 2018-03-26 17:04:05
    因为项目需要,要在高德地图上添加自己的地图服务器发布的地图,想到了通过WMS来添加。在网上找到了两篇相关的博文,用他们的代码都无法实现,后来感觉这两个人根本就没有实际去做,代码里有同样的逻辑性错误。自己...
  • qgis加载geoserver wms图层

    千次阅读 2016-03-17 11:30:36
    1菜单图层 2或者点击图标 3.在弹出的对话框上选新建 4.名称自定义,在geoserver主页中找到,WMS 1.3.0,,点击打开网址。 如:http://localhost:8015/geoserver/ows?service=wms&version=1.3.0&...
  • openlayers.WMS图层的数据更改后怎么刷新图层。。。。。。。。。。
  •  web地图服务(WMS)图层基于来自开放地理空间联盟(OGC)的数据。OGS web地图服务是一个为地图交互提供的OpenGIS的标准规范,而该交互基于从互联网上服务...WMS图层允许你访问来自互联网的这些服务并可以将它们的内容

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,348
精华内容 1,739
关键字:

wms图层

友情链接: BOOTLOADER.rar