|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
|
|
<link rel="stylesheet" href="v6.12.0/css/ol.css" type="text/css" />
|
|
|
|
|
|
<link rel="stylesheet" href="../../../css/pintuer-min.css" type="text/css" />
|
|
|
|
|
|
|
|
|
|
|
|
<script
|
|
|
|
|
|
language="javascript"
|
|
|
|
|
|
src="../../../../common/script/jquery.js"
|
|
|
|
|
|
type="text/javascript"
|
|
|
|
|
|
></script>
|
|
|
|
|
|
<script
|
|
|
|
|
|
language="javascript"
|
|
|
|
|
|
src="../../../../common/script/pintuer.js"
|
|
|
|
|
|
type="text/javascript"
|
|
|
|
|
|
></script>
|
|
|
|
|
|
<script
|
|
|
|
|
|
language="javascript"
|
|
|
|
|
|
src="../../../../common/script/jquery.bs.js"
|
|
|
|
|
|
type="text/javascript"
|
|
|
|
|
|
></script>
|
|
|
|
|
|
<script src="v6.12.0/build/ol.js"></script>
|
|
|
|
|
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
|
|
|
|
|
|
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.3.0/css/ol.css" type="text/css">
|
|
|
|
|
|
<script src="http://openlayers.org/en/v3.3.0/build/ol.js" type="text/javascript"></script> -->
|
|
|
|
|
|
<style>
|
|
|
|
|
|
html, body {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.map {
|
|
|
|
|
|
height: 800px;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="map" style="width:100%;height:100%"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
// var map, vectorLayer;
|
|
|
|
|
|
var highlightStyleCache = {};
|
|
|
|
|
|
var highlight;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 定义矢量图层
|
|
|
|
|
|
* 其中style是矢量图层的显示样式
|
|
|
|
|
|
*/
|
|
|
|
|
|
var style =new ol.style.Style({
|
|
|
|
|
|
fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度
|
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.6)'
|
|
|
|
|
|
}),
|
|
|
|
|
|
stroke: new ol.style.Stroke({ //边界样式
|
|
|
|
|
|
color: '#319FD3',
|
|
|
|
|
|
width: 1
|
|
|
|
|
|
}),
|
|
|
|
|
|
text: new ol.style.Text({ //文本样式
|
|
|
|
|
|
font: '12px Calibri,sans-serif',
|
|
|
|
|
|
fill: new ol.style.Fill({
|
|
|
|
|
|
color: '#000'
|
|
|
|
|
|
}),
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
width: 3
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var vectorLayer = new ol.layer.Vector({ //初始化矢量图层
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
projection: 'EPSG:3857',
|
|
|
|
|
|
url: 'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson', //从文件加载边界等地理信息
|
|
|
|
|
|
format:new ol.format.GeoJSON(),
|
|
|
|
|
|
strategy: ol.loadingstrategy.bbox
|
|
|
|
|
|
|
|
|
|
|
|
}),
|
|
|
|
|
|
style: function(feature, resolution) {
|
|
|
|
|
|
style.getText().setText(resolution < 5000 ? feature.get('name') : ''); //当放大到1:5000分辨率时，显示国家名字
|
|
|
|
|
|
return [style];
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
var map = new ol.Map({ //初始化map
|
|
|
|
|
|
target: 'map',
|
|
|
|
|
|
layers: [
|
|
|
|
|
|
new ol.layer.Tile({
|
|
|
|
|
|
// source: new ol.source.XYZ({
|
|
|
|
|
|
// url: 'https://{a-d}.tiles.mapbox.com/v4/mapquest.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwcXVlc3QiLCJhIjoiY2Q2N2RlMmNhY2NiZTRkMzlmZjJmZDk0NWU0ZGJlNTMifQ.mPRiEubbajc6a5y9ISgydg'
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
|
|
//source: new ol.source.MapQuest({layer: 'sat'})
|
|
|
|
|
|
source: new ol.source.OSM()
|
|
|
|
|
|
// source: new ol.source.XYZ({
|
|
|
|
|
|
// url: 'https://{a-d}.tiles.mapbox.com/v4/mapquest.streets/{z}/{x}/{y}.png?access_token=d7b1b7243fce9720e4e1ae73e41a47ad'
|
|
|
|
|
|
// })
|
|
|
|
|
|
}),
|
|
|
|
|
|
vectorLayer
|
|
|
|
|
|
],
|
|
|
|
|
|
view: new ol.View({
|
|
|
|
|
|
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
|
|
|
|
|
|
zoom: 4
|
|
|
|
|
|
})
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 当鼠标移动时，高亮相应的区域的函数
|
|
|
|
|
|
*/
|
|
|
|
|
|
var featureOverlay = new ol.Feature({
|
|
|
|
|
|
map: map,
|
|
|
|
|
|
style: function(feature, resolution) {
|
|
|
|
|
|
var text = resolution < 5000 ? feature.get('name') : '';
|
|
|
|
|
|
if (!highlightStyleCache[text]) {
|
|
|
|
|
|
highlightStyleCache[text] = [new ol.style.Style({
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
color: '#f00',
|
|
|
|
|
|
width: 1
|
|
|
|
|
|
}),
|
|
|
|
|
|
fill: new ol.style.Fill({
|
|
|
|
|
|
color: 'rgba(255,0,0,0.1)'
|
|
|
|
|
|
}),
|
|
|
|
|
|
text: new ol.style.Text({
|
|
|
|
|
|
font: '12px Calibri,sans-serif',
|
|
|
|
|
|
text: text,
|
|
|
|
|
|
fill: new ol.style.Fill({
|
|
|
|
|
|
color: '#000'
|
|
|
|
|
|
}),
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
color: '#f00',
|
|
|
|
|
|
width: 3
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
})];
|
|
|
|
|
|
}
|
|
|
|
|
|
return highlightStyleCache[text];
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
var displayFeatureInfo = function(pixel) {
|
|
|
|
|
|
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
|
|
|
|
|
return feature;
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
if (feature !== highlight) {
|
|
|
|
|
|
if (highlight) {
|
|
|
|
|
|
featureOverlay.removeFeature(highlight);
|
|
|
|
|
|
}
|
|
|
|
|
|
if (feature) {
|
|
|
|
|
|
map.addFeature(feature);
|
|
|
|
|
|
}
|
|
|
|
|
|
highlight = feature;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 鼠标移动的事件
|
|
|
|
|
|
*/
|
|
|
|
|
|
map.on('pointermove', function(evt) {
|
|
|
|
|
|
if (evt.dragging) { //如果是拖动地图造成的鼠标移动，则不作处理
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
var pixel = map.getEventPixel(evt.originalEvent);
|
|
|
|
|
|
displayFeatureInfo(pixel);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
<style lang="css">
|
|
|
|
|
|
#map {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
