sjy-ecos/views/index.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 &copy <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') %>