Ext与天地图的结合问题

来源：互联网发布：多益网络概念股编辑：程序博客网时间：2024/05/03 21:30

在将天地图加入到控件中时出现以下问题：

一：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 onload="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);
}

0 0