Javascript 在HTMLSelectElement.onchange上未定义函数
我正在Openlayers中做一个比例选择器。 我在一个HTML文件中测试了它,它可以正常工作。但现在我想把它放在一张用树面板设计的地图上。 我有一个HTML文件,其中有select标记: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
<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
]
},
]
});
}