openlayers代码:
<!DOCTYPE html>
<html>
<head>
<title>地图页</title>
<meta http-equiv="Content-Type" type="text/html" charset="utf-8">
<!--引入ol自带样式-->
<link href="ol.css" rel="stylesheet" type="text/css" />
<!--引入自定义样式,控制左上角缩放滑块样式-->
<link href="controlCSS.css" rel = "stylesheet" type = "text/css"/>
<!--引入OpenLayers核心库,发布版需替换为 ol.js-->
<script src="ol-debug.js" type="text/javascript"></script>
<script type="text/javascript">
var zoomSlider = new ol.control.ZoomSlider();
var zoomToExtent = new ol.control.ZoomToExtent({
extent: [
13100000, 4290000,
13200000, 5210000
]
});
var layer_tile=new ol.layer.Tile({
//图层对应的数据源,此处为加载OSM在线瓦片服务数据
source: new ol.source.OSM()
});
var map_view=new ol.View({
center: [0, 0], //地图初始中心点
zoom: 2 //地图初始显示级别
});
var OSM_Layer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: '*****mapserv',
params: {
'LAYERS' : 'ChinaBoundaries' ,
'mode' : 'map',
'map' : 'D:/ms4w/MyMapFile/myMap.map',
'FORMAT' : 'image/png',
'TILED' : 'true'
},
serverType : 'mapserver'
})
});
function init(){
//实例化Map对象用于加载地图
var map = new ol.Map({
target: 'map', //地图容器div的id
//在地图容器中加载的图层
layers: [layer_tile],//加载瓦片图层数据
//地图视图设置
view: map_view
});
//实例化ZoomSlider控件并加载到地图容器中
map.addControl(zoomSlider);
//实例化ZoomToExtent控件并加载到地图容器中
map.addControl(zoomToExtent);
map.addLayer(OSM_Layer);
}
</script>
</head>
<body onload="init()" style="width: 100%; height: 100%;">
<div id="map"> </div>
</body>
</html>
Map文件
MAP
NAME "sample"
STATUS ON
SIZE 900 400
SYMBOLSET "../apps/etc/symbols.txt"
EXTENT 72 0 146 66
UNITS DD
SHAPEPATH "../myData"
IMAGECOLOR 128 128 255
FONTSET "../apps/etc/fonts.txt"
IMAGETYPE "png"
SIZE 512 512
#PROJECTION
# "init=epsg:3857"
#END #PROJECTION END
#
# Start of web interface definition
#
WEB
IMAGEPATH "/ms4w/tmp/ms_tmp/"
IMAGEURL "/ms_tmp/"
METADATA
"wms_title" "China Map"
"wms_onlineresource" "http://localhost/cgi-bin/mapserv.exe?"
"Wfs_abstract" "get_features"
"wfs_enable_request" "*"
END #end of the matedata
END # WEB
#
# Start of layer definitions
#
LAYER
NAME "global-raster"
TYPE RASTER
STATUS DEFAULT
DATA world.tif
END # LAYER
#
# Start of layer ChinaBoundaries
#
LAYER
NAME "ChinaBoundaries"
TYPE POLYGON
STATUS ON
DATA chinashp.shp
CLASS
NAME "ClassChinaBoundaries"
STYLE
OUTLINECOLOR 255 0 0
END # STYLE
END # CLASS
END # LAYER
END # MAP