利用ol.js给Openlayers加载wms服务

不知道从哪个版本开始,openlayers的文件引用就开始用import那一套了,真的是看着简单做着难,就引用一个js文件,我怎么引用都是错误的,简直是醉了,我也没有开始研究这个,不过这个肯定是趋势了。
es6里面现在连jquery都有了,import也是其中一个,所以学习这个是势在必行的,话不多说,我就为像我一样的小白们带带路,咱们开始:
文件引用:

<link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel="stylesheet">
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script>
   

这个就是直接引用的文件,官网很方便,也可以自己下下来看看里面的变量
具体代码:

var map = new ol.Map({
         layers: [
             new ol.layer.Tile({//矢量地图
                 source: new ol.source.WMTS({
                   
                    
                 }),
             }),
             new ol.layer.Tile({//矢量标注
                 source: new ol.source.WMTS({
                  
             }),
             new ol.layer.Tile({
                 source: new ol.source.TileWMS({
                     url: 'http://120.27.61.222:8016/geoserver/tdw_testdata/wms',
                     params: { 'LAYERS': 'tdw_testdata:poilayers' },
                     serverType: 'geoserver',
                     crossOrigin: 'anonymous'
                 })
             })
         ]

第三个图层就是wms图层,前面两个是添加wtms底图的,底图的添加网上一大堆,可以搜搜看。
wms服务这个就是我看ol.js文件里它添加其他图层的方法理解过来的,讲讲需要的信息:

  • 首先就是url,就是你发布到geoserver的图层,连接复制到wms那里
  • params,就是你数据属性和名称,把他的工作区也要输入进去
  • servertype和crossOrigin这两个默认和我的一样就行

有什么不会的评论区说出来就行,如果需要其他的步骤教程,也可以说出来

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值