Question

我在Openlayers中做了一个缩放选择器。我已在单个HTML文件中对其进行了测试，但它确实有效。但现在我想把它放在一个用树形图设计的地图中。我有一个HTML文件，我有select标签：

        <select id="scalecombo" onchange="scaleCombo(this.value)">
            <option value="50">50</option>
            <option value="66.57305752688175">67</option>
            <option value="100">100</option>
            <option value="150">150</option>
        </select>

在此之后，我调用了我具有scaleCombo函数的文件：

<script>
        Ext.Loader.setConfig({
            enabled: true,
            paths: {'GeoExt': 'geoext3/src'}
        });

        //Definición de la proyección ESPG:25830//
        var myprojname='EPSG:25830';
        proj4.defs(myprojname, "+proj=utm +zone=30 +elips=GRS80 +units=m +no_defs");
        var myprojection = ol.proj.get(myprojname);
</script>
<script src="visor.js"></script>
<script src="js/layers.js"></script>

就在身体末端的标签之前。

在文件＆＃34; visor.js＆＃34;是map和scaleCombo函数的定义：

function scaleCombo(sel) {
     var units = view.getProjection().getUnits();
     var dpi = 25.4 / 0.28;
     var mpu = ol.proj.METERS_PER_UNIT[units];
     var scale = sel.value;
     var resolution = scale / mpu / 39.37 / dpi;
     view.setResolution(resolution);
}

显示的错误是：＆＃34;未捕获的ReferenceError：未定义scaleCombo 在HTMLSelectElement.onchange＆＃34;。

我认为问题是select onchange标记查找scaleCombo函数并且它找不到它，因为函数的调用在select标记之后，但该函数需要view.getProjection（）。 getUnits（）。有什么方法可以避免这种情况吗？

visor.js的代码是：

Ext.require([
  'GeoExt.component.Map',
  'GeoExt.data.store.LayersTree'
]);

 var mapComponent;
 var mapPanel;
 var treePanel;



Ext.application({
  name: 'BasicTree',
  launch: function() {

    var olMap;
    var treeStore;

    cargarnomen();

    olMap = new ol.Map({
        layers: [layerorto2016gv, layerlim, layerwfsnomen],
        controls: ol.control.defaults({ 
            attribution: false 
            }).extend([
                attribution,
                //Define the default controls
                new ol.control.Zoom(),
                new ol.control.MousePosition({
                    coordinateFormat: function (coordinates) {
                        var coord_x = coordinates[0].toFixed(3);
                        var coord_y = coordinates[1].toFixed(3);
                        return 'ETRS89 UTM30: ' + coord_x + ', ' + coord_y;
                    },
                    projection: 'EPSG:25830',

                }),
            ]),
            view: new ol.View({
                center: ol.proj.transform([-2.90, 43.015], 'EPSG:4326', myprojname),
                projection: myprojection,
                zoom: 12
            })

    });


    /*Código del selector de escalas*/
    /*Escala actual del mapa*/
    var view = olMap.getView();
    var resolution = view.getResolution();
    var units = view.getProjection().getUnits();
    var dpi = 25.4 / 0.28;
    var mpu = ol.proj.METERS_PER_UNIT[units];
    var scale = resolution * mpu * 39.37 * dpi;

    /*Si la vista se modifica, calcula la nueva escala y la muestra*/
    olMap.getView().on('change:resolution', function (evt) {
        var resolution = evt.target.get('resolution');

        var units = view.getProjection().getUnits();
        var dpi = 25.4 / 0.28;
        var mpu = ol.proj.METERS_PER_UNIT[units];
        var scale = resolution * mpu * 39.37 * dpi;
        console.log(scale);
        var element = document.getElementById('scalecombo');
        element.value = scale;
        scale = Math.round(scale) ;

        document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
    });


    document.getElementById('scalecombo').addEventListener('change', scaleCombo, true)      
    function scaleCombo(sel) {
        var units = view.getProjection().getUnits();
        var dpi = 25.4 / 0.28;
        var mpu = ol.proj.METERS_PER_UNIT[units];
        var scale = sel.value;
        var resolution = scale / mpu / 39.37 / dpi;

        view.setResolution(resolution);
    }


    /*Creación de los paneles y del mapa*/
    mapComponent = Ext.create('GeoExt.component.Map', {
        map: olMap
    });

    mapPanel = Ext.create('Ext.panel.Panel', {
        region: 'center',
        border: false,
        layout: 'fit',
        items: [mapComponent]
    });


    treeStore = Ext.create('GeoExt.data.store.LayersTree', {
        layerGroup: olMap.getLayerGroup()
    });

    treePanel = Ext.create('Ext.tree.Panel', {
        title: 'CAPAS',
        viewConfig: {
            plugins: {ptype: 'treeviewdragdrop'}
        },
        store: treeStore,
        rootVisible: false,
        flex: 1,
        border: false

    });

    var MainViewport = new Ext.Viewport ({
        layout: 'border',
        items: [ 
            mapPanel,

            {
                xtype: 'panel',
                region: 'east',
                width: 400,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [
                    treePanel,
                    map
                ]
            },

        ]
    });



}

}）;

我更改了第74行，就在＆＃34;功能scaleCombo（sel）＆＃34;

之前

函数未在HTMLSelectElement.onchange中定义

0 个答案: