在将天地图加入到控件中时出现以下问题:
一:Tmap无法直接渲染到Panel中,因为TMap的构造方法中需要给定容器对象,而根据API只能是DIV对象那个,试了直接给panel的id,无法实现:
最后使用panel的html属性实现:
Ext.define('mappanel', {
extend: 'Ext.panel.Panel',
initComponent: function () {
Ext.apply(this, {
id: 'mappanel',
title: 'map',
html: "<iframe src='innerMap.html' width='100%' height='100%'></iframe>",
});
this.callParent(arguments);
}
})
当中的src指向定义好了Tmap的页面;
innerMap.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"> </script>
<script>
function onLoad() {
var config = {
projection: "EPSG:4326"
}
//初始化地图
map = new TMap("mapDiv", config);
//设置地图中心和缩放度
map.centerAndZoom(new TLngLat(103.84069, 36.06731), 16);
//设置双击放大
map.enableDoubleClickZoom();
//设置滚轮缩放
map.enableHandleMouseScroll();
//设置视野区域
//map.setBounds(new TBounds(90.00000,30.00000,105.00000,40.00000));
//启用连续缩放
map.enableContinuousZoom();
//设置地图类型为卫星图
//map.setMapType(TMAP_SATELLITE_MAP);
//向量图
//map.setMapType(TMAP_NORMAL_MAP);
//混合图
map.setMapType(TMAP_HYBRID_MAP);
//*******************************************平移缩放控件********************************************************************
var config = {
type: "TMAP_NAVIGATION_CONTROL_LARGE", //缩放平移的显示类型
anchor: "TMAP_ANCHOR_TOP_LEFT", //缩放平移控件显示的位置
offset: [20, 0], //缩放平移控件的偏移值
showZoomInfo: true //是否显示级别提示信息,true表示显示,false表示隐藏。
};
//创建缩放平移控件对象
control = new TNavigationControl(config);
//添加缩放平移控件
map.addControl(control);
//**************************************************比例尺控件*************************************************************
//创建比例尺控件对象
var scale = new TScaleControl();
//添加比例尺控件
map.addControl(scale);
//******************************************************鹰眼控件*********************************************************
var config = {
anchor: "TMAP_ANCHOR_BOTTOM_RIGHT", //设置鹰眼位置,"TMAP_ANCHOR_TOP_LEFT"表示左上,"TMAP_ANCHOR_TOP_RIGHT"表示右上,"TMAP_ANCHOR_BOTTOM_LEFT"表示左下,"TMAP_ANCHOR_BOTTOM_RIGHT"表示右下,"TMAP_ANCHOR_LEFT"表示左边,"TMAP_ANCHOR_TOP"表示上边,"TMAP_ANCHOR_RIGHT"表示右边,"TMAP_ANCHOR_BOTTOM"表示下边,"TMAP_ANCHOR_OFFSET"表示自定义位置,默认值为"TMAP_ANCHOR_BOTTOM_RIGHT"
size: new TSize(180, 120), //鹰眼显示的大小
isOpen: true //鹰眼是否打开,true表示打开,false表示关闭,默认为关闭
};
//创建鹰眼控件对象
overviewMap = new TOverviewMapControl(config);
//添加鹰眼控件
map.addControl(overviewMap);
//************************************************地图类型控件***************************************************************
//创建地图类型控件对象
var control = new TMapTypeControl();
//将地图类型控件添加到地图上
map.addControl(control);
//设置地图类型控件在地图上显示的位置,默认为在右侧,注:将控件加载到map之后再做此配置
control.setLeft(100);
control.setTop(10);
}
</script>
</head>
<body οnlοad="onLoad()">
<div id="mapDiv" style="position:absolute;left:0; top:0px; width:100%; height:100%"></div>
</body>
</html>
二:,根据上述方法却无法拿到map对象进行操作(我尝试了很久没有拿到,水平有限),最后解决方法是在panel的html中定义一个div,然后将map渲染到div中,这里要注意的map渲染的时机,必须是在整个panel布局完成后,否则会报错:然后可以通过window.map拿到map对象进行操作;
Ext.define('mappanel', {
extend: 'Ext.panel.Panel',
initComponent: function () {
Ext.apply(this, {
id: 'mappanel',
title: 'map',
//items:map,
//html: "<iframe src='../html/innerMap.html' width='100%' height='100%'></iframe>",
html: "<div id='mapDiv' style='position:absolute;left:0;top:0px;width:100%;height:100%'></div>",
listeners: {
afterlayout: function () {
onLoad();
}
}
});
this.callParent(arguments);
}
});
function onLoad() {
var config = {
projection: "EPSG:4326"
}
//初始化地图
map = new TMap("mapDiv", config);
//设置地图中心和缩放度
map.centerAndZoom(new TLngLat(103.84069, 36.06731), 16);
//设置双击放大
map.enableDoubleClickZoom();
//设置滚轮缩放
map.enableHandleMouseScroll();
//设置视野区域
//map.setBounds(new TBounds(90.00000,30.00000,105.00000,40.00000));
//启用连续缩放
//map.enableContinuousZoom();
//设置地图类型为卫星图
//map.setMapType(TMAP_SATELLITE_MAP);
//向量图
map.setMapType(TMAP_NORMAL_MAP);
//混合图
//map.setMapType(TMAP_HYBRID_MAP);
}