|
|
<!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 key = '489fa3b53cd351877dcf69e9ed899a04';
|
|
|
var highlight;
|
|
|
|
|
|
var highlightStyle = 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)',
|
|
|
}),
|
|
|
});
|
|
|
var view = new ol.View({
|
|
|
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
|
|
|
zoom: 4,
|
|
|
});
|
|
|
var highlightSource = new ol.source.Vector({
|
|
|
projection: 'EPSG:3857',
|
|
|
url: '/yyyzweb/common/json/hunan.json', //从文件加载边界等地理信息
|
|
|
format: new ol.format.GeoJSON(),
|
|
|
strategy: ol.loadingstrategy.bbox,
|
|
|
});
|
|
|
var highlightLayer = new ol.layer.Vector({
|
|
|
source: highlightSource,
|
|
|
style: function (feature, resolution) {
|
|
|
style.getText().setText(resolution < 5000 ? feature.get('name') : ''); //当放大到1:5000分辨率时，显示国家名字
|
|
|
return [style];
|
|
|
},
|
|
|
});
|
|
|
|
|
|
const variables = {
|
|
|
exposure: 0.3,
|
|
|
contrast: 0.3,
|
|
|
saturation: 0.28,
|
|
|
};
|
|
|
var map = new ol.Map({
|
|
|
//初始化map
|
|
|
target: 'map',
|
|
|
layers: [
|
|
|
new ol.layer.WebGLTile({
|
|
|
style: {
|
|
|
exposure: ['var', 'exposure'],
|
|
|
contrast: ['var', 'contrast'],
|
|
|
saturation: ['var', 'saturation'],
|
|
|
variables: variables,
|
|
|
},
|
|
|
source: new ol.source.XYZ({
|
|
|
url:
|
|
|
'http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' +
|
|
|
key, //天地图
|
|
|
}),
|
|
|
}),
|
|
|
highlightLayer,
|
|
|
],
|
|
|
view: view,
|
|
|
});
|
|
|
|
|
|
/**
|
|
|
* 定义矢量图层
|
|
|
* 其中style是矢量图层的显示样式
|
|
|
*/
|
|
|
var style = new ol.style.Style({
|
|
|
fill: new ol.style.Fill({
|
|
|
//矢量图层填充颜色，以及透明度
|
|
|
color: 'rgba(255, 255, 255, 0.6)',//rgba(25, 25, 112, 0.1)
|
|
|
}),
|
|
|
stroke: new ol.style.Stroke({
|
|
|
//边界样式
|
|
|
color: 'blue',
|
|
|
width: 1,
|
|
|
}),
|
|
|
text: new ol.style.Text({
|
|
|
//文本样式
|
|
|
font: '12px Calibri,sans-serif',
|
|
|
fill: new ol.style.Fill({
|
|
|
color: 'blue',
|
|
|
}),
|
|
|
stroke: new ol.style.Stroke({
|
|
|
color: '#fff',
|
|
|
width: 3,
|
|
|
}),
|
|
|
}),
|
|
|
});
|
|
|
|
|
|
|
|
|
// //地图点击事件
|
|
|
// map.on('click', function(e) {
|
|
|
// let zoom = map.getView().getZoom();
|
|
|
// let pixel = map.getEventPixel(e.originalEvent);
|
|
|
// map.forEachFeatureAtPixel(pixel, function(feature) {
|
|
|
// let coodinate = e.coordinate;
|
|
|
// //设置地图中心点和缩放级别，如不需要可省略
|
|
|
// view.setCenter(coodinate);
|
|
|
// view.animate({
|
|
|
// zoom: 7,
|
|
|
// duration: 1000
|
|
|
// })
|
|
|
// //引用区域变暗方法
|
|
|
// darkenLayer('/yyyzweb/common/json/china.json');
|
|
|
// })
|
|
|
// })
|
|
|
|
|
|
// function darkenLayer(data) {
|
|
|
// $.getJSON(data, function(data) {
|
|
|
// var fts = new ol.format.GeoJSON().readFeatures(data);
|
|
|
// var ft = fts[0];
|
|
|
// var darkenGeom = erase(ft.getGeometry());
|
|
|
// var darkentFt = new ol.Feature({
|
|
|
// geometry: darkenGeom
|
|
|
// })
|
|
|
// var styles = new ol.style.Style({
|
|
|
// stroke: new ol.style.Stroke({
|
|
|
// color: '#319FD3',
|
|
|
// width: 1,
|
|
|
// }),
|
|
|
// fill: new ol.style.Fill({
|
|
|
// color: 'rgba(255, 255, 255, 0.6)',
|
|
|
// }),
|
|
|
// });
|
|
|
// highlightLayer.getSource().clear();
|
|
|
// highlightLayer.getSource().addFeature(darkentFt);
|
|
|
// highlightLayer.setStyle(styles);
|
|
|
// })
|
|
|
// }
|
|
|
// // 变暗图层范围
|
|
|
// function erase(geom) {
|
|
|
// var extent = [-180,-90,180,90];
|
|
|
// var polygonRing = ol.geom.Polygon.fromExtent(extent);
|
|
|
// var coords = geom.getCoordinates();
|
|
|
// coords.forEach(coord =>{
|
|
|
// var linearRing = new ol.geom.LinearRing(coord[0]);
|
|
|
// polygonRing.appendLinearRing(linearRing);
|
|
|
// })
|
|
|
// return polygonRing;
|
|
|
// }
|
|
|
|
|
|
//交互时高亮
|
|
|
var select_move=new ol.interaction.Select({
|
|
|
condition:ol.events.condition.pointerMove,//设置监听事件
|
|
|
style:new ol.style.Style({
|
|
|
fill: new ol.style.Fill({ //填充样式
|
|
|
color: 'rgba(255, 255, 255, 0.1)'
|
|
|
}),
|
|
|
stroke: new ol.style.Stroke({ //线样式
|
|
|
color: '#ffcc33',
|
|
|
width: 5
|
|
|
}),
|
|
|
image: new ol.style.Circle({ //点样式
|
|
|
radius: 10,
|
|
|
fill: new ol.style.Fill({
|
|
|
color: '#e67e22'
|
|
|
})
|
|
|
})
|
|
|
})
|
|
|
});
|
|
|
map.addInteraction(select_move)
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
<style lang="css">
|
|
|
#map {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
}
|
|
|
</style>
|
|
|
</html>
|
