EXTJS-6.2.0示例-在Extjs裏使用openlayers加載OpenStreetMap地圖

時間 2019-12-21

標籤 extjs 6.2.0 示例使用 openlayers 加載 openstreetmap 地圖简体版

原文原文鏈接

在Extjs裏使用openlayers加載OpenStreetMap地圖

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>在Extjs裏使用openlayers加載OpenStreetMap地圖</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/extjs/6.2.0/ext-all.js"></script>
    <script src="https://cdn.bootcss.com/extjs/6.2.0/classic/theme-crisp/theme-crisp.js"></script>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.14.2/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.14.2/build/ol.js" type="text/javascript"></script>
</head>

<body>
<script>
    Ext.application({
        name: 'luter-openlayer-map-in-extjs',
        launch: function () {
            Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                items: [{ 
                    layout: 'fit',
                    title: '在Extjs裏使用openlayers加載OpenStreetMap地圖',
                    listeners: {
                        afterrender: function () {
                            var me = this,
                                osmLayer = new ol.layer.Tile({
                                    source: new ol.source.OSM()
                                }),
                                city = ol.proj.transform([116.41, 39.82], 'EPSG:4326', 'EPSG:3857'),
                                view = new ol.View({
                                    center: ol.proj.fromLonLat([116.41, 39.82]),
                                    zoom: 10
                                });

                            this.map = new ol.Map({
                                target: me.body.dom.id,
                                renderer: 'canvas',
                                layers: [osmLayer],
                                view: view
                            });

                        },
                        resize: function () {
                            this.map.updateSize();
                        }
                    }

                }]
            });
        }
    });

</script>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。