實例代碼 .js
// Using Leaflet for creating the map and adding controls for interacting with the map
//
//--- Part 1: adding base maps ---
//
//creating the map; defining the location in the center of the map (geographic coords) and the zoom level. These are properties of the leaflet map object
//the map window has been given the id 'map' in the .html file
var map = L.map('map', {
center: [22, 100.5],
zoom: 9
});
//adding two base maps
var landscape = L.tileLayer('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png', {
attribution: 'Tiles from Thunderforest'});
var toner = L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>' });
//toner.addTo(map);
var esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
maxZoom: 16
});
esri.addTo(map);
// for using the two base maps in the layer control, I defined a baseMaps variable
var baseMaps = {
"Thunderforest landscape": landscape,
"Toner": toner,
"ESRI":esri,
}
//
//---- Part 2: Adding a scale bar
//
L.control.scale({imperial:false, position:'bottomright'}).addTo(map);
//
//---- Part 3: Adding symbols ----
//
//Marker for Nanjing
var nanjingmark = L.marker([32, 118]).addTo(map).bindPopup("Welcome in Nanjing!");
//Marker for XiShuang
var xishuang = L.marker([22, 100]).addTo(map).bindPopup("Welcome in XiShuangBanNa!");
//Marker Version 1
L.marker([47, 14], {title:'marker1', clickable:true}).addTo(map).bindPopup("newpopup");
//Marker Version 2
var mark = L.marker([47, 12], {title:'marker2', clickable:true}).addTo(map);
mark.bindPopup("this is my popup");
//Marker Version 3
var myIcon = L.icon({
iconUrl: 'css/images/house.gif',
iconSize: [38, 38]
});
L.marker([48, 13], {icon: myIcon, title:'theHouse'}).addTo(map);
//
//---- Part 4: adding line features from a geojson file
//
//adding a GeoJSON line feature set
/*var riverStyle = {
"color": "#0000ff",
"weight": 4
}
var Salzach = {
"type": "FeatureCollection",
"name": "Salzach",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "fclass": "river", "name": "ccccccccccccccccccccccc" }, "geometry": { "type": "LineString", "coordinates": [ [ 13.07500358474767, 47.771060447781515 ], [ 13.075013399948512, 47.771125900439991 ], [ 13.075260899670811, 47.77419599974565 ], [ 13.07620599990703, 47.781888299605413 ], [ 13.076156399598247, 47.782621499782451 ], [ 13.076066399944473, 47.783126800061837 ], [ 13.075875900152727, 47.783593700189165 ], [ 13.075733100402314, 47.783899500261782 ], [ 13.075565199674267, 47.784190400366775 ], [ 13.075280899693833, 47.784605399719474 ], [ 13.075085500395568, 47.784856799801496 ], [ 13.074829299732485, 47.785133100312414 ], [ 13.074457199839967, 47.785472800329522 ], [ 13.07362470011986, 47.786201899598055 ], [ 13.068901899603024, 47.790065799896809 ], [ 13.068606500189915, 47.790250999983705 ], [ 13.06772729957526, 47.790802000212203 ], [ 13.057675600448663, 47.796309999706772 ], [ 13.056131299919651, 47.797083799777567 ], [ 13.054557700377641, 47.797838300397309 ], [ 13.052922800347021, 47.798554399965667 ], [ 13.051154000256942, 47.799195999695655 ], [ 13.044678400387912, 47.800950200191664 ], [ 13.042963299716575, 47.801421099604141 ], [ 13.041183699668087, 47.802115100131807 ], [ 13.040382699601931, 47.802533300171746 ], [ 13.039653499609365, 47.80300640022525 ], [ 13.039049100335797, 47.803571099826478 ], [ 13.038522600337801, 47.804172099662701 ], [ 13.037855299782333, 47.805258299930642 ], [ 13.03732250003338, 47.806346299742053 ], [ 13.036808700261355, 47.807552799622052 ], [ 13.036595999805568, 47.80846790027347 ], [ 13.03651310029937, 47.809229500141413 ], [ 13.036630600321994, 47.810078399898323 ], [ 13.036746499551398, 47.811761300343818 ], [ 13.036760000173901, 47.813031299554893 ], [ 13.036737099837341, 47.814230299988431 ], [ 13.036476300041281, 47.815385200366748 ], [ 13.035133099612915, 47.819709499593785 ], [ 13.034261400243448, 47.821350399901071 ], [ 13.034231399759332, 47.821406999633375 ], [ 13.033676800444043, 47.822451000113638 ], [ 13.032577800125413, 47.82451979964906 ], [ 13.032126999661331, 47.8253421999826 ], [ 13.031282500287201, 47.826546299572101 ], [ 13.028609400403587, 47.830458899958337 ], [ 13.026853199815376, 47.832453599853821 ], [ 13.025011800154536, 47.834197799888635 ], [ 13.01760349990168, 47.840708799771335 ], [ 13.013508699566922, 47.844180500329884 ], [ 13.011951974004436, 47.845497340729779 ] ] } }
]
}
//the variable federalstateSBG is created in the Federalstates.js file
var river = L.geoJson(Salzach, {style: riverStyle});
var river= L.geoJson(Salzach, {
style: riverStyle,
onEachFeature: function (feature, layer) {
layer.bindPopup('Salzach river' );
}
});
*/
//
//---- Part 5: Adding GeoJSON Point Features
//
//
//---- Adding GeoJSON point features - to marker object
//
/*
var summitsJson = {
"type":"FeatureCollection",
"features":[{"type":"Feature","properties":{"NAME":"Kreuzkogel","HEIGHT":2027},"geometry":{"type":"Point","coordinates":[13.153268433907614,47.22421002245328]}},
{"type":"Feature","properties":{"NAME":"Fulseck","HEIGHT":2034},"geometry":{"type":"Point","coordinates":[13.147417093794559,47.23423788545316]}},
{"type":"Feature","properties":{"NAME":"Kieserl","HEIGHT":1953},"geometry":{"type":"Point","coordinates":[13.152967420479607,47.24300413792524]}}]};
var summits = L.geoJson(summitsJson, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {icon: myIconsummit});
},
onEachFeature: function(feature, marker) {
marker.bindPopup("my text about: " +feature.properties.NAME + " at location: " + marker.getLatLng());
}
});
summits.addTo(map);
*/
var myIconsummit = L.icon({
iconUrl: 'css/images/Summit.png',
iconSize: [18, 18],
});
var point1= L.geoJson(po, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {icon: myIconsummit});
},
onEachFeature: function(feature, marker) {
marker.bindPopup("djs " +feature.properties.NAME+ " at location: " + marker.getLatLng());
}
});
//
//---- Part 6: Adding a click event to our map
//
//when you click in the map, an alert with the latitude and longitude coordinates of the click location is shown
// e is the event object that is created on mouse click
//add latitude and langititude
/*map.addEventListener('click', function(e) {
alert(e.latlng);
});
//the same functionality can be realized with reference to the function onClick
//definition of the function onClick
function onClick(evt){
alert(evt.latlng);
}
map.addEventListener('click', onClick);
*/
//
//---- Part 7: Adding interactive features to GeoJSON Polygons
//
//adding a GeoJSON polygon feature set
var myStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.5,
"fillOpacity":0.2
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
/*var fedstate = L.geoJson(federalstateSBG, {
style: myStyle,
onEachFeature: function (feature, layer) {
layer.on({click: zoomToFeature}); }
}).addTo(map);
*/
var xishuang = L.geoJson(xishuangSBG, {
style: myStyle,
onEachFeature: function (feature, layer) {
layer.on({click: zoomToFeature}); }
}).addTo(map);
var forest = L.geoJson(forestSBG, {
style: myStyle,
onEachFeature: function (feature, layer) {
layer.on({click: zoomToFeature}); }
}).addTo(map);
//
//---- Part 8: Adding combined interactive features to GeoJSON Polygons
//
function highlightFeature(e) {
var activefeature = e.target; //access to activefeature that was hovered over through e.target
activefeature.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
activefeature.bringToFront();
}
}
//function for resetting the highlight
function resetHighlight(e) {
xishuang.resetStyle(e.target);
}
function resetHighlight(e) {
forest.resetStyle(e.target);
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
//to call these methods we need to add listeners to our features
//the word on is a short version of addEventListener
function interactiveFunction(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature,
click: layer.bindPopup('This is the wild elephant valley tourist area'+feature.properties.images)
} );
}
function interactivepoly(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: layer.bindPopup('Here tropical deciduous broad-leaved forest and tropical evergreen broad-leaved forest'+feature.properties.images)
} );
}
forest = L.geoJson(forestSBG, {
style: myStyle,
onEachFeature: interactivepoly
}).addTo(map);
var myStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.65
}
/*fedstate = L.geoJson(federalstateSBG, {
style: myStyle,
onEachFeature: interactiveFunction
}).addTo(map);
forest = L.geoJson(forestSBG, {
style: myStyle,
onEachFeature: interactiveFunction
}).addTo(map);
*/
xishuang = L.geoJson(xishuangSBG, {
style: myStyle,
onEachFeature: interactiveFunction
}).addTo(map);
/*var yun = L.geoJson(yun, {
style: myStyle,
onEachFeature: interactiveFunction
}).addTo(map);
*/
//var riverStyle = {
// "color": "#0000ff",
//"weight": 4
//}
/*
//the variable federalstateSBG is created in the Federalstates.js file
var river = L.geoJson(Salzach, {style: riverStyle});
*/
/*
var river= L.geoJson(Salzach, {
style: riverStyle,
onEachFeature: function (feature, layer) {
layer.bindPopup( 'ffffff' + feature.properties.name );
}
});
river.addTo(map);
*/
//
//---- Part 9: Adding a layer control for base maps and feature layers
//
//the variable features lists layers that I want to control with the layer control
var features = {
"Marker 2": mark,
//"river": river,
//"Salzburg": fedstate,
//"Summits": summits,
"Xishuang":xishuang,
"Forest": forest,
//"yunnan": yun
//"boundary": boundary
//"point2": point1
}
//the legend uses the layer control with entries for the base maps and two of the layers we added
//in case either base maps or features are not used in the layer control, the respective element in the properties is null
var legend = L.control.layers(baseMaps,features, {position:'topleft', collapsed:true}).addTo(map);
|
QQ好友和群
QQ空間
騰訊微博
騰訊朋友
收藏
淘帖
頂
踩
