openlayer加载WMS图层例子（LAYERS对应值填的是name属性）

最新推荐文章于 2022-12-28 17:03:08 发布
最新推荐文章于 2022-12-28 17:03:08 发布
阅读量4.2k 收藏 1
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq503690160/article/details/62036688
版权 
<!DOCTYPE html>
<html>
  <head>
    <title>Tiled WMS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
        var layers = [
          new ol.layer.Tile({
              source: new ol.source.XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}',
                projection:"EPSG:4326"
              })
          }),
          new ol.layer.Tile({
              //extent: [117.909832, 24.427347, 118.346327, 24.792678],
              source: new ol.source.TileWMS({

                  url: 'http://192.168.202.63:6080/arcgis/services/XFZDFHDW/MapServer/WMSServer',
                  params: { 'LAYERS': '0', 'singleTile': true }
                 
              })
          })
        ];
        var map = new ol.Map({
            layers: layers,
            target: 'map',
            view: new ol.View({
                center: [118, 24.5],
                zoom: 12,
                projection: "EPSG:4326"
            })
        });
    </script>
  </body>
</html>

阿星_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue+OpenLayers7入门到实战：OpenLayers加载TMS瓦片服务，以腾讯地图TMS图层为例
最好的GIS地图开发教程和GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)
03-04 100
本章介绍如何使用OpenLayers7在地图上加载TMS图层。TMS图层介绍请参考《Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts、TMS和XYZ介绍》，下面介绍一下TMS图层和XYZ图层的区别。
Openlayers 中加载渲染 WMTS TMS XYZ WMS WFS 图层
linzi19900517的博客
12-05 4214
本文详细总结介绍 Openlayers 中加载渲染 WMTS TMS XYZ WMS WFS 图层。 以及在线示例。
WMS图层中图层参数变更
fjun0910的专栏
01-10 842
<br />var baseLayer;<br />   map = new OpenLayers.Map('mapdiv',{<br />   controls:[],<br />   maxResolution:"auto",  <br />   maxExtent:new OpenLayers.Bounds( 118.028307,27.144934,122.951907,31.182734),<br />     numZoomLevels:9});  <br /> <br />     baseL
Openlayers获取GeoServer发布的WMS图层服务属性问题
cwr888的专栏
04-27 1044
Openlayers获取GeoServer发布的WMS图层服务属性问题 Openlayers获取GeoServer发布的WMS图层服务属性时出现： Either no layer was queryable, or no layers were specified using QUERY_LAYERS 错误信息。 经过排查是因为请求GeoServer数据的URL中没有指定QUERY_LAYERS，添加上即可。 ...
Openlayers动态刷新wms服务图层
wwf1225的博客
06-29 1798
wms - OpenLayers not refreshing a layer - Geographic Information Systems Stack Exchange最近开发一个基于openlayers的webgis在线编辑系统。openlayers加载wms服务作为资源底图展示。前端负责要素绘制，然后保存到后台数据库对应的表中，每次创建完成一次资源，都需要重新刷新wms服务，更新资源底图。示例说明如下图碰到的问题主要是被百度搜索引擎坑了，最近科学上网欠费了，只能使用百度，搜索了一波网上的方案，归类
WMS服务 天地图 海量数据 性能优化 GeoServer 空间搜索 VUE
weixin_43871535的博客
09-29 4681
需求： 1秒内完成5w+条标注数据渲染到地图上，点击每个标注点显示该点的详情信息。 问题： 加载上万标注点到地图上性能特别差，天地图提供的组件MarkerClusterer，CloudMarkerCollection无法满足需求。 解决： 使用geoserver发布WMS地图服务+空间搜索获取标注点的基础信息 流程： 1、构造基础数据的shapfile文件 2、将shpfile文件通过geoserver发布成WMS服务 3、编写GeoServer的SLD文件 给发布的
WMS GetFeatureInfo (Image Layer)——WMS获取要素信息（图像图层）
SmileCoffin的博客
07-04 6031
This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer. Additionally map.forEachLayerAtPixel is used to change the mouse pointer when hovering a non-transparent
openlayers加载WMS服务
05-31
提供openlayers加载WMS服务的完整示例
OpenLayer 3加载wms示例
09-21
OpenLayer 3加载wms示例，包括几个常用事件和动画的使用。
Mapbox加载wms
04-21
mapbox 加载wms 用geoserver发布之后加载，亲测可以行
WMS 图层与分块动态图层叠加
12-14
SuperMap iClient 6R for JavaScript示例演示了WMS 图层与分块动态图层叠加
天地图叠加其他wms图层
06-29
LAYERS:"3", //用","分隔的多个图层列表 TRANSPARENT:true, //输出图像背景是否透明 STYLES:"default", //每个请求图层的用","分隔的描述样式 FORMAT:"image/png", //输出图像的类型 SRS:"EPSG:4326", //...
八、wms提供自定义图层
12-28 468
测绘与图层的产生，图包括影像类图层、地形类图层等，影像类图层并不是特指卫星影像数据，还包括一些互联网地图、TMS、WMS、WMTS、单个图片等。地形图层用于模拟逼真的三维场景、与高程相关的一些空间分析和计算等。图层通常用于二维类场景，如各种物件尺寸，各地块、建筑物底座形状等，需要通过各种仪器设备测量产生，这就是专业的测绘人员的工作了。测绘人员通过专业的前端工具如QGIS Desktop，一般生成空间数据，如json矢量数据，或者shapeFile格式。
使用geoserver的wms功能发布地图（多个图层）
weixin_30580341的博客
12-16 353
图层组名称：layTest（可随便起） topp:bou2和topp:bou2p为geoserver连接mysql数据库取出的地图数据（两个图层） 提交后就可在 Mapbuiler客户端查看地图 1、使用java代码调用使用wms发布的地图 （可选择图层） 页面代码： 代码 <!DOCTYPEHTMLPUBLIC"-//W3C//...
【WebGIS初学到入职】（六）用OpenLayers加载GeoServer发布的WMS服务
ReBeX
10-08 862
一、前言 我在学习过程中，是租了一台服务器在上面搭建配置相关的服务，然后通过QGIS向PostgreSQL数据库添加数据，然后有向GeoServer中添加图层，之后用OpenLayers加载GeoServer根据WMS规范发布的图层。 大家可以自己在本地搭建GeoServer，然后直接向里面添加图层数据，也可以自己租一台服务器来弄。 可选准备： 【配置PostGIS】Ubuntu20.04+PostgreSQL+pgAdmin4+PostGIS 【配置Geoserver】Ubuntu 20.04+J
7、openlayers6 加载WMS图层
qq_41939902的博客
10-14 748
初始化地图 <template> <div id="container"> <div class="mapWrap" id="map" :style="height"> <div class="video_wrap"> <el-scrollbar style="height: 100%"> <template v-for="(item,index) in videoList">
openlayers操作
qq_29009973的博客
09-15 202
/** *openlayers获取source */ import {Vector as VectorLayer} from "ol/layer"; import {Vector as VectorSource} from "ol/source"; /添加 let drawLayer = new VectorLayer({ source:new VectorSource({wrapX: false}), }); drawLayer.set('name','layer-name'); map.add.
ArcGIS学习（五）OpenLayers调用WMS服务
热门推荐
drr789的专栏
05-31 1万+
OpenLayers： OpenLayers是一个开源的js框架，用于在您的浏览器中实现地图浏览的效果和基本的zoom，pan等功能。OpenLayers支持的地图来源包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以用简单的图片作为源，在这一方面OPenLayers提供了非常多的选择。  WMS服务：     1　OGC组织及其开放性规
Openlayers实例详解
08-09
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。
openlayer 加载wms
最新发布
10-10
2. 创建一个 `ol.layer.Tile` 图层，将刚才创建的 WMS 数据源赋给图层的 `source` 属性。例如： ```javascript var wmsLayer = new ol.layer.Tile({ source: wmsSource }); ``` 3. 创建一个 `ol.Map` 对象，并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值