You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

210 lines
7.2 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>