Cui Xin
parent
93037ea566
commit
12d9011d22
|
|
@ -6,11 +6,14 @@ $this->headLink()->appendStylesheet('/js/lib/openlayers/ol.css');
|
|||
$this->headLink()->appendStylesheet('/css/map.css');
|
||||
$this->headScript()->appendFile('/js/lib/openlayers/ol.js');
|
||||
$this->headScript()->appendFile('/js/lib/openlayers/ol-layerswitcher.js');
|
||||
$this->nav[] = array('link'=>"/data/landuse",'title'=>'三江源土地利用地图');
|
||||
$this->nav[] = array(
|
||||
'link' => "/data/landuse",
|
||||
'title' => '三江源土地利用地图'
|
||||
);
|
||||
?>
|
||||
<?= $this->render('breadcrumbs.phtml') ?>
|
||||
<div class="row">
|
||||
|
||||
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
|
|
@ -27,7 +30,7 @@ $this->nav[] = array('link'=>"/data/landuse",'title'=>'三江源土地利用地
|
|||
var resolutions = new Array(19);
|
||||
var matrixIds = new Array(19);
|
||||
var mapExtentQH = [89.3, 31.5, 102.3, 36.3];
|
||||
var myextent=ol.proj.transformExtent(mapExtentQH, "EPSG:4326", "EPSG:3857");
|
||||
var myextent = ol.proj.transformExtent(mapExtentQH, "EPSG:4326", "EPSG:3857");
|
||||
|
||||
var res = 156543.03392804096153584694438047;
|
||||
for (var z = 1; z <= 19; z++) {
|
||||
|
|
@ -36,8 +39,60 @@ $this->nav[] = array('link'=>"/data/landuse",'title'=>'三江源土地利用地
|
|||
resolutions[z - 1] = res;
|
||||
}
|
||||
|
||||
var normalStyle = new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 4,
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(239,58,0, 0.3)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(239,58,0, 0.8)',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
});
|
||||
var selectedStyle = new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 40,
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(39,100,150, 0.3)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgba(39,100,150, 0.8)',
|
||||
width: 3
|
||||
})
|
||||
})
|
||||
});
|
||||
var selectedTextStyleFunction = function (name) {
|
||||
return new ol.style.Style({
|
||||
text: new ol.style.Text({
|
||||
font: '14px sans-serif',
|
||||
text: name,
|
||||
fill: new ol.style.Fill({
|
||||
color: '#000'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#fff',
|
||||
width: 2
|
||||
})
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
var geojsonSource = new ol.source.GeoJSON({
|
||||
url: '/json/water_site.json',
|
||||
projection: 'EPSG:3857'
|
||||
});
|
||||
|
||||
vectorLayer = new ol.layer.Vector({
|
||||
title: '水土站',
|
||||
source: geojsonSource,
|
||||
style: normalStyle
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
|
||||
new ol.layer.Group({
|
||||
'title': '基础层',
|
||||
layers: [
|
||||
|
|
@ -131,11 +186,22 @@ $this->nav[] = array('link'=>"/data/landuse",'title'=>'三江源土地利用地
|
|||
new ol.layer.Group({
|
||||
title: '年份',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
title: '2013年',
|
||||
visible: false,
|
||||
opacity: 0.6,
|
||||
extent: myextent,
|
||||
source: new ol.source.XYZ({
|
||||
extent: mapExtentQH,
|
||||
url: 'http://qherc.sanjiangyuan.org.cn/tile/landuse2013/{z}/{x}/{y}.png'
|
||||
})
|
||||
}),
|
||||
|
||||
new ol.layer.Tile({
|
||||
title: '2012年',
|
||||
visible: false,
|
||||
opacity: 0.6,
|
||||
extent:myextent,
|
||||
extent: myextent,
|
||||
source: new ol.source.XYZ({
|
||||
extent: mapExtentQH,
|
||||
url: 'http://qherc.sanjiangyuan.org.cn/tile/landuse2012/{z}/{x}/{y}.png'
|
||||
|
|
@ -146,7 +212,7 @@ $this->nav[] = array('link'=>"/data/landuse",'title'=>'三江源土地利用地
|
|||
title: '2011年',
|
||||
visible: false,
|
||||
opacity: 0.6,
|
||||
extent:myextent,
|
||||
extent: myextent,
|
||||
source: new ol.source.XYZ({
|
||||
extent: mapExtentQH,
|
||||
url: 'http://qherc.sanjiangyuan.org.cn/tile/landuse2011/{z}/{x}/{y}.png'
|
||||
|
|
@ -157,7 +223,7 @@ $this->nav[] = array('link'=>"/data/landuse",'title'=>'三江源土地利用地
|
|||
title: '2010年',
|
||||
visible: false,
|
||||
opacity: 0.6,
|
||||
extent:myextent,
|
||||
extent: myextent,
|
||||
source: new ol.source.XYZ({
|
||||
extent: mapExtentQH,
|
||||
url: 'http://qherc.sanjiangyuan.org.cn/tile/landuse2010/{z}/{x}/{y}.png'
|
||||
|
|
@ -168,7 +234,7 @@ $this->nav[] = array('link'=>"/data/landuse",'title'=>'三江源土地利用地
|
|||
title: '2009年',
|
||||
visible: false,
|
||||
opacity: 0.6,
|
||||
extent:myextent,
|
||||
extent: myextent,
|
||||
source: new ol.source.XYZ({
|
||||
extent: mapExtentQH,
|
||||
url: 'http://qherc.sanjiangyuan.org.cn/tile/landuse2009/{z}/{x}/{y}.png'
|
||||
|
|
@ -179,7 +245,7 @@ $this->nav[] = array('link'=>"/data/landuse",'title'=>'三江源土地利用地
|
|||
title: '2008年',
|
||||
visible: false,
|
||||
opacity: 0.6,
|
||||
extent:myextent,
|
||||
extent: myextent,
|
||||
source: new ol.source.XYZ({
|
||||
extent: mapExtentQH,
|
||||
url: 'http://qherc.sanjiangyuan.org.cn/tile/landuse2008/{z}/{x}/{y}.png'
|
||||
|
|
@ -190,7 +256,7 @@ $this->nav[] = array('link'=>"/data/landuse",'title'=>'三江源土地利用地
|
|||
title: '2007年',
|
||||
visible: false,
|
||||
opacity: 0.6,
|
||||
extent:myextent,
|
||||
extent: myextent,
|
||||
source: new ol.source.XYZ({
|
||||
extent: mapExtentQH,
|
||||
url: 'http://qherc.sanjiangyuan.org.cn/tile/landuse2007/{z}/{x}/{y}.png'
|
||||
|
|
@ -200,7 +266,7 @@ $this->nav[] = array('link'=>"/data/landuse",'title'=>'三江源土地利用地
|
|||
new ol.layer.Tile({
|
||||
title: '2006年',
|
||||
opacity: 0.6,
|
||||
extent:myextent,
|
||||
extent: myextent,
|
||||
source: new ol.source.XYZ({
|
||||
extent: mapExtentQH,
|
||||
url: 'http://qherc.sanjiangyuan.org.cn/tile/landuse2006/{z}/{x}/{y}.png'
|
||||
|
|
@ -210,14 +276,21 @@ $this->nav[] = array('link'=>"/data/landuse",'title'=>'三江源土地利用地
|
|||
title: '2005年',
|
||||
visible: false,
|
||||
opacity: 0.6,
|
||||
extent:myextent,
|
||||
extent: myextent,
|
||||
source: new ol.source.XYZ({
|
||||
extent: mapExtentQH,
|
||||
url: 'http://qherc.sanjiangyuan.org.cn/tile/landuse2005/{z}/{x}/{y}.png'
|
||||
})
|
||||
})
|
||||
]
|
||||
})
|
||||
}),
|
||||
|
||||
new ol.layer.Group({
|
||||
title: '站点',
|
||||
layers: [
|
||||
vectorLayer
|
||||
]
|
||||
}),
|
||||
],
|
||||
|
||||
target: 'map',
|
||||
|
|
@ -244,6 +317,29 @@ $this->nav[] = array('link'=>"/data/landuse",'title'=>'三江源土地利用地
|
|||
});
|
||||
map.addControl(layerSwitcher);
|
||||
|
||||
var selectedFeatures = [];
|
||||
|
||||
// Unselect previous selected features
|
||||
function unselectPreviousFeatures() {
|
||||
var i;
|
||||
for (i = 0; i < selectedFeatures.length; i++) {
|
||||
selectedFeatures[i].setStyle(null);
|
||||
}
|
||||
selectedFeatures = [];
|
||||
}
|
||||
|
||||
// Handle pointer
|
||||
map.on('pointermove', function (event) {
|
||||
unselectPreviousFeatures();
|
||||
map.forEachFeatureAtPixel(event.pixel, function (feature) {
|
||||
feature.setStyle([
|
||||
selectedStyle,
|
||||
selectedTextStyleFunction(feature.get('sitename'))
|
||||
]);
|
||||
selectedFeatures.push(feature);
|
||||
});
|
||||
});
|
||||
|
||||
$(function () {
|
||||
$('.ol-attribution button').click(function () {
|
||||
$('.ol-mouse-position').toggleClass('ol-mouse-position-fix');
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
{"type": "FeatureCollection", "features": [{"geometry": {"type": "Point", "coordinates": [92.45, 34.2167]}, "type": "Feature", "properties": {"sitename": "\u6cb1\u6cb1\u6cb3", "siteid": 60100500}}, {"geometry": {"type": "Point", "coordinates": [97.2167, 33.0333]}, "type": "Feature", "properties": {"sitename": "\u76f4\u95e8\u8fbe", "siteid": 60100700}}, {"geometry": {"type": "Point", "coordinates": [92.0667, 33.6167]}, "type": "Feature", "properties": {"sitename": "\u96c1\u77f3\u576a", "siteid": 60201000}}, {"geometry": {"type": "Point", "coordinates": [94.9422, 34.855]}, "type": "Feature", "properties": {"sitename": "\u66f2\u9ebb\u6cb3", "siteid": 60201430}}, {"geometry": {"type": "Point", "coordinates": [97.05, 33.0167]}, "type": "Feature", "properties": {"sitename": "\u65b0\u5be8", "siteid": 60201500}}, {"geometry": {"type": "Point", "coordinates": [96.4222, 33.2925]}, "type": "Feature", "properties": {"sitename": "\u9686\u5b9d\u6ee9", "siteid": 60201470}}, {"geometry": {"type": "Point", "coordinates": [100.75, 32.9333]}, "type": "Feature", "properties": {"sitename": "\u73ed\u739b", "siteid": 60607550}}, {"geometry": {"type": "Point", "coordinates": [96.4522, 32.3136]}, "type": "Feature", "properties": {"sitename": "\u9999\u8fbe\uff08\u56db\uff09", "siteid": 90202000}}, {"geometry": {"type": "Point", "coordinates": [96.5553, 32.6314]}, "type": "Feature", "properties": {"sitename": "\u4e0b\u62c9\u79c0", "siteid": 90202800}}, {"geometry": {"type": "Point", "coordinates": [98.2061, 34.9078]}, "type": "Feature", "properties": {"sitename": "\u9102\u9675\u6e56", "siteid": 40100030}}, {"geometry": {"type": "Point", "coordinates": [97.3083, 34.8236]}, "type": "Feature", "properties": {"sitename": "\u624e\u9675\u6e56", "siteid": 40100050}}, {"geometry": {"type": "Point", "coordinates": [99.65, 33.7667]}, "type": "Feature", "properties": {"sitename": "\u5409\u8fc8\uff08\u56db\uff09", "siteid": 40100150}}, {"geometry": {"type": "Point", "coordinates": [102.083, 33.9667]}, "type": "Feature", "properties": {"sitename": "\u739b\u66f2\uff08\u4e8c\uff09", "siteid": 40100250}}, {"geometry": {"type": "Point", "coordinates": [100.65, 34.7]}, "type": "Feature", "properties": {"sitename": "\u519b\u529f", "siteid": 40100300}}, {"geometry": {"type": "Point", "coordinates": [100.15, 35.5]}, "type": "Feature", "properties": {"sitename": "\u5927\u7c73\u6ee9", "siteid": 40201100}}, {"geometry": {"type": "Point", "coordinates": [100.233, 35.3167]}, "type": "Feature", "properties": {"sitename": "\u4e0a\u6751", "siteid": 40201500}}, {"geometry": {"type": "Point", "coordinates": [100.133, 35.5]}, "type": "Feature", "properties": {"sitename": "\u540c\u4ec1", "siteid": 40202700}}, {"geometry": {"type": "Point", "coordinates": [102.017, 35.5167]}, "type": "Feature", "properties": {"sitename": "\u5510\u4e43\u4ea5", "siteid": 40100350}}]}
|
||||
Loading…
Reference in New Issue