526互联

ol 加载Arcgis Server MapServer WMS WMTS

发布时间 2023-07-26 15:23:36作者: 小鱼写代码的过往
  1. ol 加载Arcgis Server MapServer 
    1. 代码如下
    2. <html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>ol6_MapServer</title>
  <link rel="stylesheet" type="text/css" href="./ol.css" />
  <style type="text/css">
    body,
    #map {
      border: 0px;
      margin: 0px;
      padding: 0px;
      padding: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-size: 13px;
    }
  </style>
  <script type="text/javascript" src="ol.js"></script>
  <script type="text/javascript">

     function init() {
       
       
       var projection = new ol.proj.Projection({
         code: 'EPSG:4490',
         units: 'degrees',
         axisOrientation: 'neu',
         extent: [-180, -90, 180, 90]
       });
       
       var arcgisMapServer = new ol.layer.Tile({
           source: new ol.source.TileArcGISRest({
               url: 'http://localhost:6080/arcgis/rest/services/cs/dwq_test/MapServer',
               // projection:projection,
               params: {
                    'LAYERS': ['0']
                }
           })
       });
       
       
     
       var map = new ol.Map({
         target: 'map',
         layers: [arcgisMapServer],
         view: new ol.View({
           projection: projection,
           center: [113.23,23.22],
           zoom: 8
         })
       });
     }   
  </script>
</head>

<body onLoad="init()">
  <div id="map"></div>
</body>

</html>
      View Code

       

  2. ol 加载Arcgis Server WMS
    1. 代码如下
    2. <html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>ol6_wms</title>
  <link rel="stylesheet" type="text/css" href="./ol.css" />
  <style type="text/css">
    body,
    #map {
      border: 0px;
      margin: 0px;
      padding: 0px;
      padding: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-size: 13px;
    }
  </style>
  <script type="text/javascript" src="ol.js"></script>
  <script type="text/javascript">

	 function init() {
   
	   var arcgiswms = new ol.layer.Image({
		   source: new ol.source.ImageWMS({
			   ratio: 1,
			   url: 'http://localhost:6080/arcgis/services/cs/dwq_test/MapServer/WMSServer',
			   params: {
				   'FORMAT': 'image/png',
				   'VERSION': '1.3.0',
				   STYLES: '',
				   LAYERS: ['0']
			   }
		   })
	   });
	   
	   var projection = new ol.proj.Projection({
	     code: 'EPSG:4490',
	     units: 'degrees',
	     axisOrientation: 'neu',
	     extent: [-180, -90, 180, 90]
	   });
	 
	   var map = new ol.Map({
	     target: 'map',
	     layers: [arcgiswms],
	     view: new ol.View({
	       projection: projection,
	       center: [113.23,23.22],
	       zoom: 8
	     })
	   });
	 }	   
  
  </script>
</head>

<body onLoad="init()">
  <div id="map"></div>
</body>

</html>

      　　

  3. ol 加载Arcgis Server WMTS
    1. 代码如下
    2. <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>加载ArcGIS Online发布的WMTS服务数据</title>
        <link rel="stylesheet" href="./ol.css" />
        <script src="./ol.js"></script>
        <style type="text/css">
          body,
          #map {
            border: 0px;
            margin: 0px;
            padding: 0px;
            padding: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            font-size: 13px;
          }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            // 首先设置好WMTS瓦片地图的投影坐标系
            let projection = ol.proj.get('EPSG:3857');         
            // 获取web墨卡托投影坐标系
            let projectionExtent = projection.getExtent();      
            // web墨卡托投影坐标系的四至
            let width = ol.extent.getWidth(projectionExtent);   
            // web墨卡托投影坐标系的水平宽度，单位米
            let resolutions = [];                               
            // 瓦片分辨率
            let matrixIds = [];
            for (let z = 0; z < 14; z++) {
                resolutions[z] = width / (256 * Math.pow(2, z));
                matrixIds[z] = z;
            }
            let wmtsTileGrid = new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent), 
                // 原点（左上角）
                resolutions: resolutions,
                // 分辨率数组
                matrixIds: matrixIds
                // 矩阵ID，就是瓦片坐标系z维度各个层级的标识
            });
            // WMTS数据源与地图
            let wmtsSource = new ol.source.WMTS({
                url: "http://services.arcgisonline.com/arcgis/rest/services/" +
                    "Demographics/USA_Population_Density/MapServer/WMTS/",
                matrixSet: 'EPSG:3857',
                // 投影坐标系参数矩阵集
                format: 'image/png',
                // 图片格式
                projection: projection,
                // 投影坐标系// 投影坐标系
                tileGrid: wmtsTileGrid,
            });
            let wmtsLayer = new ol.layer.Tile({
                source: wmtsSource
            });
            let map = new ol.Map({
                target: 'map',
                layers: [new ol.layer.Tile({
                    source: new ol.source.Stamen({
                        layer: 'terrain'
                    })
                }), wmtsLayer],
                view: new ol.View({
                    center: [0, 0],
                    zoom: 3
                })
            });
        </script>
    </body>
</html>
      View Code