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

2024-04-17 15:38
文章标签 加载 服务 js openlayers wms ol

本文主要是介绍利用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服务的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/912202

相关文章

Android ClassLoader加载机制详解

《AndroidClassLoader加载机制详解》Android的ClassLoader负责加载.dex文件,基于双亲委派模型,支持热修复和插件化,需注意类冲突、内存泄漏和兼容性问题,本文给大家介... 目录一、ClassLoader概述1.1 类加载的基本概念1.2 android与Java Class

关于DNS域名解析服务

《关于DNS域名解析服务》:本文主要介绍关于DNS域名解析服务,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录DNS系统的作用及类型DNS使用的协议及端口号DNS系统的分布式数据结构DNS的分布式互联网解析库域名体系结构两种查询方式DNS服务器类型统计构建DNS域

Linux中SSH服务配置的全面指南

《Linux中SSH服务配置的全面指南》作为网络安全工程师,SSH(SecureShell)服务的安全配置是我们日常工作中不可忽视的重要环节,本文将从基础配置到高级安全加固,全面解析SSH服务的各项参... 目录概述基础配置详解端口与监听设置主机密钥配置认证机制强化禁用密码认证禁止root直接登录实现双因素

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

Spring如何使用注解@DependsOn控制Bean加载顺序

《Spring如何使用注解@DependsOn控制Bean加载顺序》:本文主要介绍Spring如何使用注解@DependsOn控制Bean加载顺序,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录1.javascript 前言2. 代码实现总结1. 前言默认情况下,Spring加载Bean的顺

SpringBoot服务获取Pod当前IP的两种方案

《SpringBoot服务获取Pod当前IP的两种方案》在Kubernetes集群中,SpringBoot服务获取Pod当前IP的方案主要有两种,通过环境变量注入或通过Java代码动态获取网络接口IP... 目录方案一:通过 Kubernetes Downward API 注入环境变量原理步骤方案二:通过

springboot加载不到nacos配置中心的配置问题处理

《springboot加载不到nacos配置中心的配置问题处理》:本文主要介绍springboot加载不到nacos配置中心的配置问题处理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录springboot加载不到nacos配置中心的配置两种可能Spring Boot 版本Nacos

如何搭建并配置HTTPD文件服务及访问权限控制

《如何搭建并配置HTTPD文件服务及访问权限控制》:本文主要介绍如何搭建并配置HTTPD文件服务及访问权限控制的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、安装HTTPD服务二、HTTPD服务目录结构三、配置修改四、服务启动五、基于用户访问权限控制六、

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

IDEA下"File is read-only"可能原因分析及"找不到或无法加载主类"的问题

《IDEA下Fileisread-only可能原因分析及找不到或无法加载主类的问题》:本文主要介绍IDEA下Fileisread-only可能原因分析及找不到或无法加载主类的问题,具有很好的参... 目录1.File is read-only”可能原因2.“找不到或无法加载主类”问题的解决总结1.File