ol 加载Arcgis Server MapServer WMS WMTS
- ol 加载Arcgis Server MapServer
- 代码如下
-
<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>
- ol 加载Arcgis Server WMS
- 代码如下
-
<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>
- ol 加载Arcgis Server WMTS
- 代码如下
-
<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>