基于openlayer5.2开发的显示geowave图层案例(geowave+hbase)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="/portal/static/js/openlayer52/ol.css"></link>
<script src="/portal/static/js/jquery.min.js"></script>
<script src="/portal/config/config.js"></script>
<script src="/portal/static/js/openlayer52/ol.js"></script>
<style>
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
</style>
</head>
<body>
<h2>Hello World!</h2>
<div id="wrapper" style="width:768px">
<div id="location" style="float:right"></div>
<div id="scale">1:1000</div>
</div>
<div id="map" style="width:100%;height:700px">
<div class="ol-toggle-options ol-unselectable"><a title="Toggle options toolbar" onClick="toggleControlPanel()" href="#toggle">...</a></div>
</div>
<div id="msg"></div>
<script>
var msgObj=$('#msg');
var t="webapiurl_auth="+webconfig.webapiurl_auth;
t+="\r\n webapiurl_dmp="+webconfig.webapiurl_dmp;
t+="\r\n webapiurl_map="+webconfig.webapiurl_map;
t+="\r\n Account="+GetLoginAccount();
t+="\r\n LoginName="+GetLoginName();
t+="\r\n LoginID="+GetLoginID();
t+="\r\n AccessToken="+GetAccessToken();
t+="\r\n RefreshToken="+GetRefreshToken();
//msgObj[0].innerText=t;
</script>
<script>
$(document).ready(function () {
var mousePositionControl = new ol.control.MousePosition({
className: 'custom-mouse-position',
target: document.getElementById('location'),
coordinateFormat: ol.coordinate.createStringXY(5),
undefinedHTML: ' '
});
//
var wmsPath="http://192.168.145.190:8080/geoserver/geowave/wms";
//wmsPath+="?service=WMS";
//wmsPath+="&version=1.1.1";
//wmsPath+="&request=GetMap";
//wmsPath+="&layers=geowave:china_point";
//wmsPath+="&styles=&bbox=73.8594997,15.1282126,134.7146464,53.477613";
//wmsPath+="&width=768&height=483";
//wmsPath+="&srs=EPSG:4326";
//wmsPath+="&format=application/openlayers";
var bounds = [73.8594997, 15.1282126,134.7146464, 53.477613];
bounds = [103.0594997, 29.9282126,104.9146464, 30.977613];
var format = 'image/png';
var t_projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu',
global:true
});
var untiled = new ol.layer.Image({
visible:true,
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://192.168.145.190:8080/geoserver/geowave/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
"STYLES": '',
"LAYERS": 'geowave:china_point',
"exceptions": 'application/vnd.ogc.se_inimage'
}
})
});
//map.addLayer(untiled);
//china_point Layer
var china_point_layer=new ol.layer.Tile({
visible:true,
source:new ol.source.TileWMS({
url: 'http://192.168.145.190:8080/geoserver/geowave/wms',
params:{
'FORMAT':format,
'VERSION':'1.1.1',
tiled:true,
STYLES:'',
LAYERS:'geowave:china_point',
"exceptions": 'application/vnd.ogc.se_inimage',
tilesOrigin: 73.8594997 + "," + 15.1282126
}
})
});
//china_line Layer
var china_line_layer = new ol.layer.Image({
visible:true,
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://192.168.145.190:8080/geoserver/geowave/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled:true,
"STYLES": '',
"LAYERS": 'geowave:china_line',
"exceptions": 'application/vnd.ogc.se_inimage'
}
})
});
//china_region Layer
var china_region_layer = new ol.layer.Image({
visible:true,
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://192.168.145.190:8080/geoserver/geowave/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled:true,
"STYLES": '',
"LAYERS": 'geowave:china_region',
"exceptions": 'application/vnd.ogc.se_inimage'
}
})
});
var map=new ol.Map({
target:'map',
view:new ol.View({
zoom:8,
center:[104.8594997,29.1282126],
projection:t_projection
}),
controls:ol.control.defaults().extend(new ol.control.FullScreen())
});
//添加mouse location point x,y coordate
mousePositionControl.setMap(map);
map.addControl(mousePositionControl);
//osm_layer显示 map中设置zoom:2,center:[0,0],图层就显示出来了OK
//加载OpenStreetMap在线瓦片服务数据 OK
var osm_layer=new ol.layer.Tile({
source:new ol.source.OSM()
});
map.addLayer(osm_layer);
map.addLayer(china_region_layer);
map.addLayer(china_line_layer);
map.addLayer(china_point_layer);
//map.addLayer(untiled);
//new ol.control.FullScreen()
//LAYERS:[untiled,t_layer],
//controls:ol.control.defaults({attribution:true}).extend([mousePositionControl])
//controls:ol.control.defaults({attribution:true}).extend([new ol.control.FullScreen()])
/* */
//添加比例尺功能
map.getView().on('change:resolution', function(evt) {
var resolution = evt.target.get('resolution');
var units = map.getView().getProjection().getUnits();
var dpi = 25.4 / 0.28;
var mpu = ol.proj.Units.METERS_PER_UNIT[units];
var scale = resolution * mpu * 39.37 * dpi;
if (scale >= 9500 && scale <= 950000) {
scale = Math.round(scale / 1000) + "K";
} else if (scale >= 950000) {
scale = Math.round(scale / 1000000) + "M";
} else {
scale = Math.round(scale);
}
document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
});
//
map.getView().fit(bounds, map.getSize());
map.updateSize();
//
});
</script>
</body>
</html>
1250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
