Openlayers快速加载wmts及wms服务

一、引入所需的js文件

<script src="lib/pro4j-2.5.0/proj4.js"></script>
<script src="lib/ol-v5.3.0/ol.js"></script>

二、自定义投影

// 在http://epsg.io/网站，查找坐标系定义（例：epsg：2362） 选择proj4js
proj4.defs("EPSG:2362","+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs");
ol.proj.proj4.register(proj4);

三、初始化地图

var map = new ol.Map({
    controls: ol.control.defaults(),
    interactions: ol.interaction.defaults().extend([
      new ol.interaction.DragRotateAndZoom()
    ]),
    view: new ol.View({
        center: [34766364.918830,79579.729428],
        projection: ol.proj.get("EPSG:2362"),
        zoom: 4,
    }),
    target: 'map-view'
});

四、添加wmst服务或wms服务

// 发布服务的时候 选择默认切片方式 切片时不是从0层开始切片 会存在层级偏移
// ol添加wmts 需要定义分辨率及层级的对应关系  设置tileGrid
// 1、wmts
var layer1 = new ol.layer.Tile({
    source: new ol.source.WMTS({
        tileGrid: new ol.tilegrid.WMTS({
            resolutions: [
                16.933367200067735,
                8.466683600033868,
                4.233341800016934,
                2.116670900008467,
                1.0583354500042335
            ],
            origin: [3.28768e7, 1.00021e7],
            matrixIds: ["0", "1", "2", "3", "4"],
        }),
        matrixSet: "default028mm",
        layer: "MyMapService",
        style: "default",
        requestEncoding: "REST",
        url: "http://localhost:6080/arcgis/rest/services/test/MapServer/WMTS/tile/1.0.0/test/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png"
    })
});
map.addLayer(layer1);
// 2、wms
var layer2 = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        crossOrigin: 'anonymous',
        url: 'http://192.168.0.250:6080/arcgis/services/test/MapServer/WMSServer',
        params: {
          'FORMAT': 'image/png',
          'VERSION': '1.1.1',
          "LAYERS": '0,1,2,3,4,5,6,7,8,9,10'
        }
      })
  })
map.addLayer(layer2)