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

本文主要是介绍利用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这两个默认和我的一样就行

---

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

这篇关于利用ol.js给Openlayers加载wms服务的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---