diff --git a/application/default/views/scripts/data/landuse.phtml b/application/default/views/scripts/data/landuse.phtml index d2b2ddce..a150da51 100644 --- a/application/default/views/scripts/data/landuse.phtml +++ b/application/default/views/scripts/data/landuse.phtml @@ -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' => '三江源土地利用地图' +); ?> render('breadcrumbs.phtml') ?>
- +
@@ -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'); diff --git a/htdocs/json/water_site.json b/htdocs/json/water_site.json new file mode 100644 index 00000000..90b44176 --- /dev/null +++ b/htdocs/json/water_site.json @@ -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}}]} \ No newline at end of file