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.
216 lines
7.7 KiB
HTML
216 lines
7.7 KiB
HTML
<!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" />
|
|
<style>
|
|
.map {
|
|
height: 800px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<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>
|
|
|
|
<title>OpenLayers example</title>
|
|
<style type="text/css">
|
|
#menu {
|
|
float: left;
|
|
position: absolute;
|
|
bottom: 50px;
|
|
right: 30px;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.checkbox {
|
|
left: 20px;
|
|
}
|
|
|
|
/**
|
|
* 提示框的样式信息
|
|
*/
|
|
.tooltip {
|
|
position: relative;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 4px;
|
|
color: white;
|
|
padding: 4px 8px;
|
|
opacity: 0.7;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tooltip-measure {
|
|
opacity: 1;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tooltip-static {
|
|
background-color: #ffffff;
|
|
color: black;
|
|
border: 1px solid white;
|
|
}
|
|
|
|
.tooltip-measure:before,
|
|
.tooltip-static:before {
|
|
border-top: 6px solid rgba(0, 0, 0, 0.5);
|
|
border-right: 6px solid transparent;
|
|
border-left: 6px solid transparent;
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -6px;
|
|
margin-left: -7px;
|
|
left: 50%;
|
|
}
|
|
|
|
.tooltip-static:before {
|
|
border-top-color: #ffffff;
|
|
}
|
|
|
|
#scalebar {
|
|
float: left;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>My Map</h2>
|
|
<div id="map" class="map border"></div>
|
|
|
|
<script type="text/javascript">
|
|
var key = 'd7b1b7243fce9720e4e1ae73e41a47ad';
|
|
var drawSource = null;
|
|
var draw, snap;
|
|
var drawVector = null;
|
|
var FancePoints = null;
|
|
var popup = null;
|
|
var MapShow = [0, 1];
|
|
//const key = 'Get your own API key at https://www.maptiler.com/cloud/';
|
|
const attributions =
|
|
'<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> ' +
|
|
'<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>';
|
|
|
|
// const variables = {
|
|
// exposure: 0.3,
|
|
// contrast: 0.3,
|
|
// saturation: 0.28,
|
|
// };
|
|
const variables = {
|
|
exposure: 0.2,
|
|
contrast: -0.18,
|
|
saturation: 0.5,
|
|
};
|
|
const layer = [
|
|
//本地
|
|
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=vec_w&x={x}&y={y}&l={z}&tk=' +
|
|
key, //天地图
|
|
}),
|
|
}),
|
|
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, //天地图
|
|
}),
|
|
visible: false,
|
|
}),
|
|
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=cva_w&x={x}&y={y}&l={z}&tk=' +
|
|
key, //天地图
|
|
}),
|
|
}),
|
|
];
|
|
// const layer = 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//天地图
|
|
// })
|
|
// //source: new ol.source.OSM()
|
|
// // new ol.source.XYZ({
|
|
// // attributions: attributions,
|
|
// // source: new ol.source.OSM(),//原始地图
|
|
// // //url: 'http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + key,
|
|
// // //maxZoom: 20,
|
|
// // }),
|
|
// });
|
|
|
|
const map = new ol.Map({
|
|
projection: 'EPSG:3857',
|
|
renderer: 'webgl',
|
|
target: 'map',
|
|
layers: layer,
|
|
view: new ol.View({
|
|
center: ol.proj.transform([113.193712, 29.493999], 'EPSG:4326', 'EPSG:3857'),
|
|
//center: [113.193712,29.493999],
|
|
zoom: 12,
|
|
}),
|
|
});
|
|
|
|
let variable;
|
|
for (variable in variables) {
|
|
const name = variable;
|
|
//const element = document.getElementById(name);
|
|
const value = variables[name];
|
|
//element.value = value.toString();
|
|
//document.getElementById(name + '-value').innerText = value.toFixed(2);
|
|
const listener = function (event) {
|
|
const value = parseFloat(event.target.value);
|
|
//document.getElementById(name + '-value').innerText = value.toFixed(2);
|
|
const updates = {};
|
|
updates[name] = value;
|
|
layer.updateStyleVariables(updates);
|
|
};
|
|
// element.addEventListener('input', listener);
|
|
// element.addEventListener('change', listener);
|
|
}
|
|
|
|
// //默认设置切换到影像图
|
|
map.getLayers().item(MapShow[0]).setVisible(false);
|
|
map.getLayers().item(MapShow[1]).setVisible(true);
|
|
</script>
|
|
</body>
|
|
</html>
|