EXTJS-6.2.0示例-在Extjs里运用openlayers加载OpenStreetMap舆图

2023年4月8日 195次阅读 来源: 差点笨死

在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>
    原文作者：差点笨死
    原文地址: https://segmentfault.com/a/1190000012980098
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞