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.

198 lines
5.5 KiB
HTML

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="v5.3.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;
//地图创建
drawSource = new ol.source.Vector({
url: 'https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson',
format: new ol.format.GeoJSON()
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),//原始地图
validity: false
}),
// new ol.layer.Tile({
// source: new ol.source.XYZ({
// url: "http://localhost:9090/mbtiles/index.jsp?mapindex=vecva&zoom={z}&col={x}&row={y}"
// })
// }),
// new ol.layer.Tile({
// source: new ol.source.XYZ({
// url: "http://localhost:9090/mbtiles/index.jsp?mapindex=cia&zoom={z}&col={x}&row={y}"
// }),
// visible: false
// }),
// new ol.layer.Vector({
// source: drawSource,
// style: new ol.style.Style({
// fill: new ol.style.Fill({
// color: 'rgba(0, 255, 0, 0.3)'
// }),
// stroke: new ol.style.Stroke({
// color: '#ffcc33',
// width: 2
// }),
// image: new ol.style.Circle({
// radius: 7,
// fill: new ol.style.Fill({
// color: '#ffcc33'
// })
// })
// })
// })
],
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [0,0],
zoom: 0
// center: [112.97935279, 28.21347823],
// zoom: 15
}),
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
})
});
let pointLayer = new ol.layer.WebGLPoints({
source: drawSource,
style: {
"symbol": {
"symbolType": "circle",
"size": [
"interpolate",
[
"linear"
],
[
"get",
"population"
],
40000,
8,
2000000,
28
],
"color": "#006688",
"rotateWithView": false,
"offset": [
0,
0
],
"opacity": [
"interpolate",
[
"linear"
],
[
"get",
"population"
],
40000,
0.6,
2000000,
0.92
]
}
}
});
map.addLayer(pointLayer);
</script>
</body>
</html>