Arcgis for Js之加载wms服务
时间:2022-06-13
本文章向大家介绍Arcgis for Js之加载wms服务,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务。
1、定义resourceInfo
var resourceInfo = {
extent: new Extent(-126.40869140625,31.025390625,-109.66552734375,41.5283203125,{wkid: 4326}),
layerInfos: [],
version : '1.1.1'
};
2、加载ArcgisServer的wms
var agsWmsUrl = "http://localhost:6080/arcgis/services/road/MapServer/WMSServer";
var agsWmsLayer = new WMSLayer(agsWmsUrl,{resourceInfo: resourceInfo});
agsWmsLayer.setImageFormat("png");
agsWmsLayer.setVisibleLayers([0]);
map.addLayer(agsWmsLayer);
3、加载GeoServer的wms
var geoWmsUrl = "http://200.200.200.220:8080/geoserver/wms";
var geoWmsLayer = new WMSLayer(geoWmsUrl,{resourceInfo: resourceInfo});
geoWmsLayer.setImageFormat("png");
geoWmsLayer.setVisibleLayers(["capital","pro"]);
map.addLayer(geoWmsLayer);
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
<style type="text/css">
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
font-size: 62.5%;
font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}
</style>
<script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script type="text/javascript">
var map;
require([
"esri/map",
"esri/layers/WMSLayer",
"esri/geometry/Point",
"esri/geometry/Extent",
"dojo/domReady!"],
function(Map,
WMSLayer,
Point,
Extent)
{
map = new Map("map",{logo:false});
var resourceInfo = {
extent: new Extent(-126.40869140625,31.025390625,-109.66552734375,41.5283203125,{wkid: 4326}),
layerInfos: [],
version : '1.1.1'
};
var agsWmsUrl = "http://localhost:6080/arcgis/services/road/MapServer/WMSServer";
var agsWmsLayer = new WMSLayer(agsWmsUrl,{resourceInfo: resourceInfo});
agsWmsLayer.setImageFormat("png");
agsWmsLayer.setVisibleLayers([0]);
map.addLayer(agsWmsLayer);
var geoWmsUrl = "http://200.200.200.220:8080/geoserver/wms";
var geoWmsLayer = new WMSLayer(geoWmsUrl,{resourceInfo: resourceInfo});
geoWmsLayer.setImageFormat("png");
geoWmsLayer.setVisibleLayers(["capital","pro"]);
map.addLayer(geoWmsLayer);
var mapCenter = new Point(103.847, 36.0473, map.spatialReference);
map.centerAndZoom(mapCenter,4);
});
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>
加载的效果:
如有疑问请联系: QQ:1004740957 Email:niujp08@qq.com
- 数据挖掘算法之深入朴素贝叶斯分类
- 歪?我想要一个XXE。
- 厚土Go学习笔记 | 19. slice和数组很像,但是slice可以添加元素
- 工具| 手把手教你制作信息收集器之网站备案号
- 厚土Go学习笔记 | 18. 数组
- 厚土Go学习笔记 | 17. 结构体及用指针访问结构体
- Java枚举类型的原理
- 厚土Go学习笔记 | 27. 斐波纳契闭包
- 代码审计| APPCMS SQL-XSS-CSRF-SHELL
- 厚土Go学习笔记 | 33. 利用数据流实现密码代换功能
- 厚土Go学习笔记 | 32. Readers读取数据流
- GoStub框架二次开发实践
- 厚土Go学习笔记 | 31. 错误 通常函数会返回一个error值来判断是否出错
- 厚土Go学习笔记 | 30. Stringers的一个练习
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- BigData--大数据技术之Spark机器学习库MLLib
- 【LeetCode】三数之和
- BigData--大数据技术之SparkStreaming
- Jenkins 入门实战:GitHub Push触发Jenkins自动构建
- 2020最新编辑器集成eslint、prettier、stylelint,git提交预检查代码配置
- eslint+prettier学习
- C++ 友元函数
- BigData--大数据技术之SparkSQL
- BigData--大数据分析引擎Spark
- 大数据利器--Scala语言学习(高级)
- 大数据利器--Scala语言学习(基础)
- BCI-EEG脑电数据处理
- BCI--Python-EEG工具库MNE
- BCI--脑电基础整理
- JavaScript 对象赋值和浅拷贝的区别