Ext与天地图的结合问题

最新推荐文章于 2024-03-08 11:44:25 发布

hustchenshu

最新推荐文章于 2024-03-08 11:44:25 发布

阅读量915

点赞数

分类专栏： EXT 天地图文章标签：地图 ext 天地图

本文链接：https://blog.csdn.net/dujiajiyiyi/article/details/51149261

版权

EXT 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

天地图

1 篇文章 0 订阅

订阅专栏

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

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

hustchenshu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ext与天地图的结合问题

在将天地图加入到控件中时出现以下问题：一：Tmap无法直接渲染到Panel中，因为TMap的构造方法中需要给定容器对象，而根据API只能是DIV对象那个，试了直接给panel的id，无法实现：最后使用panel的html属性实现：Ext.define('mappanel', { extend: 'Ext.panel.Panel', initComponent
复制链接

扫一扫