console
proj4.defs("EPSG:4490","GEOGCS[\"China Geodetic Coordinate System 2000\",DATUM[\"China_2000\",SPHEROID[\"CGCS2000\",6378137,298.257222101,AUTHORITY[\"EPSG\",\"1024\"]],AUTHORITY[\"EPSG\",\"1043\"]],PRIMEM[\"Greenwich\",0,AUTHORITY[\"EPSG\",\"8901\"]],UNIT[\"degree\",0.0174532925199433,AUTHORITY[\"EPSG\",\"9122\"]],AUTHORITY[\"EPSG\",\"4490\"]]");
ol.proj.setProj4(proj4);
var projection = new ol.proj.Projection({
code: 'EPSG:4490',
units: 'degrees',
axisOrientation: 'neu'
});
projection.setExtent([73.62,16.7,134.77,53.56]);
projection.setWorldExtent([-180, -90, 180, 90]);
ol.proj.addProjection(projection);
var projectionExtent = projection.getExtent();
var resolutions = [
0.703125,
0.3515625,
0.17578125,
0.087890625,
0.0439453125,
0.02197265625,
0.010986328125,
0.0054931640625,
0.00274658203125,
0.001373291015625,
6.866455078125E-4,
3.4332275390625E-4,
1.71661376953125E-4,
8.58306884765625E-5,
4.291534423828125E-5,
2.1457672119140625E-5,
1.0728836059570312E-5,
5.364418029785156E-6,
2.682209014892578E-6,
1.341104507446289E-6,
6.705522537231445E-7,
3.3527612686157227E-7
];
var scales = new Array(22);
var matrixIds = new Array(22);
for (var z = 0; z < 22; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
matrixIds[z] = z;
scales[z] = resolutions[z] * 90.71428571428571 * 111194.65190665461376212444103004 / 0.0254
}
var map = new ol.Map({
logo: false,
layers: [
new ol.layer.Tile({
opacity: 1,
source: new ol.source.WMTS({
url: 'http://192.168.3.151:8088/gaeaExplorerServer/htc/service/wmts',
layer: '房屋建筑普查1',
format: 'image/png',
matrixSet: 'EPSG:4490',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
})
})
})
],
target: 'map',
controls: ol.control.defaults({}).extend([
new ol.control.MousePosition({
className:'ol-mouse-pos',
coordinateFormat: ol.coordinate.createStringXY(4),
undefinedHTML:''
})
]),
view: new ol.View({
projection:'EPSG:4490',
center: [105.7486, 34.5813],
zoom: 14
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>WMTS</title>
</head>
<body>
<div id="map" class="map"></div>
</body>
</html>
.map{
width:100%;
height:100%
}