133 lines
3.1 KiB
HTML
133 lines
3.1 KiB
HTML
<%- include('comm/header.html') %>
|
|
<div class="container">
|
|
<div class="row row-grid">
|
|
<div class="col-md-12 col-xs-12">
|
|
<div id="map"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row row-grid">
|
|
<div class="col-md-12 col-xs-12">
|
|
<span class="alert alert-success">原始监测数据</span>
|
|
<span class="alert alert-success">原始监测数据</span>
|
|
<span class="alert alert-success">评价指标数据</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
var base_OSM_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: ''
|
|
});
|
|
|
|
var base_map = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
maxZoom: 18
|
|
});
|
|
|
|
var base_TDT_map_Annotion = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
|
|
errorTileUrl: '/lib/leaflet/images/none.png',
|
|
attribution: 'tile © <a href="http://www.tianditu.com">tianditu</a> '
|
|
});
|
|
|
|
var over_TDT_map_Annotion = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
|
|
errorTileUrl: '/lib/leaflet/images/none.png',
|
|
attribution: ''
|
|
});
|
|
|
|
var over_geojson_sjy_bound_2nd = new L.GeoJSON.AJAX("/json/sjy_bound_2nd.geojson", {
|
|
style: {
|
|
"color": "#de950d",
|
|
"weight": 2,
|
|
"opacity": 1,
|
|
"fillOpacity": 0
|
|
}
|
|
});
|
|
|
|
var over_geojson_a = new L.GeoJSON.AJAX("/json/grass.geojson", {
|
|
pointToLayer: function (feature, latlng) {
|
|
return L.circleMarker(latlng, {
|
|
radius: 4,
|
|
fillColor: "#0aff3c",
|
|
color: "#000",
|
|
weight: 1,
|
|
opacity: 1,
|
|
fillOpacity: 0.8
|
|
})
|
|
},
|
|
onEachFeature: onEachFeature
|
|
});
|
|
var over_geojson_b = new L.GeoJSON.AJAX("/json/soil.geojson", {
|
|
pointToLayer: function (feature, latlng) {
|
|
return L.circleMarker(latlng, {
|
|
radius: 4,
|
|
fillColor: "#ffef3a",
|
|
color: "#000",
|
|
weight: 1,
|
|
opacity: 1,
|
|
fillOpacity: 0.8
|
|
})
|
|
},
|
|
onEachFeature: onEachFeature
|
|
});
|
|
var over_geojson_c = new L.GeoJSON.AJAX("/json/comp.geojson", {
|
|
pointToLayer: function (feature, latlng) {
|
|
return L.circleMarker(latlng, {
|
|
radius: 4,
|
|
fillColor: "#FFC124",
|
|
color: "#000",
|
|
weight: 1,
|
|
opacity: 1,
|
|
fillOpacity: 0.8
|
|
})
|
|
},
|
|
onEachFeature: onEachFeature
|
|
});
|
|
|
|
var baseLayers = {
|
|
"base_map": base_map,
|
|
"base_OSM_Mapnik": base_OSM_Mapnik
|
|
};
|
|
|
|
var overLayers = {
|
|
"地名": over_TDT_map_Annotion,
|
|
"sjy_bound_2nd": over_geojson_sjy_bound_2nd
|
|
};
|
|
|
|
var map = L.map('map', {
|
|
layers: [
|
|
base_map,
|
|
over_geojson_a,
|
|
over_geojson_b,
|
|
over_geojson_c,
|
|
over_geojson_sjy_bound_2nd
|
|
],
|
|
minZoom: 6,
|
|
maxZoom: 17,
|
|
zoomIn: 1,
|
|
zoomOut: 1,
|
|
zoomControl: false
|
|
}).setView([34, 96], 6);
|
|
|
|
// L.control.layers(baseLayers, overLayers).addTo(map);
|
|
|
|
var bounds = new L.LatLngBounds(new L.LatLng(31, 103), new L.LatLng(38, 89));
|
|
map.fitBounds(bounds);
|
|
console.log(map.getBounds());
|
|
|
|
function onEachFeature(feature, layer) {
|
|
var out = [];
|
|
if (feature.properties) {
|
|
for (var key in feature.properties) {
|
|
out.push(key + ": " + feature.properties[key]);
|
|
}
|
|
}
|
|
layer.bindPopup(out.join("<br />"));
|
|
}
|
|
|
|
$(function () {
|
|
|
|
});
|
|
</script>
|
|
<%- include('comm/footer.html') %> |