|
|
<!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 = 'a4f4b6000cb9d1bf148bb77452000f30';
|
|
|
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: 'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson', //从文件加载边界等地理信息
|
|
|
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)',
|
|
|
}),
|
|
|
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,
|
|
|
}),
|
|
|
}),
|
|
|
});
|
|
|
var boxSelect = new ol.interaction.Select();
|
|
|
var selectedFeatures = boxSelect.getFeatures();
|
|
|
function addHighlightLayer(name) {
|
|
|
//每次执行点击事件需清除之前的
|
|
|
selectedFeatures.clear();
|
|
|
//引入中国地图的geojson格式数据
|
|
|
$.getJSON(
|
|
|
'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson',
|
|
|
function (data) {
|
|
|
var features = new ol.format.GeoJSON().readFeatures(data);
|
|
|
features.forEach(function (element) {
|
|
|
let jsonName = element.get('name');
|
|
|
//如果点击的区域名称等于jeojson数据中的名称，则高亮显示
|
|
|
if (jsonName === name) {
|
|
|
var styles = new ol.style.Style({
|
|
|
stroke: new ol.style.Stroke({
|
|
|
color: 'red',
|
|
|
width: 1,
|
|
|
}),
|
|
|
fill: new ol.style.Fill({
|
|
|
color: 'rgba(255, 255, 255, 0.6)',
|
|
|
}),
|
|
|
});
|
|
|
highlightLayer.getSource().clear();
|
|
|
highlightLayer.getSource().addFeature(element);
|
|
|
highlightLayer.setStyle(styles);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
);
|
|
|
}
|
|
|
//地图点击事件
|
|
|
map.on('click', function (e) {
|
|
|
let zoom = map.getView().getZoom();
|
|
|
let pixel = map.getEventPixel(e.originalEvent);
|
|
|
var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
|
|
|
return feature;
|
|
|
});
|
|
|
if (feature != null) {
|
|
|
let coodinate = e.coordinate;
|
|
|
//设置地图中心点和缩放级别，如不需要可省略
|
|
|
view.setCenter(coodinate);
|
|
|
view.animate({
|
|
|
zoom: 5,
|
|
|
duration: 1000,
|
|
|
});
|
|
|
//引用区域高亮方法
|
|
|
addHighlightLayer(feature.A.name);
|
|
|
//darkenLayer();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
function darkenLayer() {
|
|
|
$.getJSON(
|
|
|
'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson',
|
|
|
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,
|
|
|
});
|
|
|
highlightLayer.getSource().addFeature(darkentFt);
|
|
|
}
|
|
|
);
|
|
|
}
|
|
|
// 变暗图层范围
|
|
|
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;
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
<style lang="css">
|
|
|
#map {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
}
|
|
|
</style>
|
|
|
</html>
|
