OpenLayers3（一）初始化地图

惯例：OpenLayer API

引入文件

"init()">
"map">
"popup">
"mouse-position" class="mouse-position-wrapper">
    
"custom-mouse-position">

配置

tilesInfo.js

var outputPath='../tiles/';//瓦片图
var urlType='0';
var minZoom=0;//最小
var maxZoom=17;//最大
var centX=113.953162;//初始中心点
var centY=22.532701;//初始中心点
var format='.png';//图片后缀
var epsgCode='3857';
var tileSize=256;

初始化

app.js

var map, view;

function init(){
	var epsg = 'EPSG:' + epsgCode;
	var projection = ol.proj.get(epsg);
	var url = outputPath;
	if(urlType=="0"){
		url += "{z}/{x}/{y}" + format;
	}else if(urlType=="1"){
		url += "{z}/{y}/{x}" + format;}
	else if(urlType=="2"){
		url += "{z}/{x}/{x}_{y}" + format;
	}else if(urlType=="3"){
		url += "{z}/{x}/{-y}" + format;
}
// 初始化显示视图
view = new ol.View({
	center: ol.proj.transform([centX, centY], 'EPSG:4326', epsg),
	projection: projection,
	zoom: maxZoom,
	minZoom: minZoom
});
map = new ol.Map({
    target: 'map',
	controls: ol.control.defaults().extend([
		new ol.control.FullScreen(),
		new ol.control.OverviewMap(),
		new ol.control.ScaleLine(),
			coordinateFormat: ol.coordinate.createStringXY(6),
			projection: ol.proj.get('EPSG:4326'),
			className: 'custom-mouse-position',
			target: document.getElementById('mouse-position')
		}),
	]),
	layers: [
        new ol.layer.Tile({
			source: new ol.source.XYZ({
				minZoom: minZoom,
				maxZoom: maxZoom,
				projection: projection,
				tileSize: tileSize,
				url: url
			})
		})],
	loadTilesWhileAnimating: true,
	target: document.getElementById('map'),
	view: view
	});
}

成功