251 lines
6.6 KiB
PHTML
251 lines
6.6 KiB
PHTML
|
<?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 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>
|