Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/467.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在HTMLSelectElement.onchange上未定义函数_Javascript_Html_Scale_Onchange_Openlayers 3 - Fatal编程技术网

Javascript 在HTMLSelectElement.onchange上未定义函数

Javascript 在HTMLSelectElement.onchange上未定义函数,javascript,html,scale,onchange,openlayers-3,Javascript,Html,Scale,Onchange,Openlayers 3,我正在Openlayers中做一个比例选择器。 我在一个HTML文件中测试了它,它可以正常工作。但现在我想把它放在一张用树面板设计的地图上。 我有一个HTML文件,其中有select标记: <select id="scalecombo" onchange="scaleCombo(this.value)"> <option value="50">50</option> <option valu

我正在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 在HTMLSelectElement.onchange”

我认为问题在于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行,就在“function scaleCombo(sel)”之前。

你能发布整个visor.js代码吗?如果我使用document.getElementById('scaleCombo')。addEventListener('change',scaleCombo,true),我会得到错误:Uncaught qa{消息:“断言失败。有关详细信息,请参阅。”,代码:32,名称:“AssertionError”}
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);
}
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
                ]
            },

        ]
    });



}