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.

186 lines
4.7 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 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>