完整仓库这里
网站托管于此处
无论出于何种原因，我的鼠标向下偏移到了它应该悬停在地图盒地图内部的位置的右侧。它不排队。图像中的红点是我的鼠标所在的位置，带有弹出窗口的紫色点是鼠标“悬停”在其上方以进行选择的位置。它适用于地图上的所有元素，包括其他点图层和多边形图层。
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwdXNlcjAzIiwiYSI6ImNtMHpzYTFiZzAyd2cyanBrYWhpYXZsZ3gifQ.paRv0YlSRjmXUZKSMTjGEA';
const mymap = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v11',
projection: 'mercator',
center: [-122.32070, 47.61360],
zoom:10.79
});
mymap.on('load', () => {
mymap.addSource('income', {
type: 'geojson',
data: 'census_tracts_income_schools.geojson'
});
mymap.addSource('publicschools', {
type: 'geojson',
data: 'Public_Schools_Seattle.geojson'
});
mymap.addSource('privateschools', {
type: 'geojson',
data: 'Private_Schools_Seattle.geojson'
});
mymap.addLayer( {
id: 'income-layer',
type: 'fill',
source: 'income',
layout: {
'visibility': 'visible'
},
paint: {
'fill-color':['interpolate',['linear'],['get', 'B19301_per_capita_income_5YALL_B19301_001'],
24000, '#ffffcc',
50000, '#a1dab4',
75000, '#41b6c4',
100000, '#2c7fb8',
150000, '#253494'],
'fill-outline-color':'lightgrey'
}
});
mymap.addLayer( {
id: 'public-schools-layer',
type: 'circle',
source: 'publicschools',
layout: {
'visibility': 'visible'
},
paint: {
'circle-radius': 6,
'circle-color': "#ffaf0f",
'circle-stroke-width': 1,
'circle-stroke-color': 'white',
'circle-stroke-opacity': 0.6,
'circle-opacity': 0.9
}
});
mymap.addLayer( {
id: 'private-schools-layer',
type: 'circle',
source: 'privateschools',
layout: {
'visibility': 'visible'
},
paint: {
'circle-radius': 6,
'circle-color': "#cf10e0",
'circle-stroke-width': 1,
'circle-stroke-color': 'white',
'circle-stroke-opacity': 0.6,
'circle-opacity': 0.9
}
});
});
// Add click event for public schools
mymap.on('click', 'public-schools-layer', (event) => {
const features = event.features;
if (!features || !features.length) return;
const properties = features[0].properties;
// Create a popup and set its content
new mapboxgl.Popup()
.setLngLat(event.lngLat)
.setHTML(`
<h3 class="popup">Public School</h3>
<p class="popup"><strong>Name:</strong> ${properties.school_name || 'N/A'}</p>
<p class="popup"><strong>Address:</strong> ${properties.address || 'N/A'}</p>
<p class="popup"><strong>Grades:</strong> ${properties.grades || 'N/A'}</p>
`)
.addTo(mymap);
});
mymap.on('click', 'private-schools-layer', (event) => {
const features = event.features;
if (!features || !features.length) return;
const properties = features[0].properties;
// Create a popup and set its content
new mapboxgl.Popup()
.setLngLat(event.lngLat)
.setHTML(`
<h3 class="popup">Private School</h3>
<p class="popup"><strong>Name:</strong> ${properties.NAME || 'N/A'}</p>
<p class="popup"><strong>Address:</strong> ${properties.SCHOOL_STREET_ADDRESS || 'N/A'}</p>
<p class="popup"><strong>Profit/Nonprofit:</strong> ${properties.FOR_PROFIT_OR_NON_PROFIT || 'N/A'}</p>
`)
.addTo(mymap);
});
我确保我的数据在 QGIS 中的 Mapbox Mercator (EPSG:3857) 中处于正确的投影中。似乎没有改变什么。不知道还有什么可能。
try
{
saldo = Convert.ToDouble(txbSaldo.Text);
}
catch
{
MessageBox.Show("Het ingevoerde saldo is niet correct.");
saldo = 0;
}
finally
{
txblStandRekening.Text = "Saldo = " + saldo;
txblStandRekening.Text += "\nRekeningnummer = " + rekeningnummer;
txblStandRekening.Text += "\nEigenaar = " + eigenaar;
}
}
private void btnRekeningnummer_Click(object sender, RoutedEventArgs e)
{
try
{
rekeningnummer = txbRekeningnummer.Text;
}
catch
{
MessageBox.Show("Het ingevoerde rekeningnummer is niet correct.");
rekeningnummer = "";
}
finally
{
txblStandRekening.Text = "Saldo = " + saldo;
txblStandRekening.Text += "\nRekeningnummer = " + rekeningnummer;
txblStandRekening.Text += "\nEigenaar = " + eigenaar;
}
}
private void btnNaamEigenaar_Click(object sender, RoutedEventArgs e)
{
try
{
eigenaar = txbNaamEigenaar.Text;
}
catch
{
MessageBox.Show("Het ingevoerde eigenaar is niet correct.");
eigenaar = "";
}
finally
{
txblStandRekening.Text = "Saldo = " + saldo;
txblStandRekening.Text += "\nRekeningnummer = " + rekeningnummer;
txblStandRekening.Text += "\nEigenaar = " + eigenaar;
}
}
private void btnStort_Click(object sender, RoutedEventArgs e)
{
//Het saldo kan nooit negatief zijn en een storting kan maximal 2500 euro per keer bedragen.
try
{
double storting = Convert.ToDouble(txbBedragStorting.Text);
if (storting > 2500)
{
throw new MaximumAmountException("Het bedrag mag niet groter zijn dan 2500€");
}
saldo += storting;
}
catch(MaximumAmountException ex)
{
MessageBox.Show(ex.Message,"Error",MessageBoxButton.OK, MessageBoxImage.Error);
}
catch(FormatException ex)
{
MessageBox.Show("Het formaat van het storingsbedrag was fout\n"+ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
}
finally
{
txblStandRekening.Text = "Saldo = " + saldo;
txblStandRekening.Text += "\nRekeningnummer = " + rekeningnummer;
txblStandRekening.Text += "\nEigenaar = " + eigenaar;
}
}
private void btnBedragOpname_Click(object sender, RoutedEventArgs e)
{
//Het saldo kan nooit negatief zijn en een storting kan maximal 2500 euro per keer bedragen.
try
{
double opname = Convert.ToDouble(txbBedragOpname.Text);
if ((saldo-opname) < 0 )
{
throw new MaximumAmountException("U kan niet zoveel opnemen. Het saldo zal hierdoor negatief worden");
}
saldo -= opname;
}
catch (MaximumAmountException ex)
{
MessageBox.Show(ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
}
catch (FormatException ex)
{
MessageBox.Show("Het formaat van het opnamebedrag was fout\n" + ex.Message, "Error", MessageBoxButton.OK, MessageBoxImage.Error);
}
finally
{
txblStandRekening.Text = "Saldo = " + saldo;
txblStandRekening.Text += "\nRekeningnummer = " + rekeningnummer;
txblStandRekening.Text += "\nEigenaar = " + eigenaar;
}
}
}
}