增加在线地图的前台浏览与查看功能
This commit is contained in:
wlx
parent
0eff22f083
commit
c7e81e1dab
|
|
@ -2325,5 +2325,22 @@ order by m.title";
|
|||
}
|
||||
|
||||
}
|
||||
public function mapAction()
|
||||
{
|
||||
$uuid = $this->_request->getParam('uuid');
|
||||
$sql="select d.*,m.title,m.description from datamap d left join normalmetadata m on d.uuid=m.uuid where d.status=1";
|
||||
if (!empty($uuid) && \Helpers\Uuid::test($uuid) !== false)
|
||||
{
|
||||
$sql.=" and d.uuid='$uuid'";
|
||||
$sth = $this->db->prepare($sql);
|
||||
$rs = $sth->execute();
|
||||
$this->view->map = $sth->fetch();
|
||||
} else {
|
||||
$sth = $this->db->prepare($sql);
|
||||
$rs = $sth->execute();
|
||||
view::addPaginator($sth->fetchAll(),$this,10);
|
||||
$this->_helper->viewRenderer('map-list');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ $this->headTitle()->setSeparator(' - ');
|
|||
<a class="btn" href="/data/onlinelist"><i class="icon-th"></i>在线数据清单</a>
|
||||
<a class="btn" href="/data/offlinelist"><i class="icon-th"></i>离线数据清单</a>
|
||||
<a class="btn" href="/data/visual"><i class="icon-th"></i>可视化数据</a>
|
||||
<a class="btn" href="/data/map"><i class="icon-th"></i>在线地图数据</a>
|
||||
</form>
|
||||
<ul class="unstyled inline">
|
||||
<li><a class="btn" href="/data/thumb"><i class="icon-picture"></i>缩略图浏览</a></li>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
<?php
|
||||
$this->headTitle($this->config->title->site);
|
||||
$this->headTitle($this->config->title->data);
|
||||
$this->headTitle()->setSeparator(' - ');
|
||||
$this->headLink()->appendStylesheet('/css/metadata.css');
|
||||
$this->nav[] = array('link'=>"/data/map",'title'=>'在线地图数据列表');
|
||||
$this->theme->AppendPlus($this,'colorbox');
|
||||
?>
|
||||
<div class="row-fluid">
|
||||
<?= $this->render('breadcrumbs.phtml') ?>
|
||||
<?= $this->partial('data/tools.phtml'); ?>
|
||||
</div>
|
||||
<?php if (!empty($this->paginator)) : ?>
|
||||
<div id='metacontent'>
|
||||
<?php echo $this->paginator; ?>
|
||||
<hr />
|
||||
<?php foreach($this->paginator as $md) : ?>
|
||||
<div class="mditem">
|
||||
<div class="thumb">
|
||||
<a href="/service/bigthumb/uuid/<?= $md['uuid'] ?>" class="colorbox">
|
||||
<img src="/service/thumb/uuid/<?php echo $md['uuid'];?>" />
|
||||
</a>
|
||||
</div>
|
||||
<h2><a href="/data/<?php echo $md['uuid']; ?>"><?php echo $this->escape($md['title']);?></a></h2>
|
||||
<span><?php echo mb_strlen($md['description'])>400?$this->escape(mb_substr($md['description'],0,400,'UTF-8').'...'):$this->escape($md['description']);?></span>
|
||||
<p class="text-right"><a href="/data/map/uuid/<?= $md['uuid'] ?>" class="btn btn-info pull-right" style=" text-indent:0"><i class="icon-globe"></i>地图查看</a></p>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php echo $this->paginator; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$(".colorbox").colorbox({rel:"colorbox",photo:"true",transition:"fade"});
|
||||
$(".colorbox").colorbox({photo:"true"});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
<?php
|
||||
$this->headTitle($this->config->title->site);
|
||||
$this->headTitle('在线地图');
|
||||
$this->headTitle()->setSeparator(' - ');
|
||||
$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/map",
|
||||
'title' => '在线地图'
|
||||
);
|
||||
?>
|
||||
<?= $this->render('breadcrumbs.phtml') ?>
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h3><a href="/data/<?= $this->map['uuid'] ?>"><?= $this->map['title'] ?></a></h3>
|
||||
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
var attribution = new ol.Attribution({
|
||||
html: 'City Tiles © <a target="_blank" href="http://www.tianditu.com/">天地图</a>'
|
||||
});
|
||||
|
||||
var projection = ol.proj.get('EPSG:3857');
|
||||
var projectionExtent = projection.getExtent();
|
||||
var size = ol.extent.getWidth(projectionExtent) / 256;
|
||||
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 res = 156543.03392804096153584694438047;
|
||||
for (var z = 1; z <= 19; z++) {
|
||||
res /= 2.0;
|
||||
matrixIds[z - 1] = z;
|
||||
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: [
|
||||
new ol.layer.Tile({
|
||||
title: '影像',
|
||||
type: 'base',
|
||||
extent: projectionExtent,
|
||||
source: new ol.source.WMTS({
|
||||
attributions: [attribution],
|
||||
url: 'http://t0.tianditu.com/img_w/wmts',
|
||||
layer: 'img',
|
||||
matrixSet: 'w',
|
||||
format: 'tiles',
|
||||
projection: ol.proj.get('EPSG:4490'),
|
||||
tileGrid: new ol.tilegrid.WMTS({
|
||||
origin: ol.extent.getTopLeft(projectionExtent),
|
||||
resolutions: resolutions,
|
||||
matrixIds: matrixIds
|
||||
}),
|
||||
style: 'default'
|
||||
})
|
||||
}),
|
||||
|
||||
new ol.layer.Tile({
|
||||
title: '地形 ',
|
||||
type: 'base',
|
||||
extent: projectionExtent,
|
||||
source: new ol.source.WMTS({
|
||||
attributions: [attribution],
|
||||
url: 'http://t0.tianditu.com/ter_w/wmts',
|
||||
layer: 'ter',
|
||||
matrixSet: 'w',
|
||||
format: 'tiles',
|
||||
projection: ol.proj.get('EPSG:4490'),
|
||||
tileGrid: new ol.tilegrid.WMTS({
|
||||
origin: ol.extent.getTopLeft(projectionExtent),
|
||||
resolutions: resolutions,
|
||||
matrixIds: matrixIds
|
||||
}),
|
||||
style: 'default'
|
||||
})
|
||||
}),
|
||||
|
||||
new ol.layer.Tile({
|
||||
title: '地图',
|
||||
type: 'base',
|
||||
extent: projectionExtent,
|
||||
source: new ol.source.WMTS({
|
||||
attributions: [attribution],
|
||||
url: 'http://t0.tianditu.com/vec_w/wmts',
|
||||
layer: 'vec',
|
||||
matrixSet: 'w',
|
||||
format: 'tiles',
|
||||
projection: projection,
|
||||
tileGrid: new ol.tilegrid.WMTS({
|
||||
origin: ol.extent.getTopLeft(projectionExtent),
|
||||
resolutions: resolutions,
|
||||
matrixIds: matrixIds
|
||||
}),
|
||||
style: 'default'
|
||||
})
|
||||
})
|
||||
]
|
||||
}),
|
||||
|
||||
new ol.layer.Group({
|
||||
title: '数据',
|
||||
layers: [
|
||||
<?php
|
||||
$layers=json_decode($this->map['layers'],true);
|
||||
foreach($layers as $layer) :
|
||||
if ($layer['type']=='tile') :
|
||||
?>
|
||||
new ol.layer.Tile({
|
||||
title: '<?= $layer['title'] ?>',
|
||||
opacity: 0.6,
|
||||
extent: ol.proj.transformExtent([<? echo $layer['extent']['lon_min'].','.$layer['extent']['lat_min'].','.$layer['extent']['lon_max'].','.$layer['extent']['lat_max']; ?>], "EPSG:4326", "EPSG:3857"),
|
||||
source: new ol.source.XYZ({
|
||||
url: '<?= $layer['url'] ?>'
|
||||
})
|
||||
}),
|
||||
<? endif; endforeach; ?>
|
||||
]
|
||||
}),
|
||||
|
||||
new ol.layer.Group({
|
||||
title: '注记',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
title: '地点注记',
|
||||
visible: false,
|
||||
extent: projectionExtent,
|
||||
source: new ol.source.WMTS({
|
||||
attributions: [attribution],
|
||||
url: 'http://t0.tianditu.com/cva_w/wmts',
|
||||
layer: 'cva',
|
||||
matrixSet: 'w',
|
||||
format: 'tiles',
|
||||
projection: projection,
|
||||
tileGrid: new ol.tilegrid.WMTS({
|
||||
origin: ol.extent.getTopLeft(projectionExtent),
|
||||
resolutions: resolutions,
|
||||
matrixIds: matrixIds
|
||||
}),
|
||||
style: 'default'
|
||||
})
|
||||
})
|
||||
]
|
||||
}),
|
||||
],
|
||||
|
||||
target: 'map',
|
||||
|
||||
view: new ol.View({
|
||||
center: ol.proj.transform([<?= $this->map['center_lon'] ?>, <?= $this->map['center_lat'] ?>], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: <?= $this->map['zoom_default'] ?>
|
||||
}),
|
||||
|
||||
controls: ol.control.defaults().extend([
|
||||
new ol.control.Zoom(),
|
||||
new ol.control.ScaleLine(),
|
||||
new ol.control.MousePosition({
|
||||
coordinateFormat: ol.coordinate.createStringXY(3),
|
||||
projection: 'EPSG:4326'
|
||||
}),
|
||||
new ol.control.FullScreen()
|
||||
])
|
||||
})
|
||||
|
||||
$(document).ready(function () {
|
||||
var layerSwitcher = new ol.control.LayerSwitcher({
|
||||
tipLabel: 'layer'
|
||||
});
|
||||
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');
|
||||
return false;
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue