zoukankan      html  css  js  c++  java
  • 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
    请关注微信公众账号lzugis15,随时了解更多GIS动态信息。



  • 相关阅读:
    angularJS的学习资源,巨全
    JSON语法
    handlerbars入门学习
    js中局部变量和全局变量的易混点
    js中判断一个变量是否为数字类型的疑问
    js中的类型转换方法
    使用sn.exe为程序集签名
    探究Entity Framework如何在多个仓储层实例之间工作单元的实现及原理(2018-05-31、2019-08-16修改部分严重错误代码)
    Fiddler4无法抓取HttpWebRequest本地请求的解决办法
    JS判断时特殊值与boolean类型的转换
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539845.html
Copyright © 2011-2022 走看看