天地图+GeoServer WMS图层样例
天地图+GeoServer WMS图层样例
样例代码
<script type=”text/javascript” language=”javascript” src=”http://api.tianditu.com/js/maps.js”></script>
<script>
var map;
var zoom = 5;
var wmsLayer;
function onLoad()
{
//初始化地图对象
map=new TMap(“mapDiv”);
//设置显示地图的中心点和级别
map.centerAndZoom(new TLngLat(-94.73142200000001,36.955967),zoom);
//允许鼠标滚轮缩放地图
map.enableHandleMouseScroll();
//设置地图显示为卫星
//map.setMapType(TMAP_SATELLITE_MAP);
//设置地图显示级别2-7
//map.setZoomLevels([3,4]);
//添加wms图层
addWMS();
}
var wmsLayer;
function addWMS() {
if(wmsLayer) {
map.removeLayer(wmsLayer);
}
var config = {
REQUEST:”GetMap”, //操作名称
VERSION:”1.1.0″, //请求服务的版本
SERVICE:”WMS“, //服务类型标识符
LAYERS:”topp:states“, //用”,”分隔的多个图层列表
TRANSPARENT:true, //输出图像背景是否透明
//STYLES:”default”, //每个请求图层的用”,”分隔的描述样式
FORMAT:”image/png”, //输出图像的类型
//SRS:”EPSG:4326″, //地图投影类型
SRS:map.getCode(), //地图投影类型
WIDTH:256, //输出地图图片的像素宽
HEIGHT:256 //输出地图图片的像素高
};
//创建WMS图层对象
wmsLayer = new TTileLayerWMS(“topp:states”, “http://192.168.0.XX:8080/geoserver/topp/wms”,config);
//将WMS图层添加到地图上
map.addLayer(wmsLayer);
}
</script>
<body onLoad=”onLoad()”>
<div id=”mapDiv” style=”position:absolute;width:100%; height:100%”></div>
</body>
说明：以上代码中geoserver wms图层样例为 geoserver自带样例。
测试过程中注意地图图层加载中心点和地图级别设置。
转载自：https://blog.csdn.net/ljg124034929/article/details/69697483
