源码一。不做讲解，根据以前的博客去理解。
<%@ page contentType="text/html; charset=gb2312"%>
<%@ taglib uri="/WEB-INF/tld/select.tld" prefix="sl"%>
<%@ page isELIgnored="true"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Gis</title>
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/common.js"> </script>
<link href="<%=request.getContextPath()%>/common/css/style.css" rel="stylesheet" type="text/css" />
<SCRIPT language=javascript src="<%=request.getContextPath()%>/common/jquery/js/jquery-1.4.2.min.js"></SCRIPT>
<script type="text/javascript"
src="<%=request.getContextPath()%>/lib/OpenLayers.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/lib/Firebug/firebug.js"></script>
<script>
//alert(document.screenY);
</script>
<!-- >script type="text/javascript"
src="<%=request.getContextPath()%>/gis/bts.js"></script>-->
<style type="text/css">
.smallmap {
width: 680px;
height: 440px;
border: 1px solid #ccc;
}
.olControlEditingToolbar .olControlModifyFeatureItemInactive {
background-position: -1px 0px ;
}
.olControlEditingToolbar .olControlModifyFeatureItemActive {
background-position: -1px -23px ;
}
</style>
</head>
<body onload="init()" style="margin-left: 0px; margin-top: 0px; margin-right: 0px;height: 100%;">
<table>
<tr>
<td width="20%"></td>
<td width="20%" align="right">区域名称：</td>
<td width="20%"><sl:select tableName='tmp_area' fieldName='areaCode' field='area_code,area_name'/></td>
<td width="20%"><img style="cursor:hand" src="../images/zy_222.gif" id="img_sub1" onclick="showBTS();"></img></td>
<td width="20%"></td>
</tr>
</table>
<div id="bts" align="center"></div>
<div id="map"></div>
<script>
var m = document.getElementById("map");
m.style.height = window.screen.availHeight*0.75;
</script>
</body>
<%
ServletContext sc= this.getServletContext();
String wms =sc.getInitParameter("WMS");
%>
<script>
var map,layerpublic,vectors,geojson,markers;
OpenLayers.DOTS_PER_INCH = 90.71428571428572;
OpenLayers.Util.onImageLoadErrorColor = 'transparent';
function init(){
var bounds = new OpenLayers.Bounds(
73.447,6.319,135.086,67.95800000000001
);
var options = {
resolutions: [0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6],
projection: new OpenLayers.Projection('EPSG:4326'),
maxExtent: new OpenLayers.Bounds(-180.0,-90.0,180.0,90.0),
units: "degrees",
controls: [new OpenLayers.Control.Navigation(),new OpenLayers.Control.PanPanel(),new OpenLayers.Control.ZoomPanel()]
};
map = new OpenLayers.Map('map',options);
layerpublic = new OpenLayers.Layer.WMS( "china",
"<%=wms%>",
{
layers: 'jilin-map',
srs: 'EPSG:4326',
format: 'image/png'
},
{
tileSize: new OpenLayers.Size(256,256)
}
);
//alert("after layer");
map.addLayer(layerpublic);
geojson = new OpenLayers.Format.GeoJSON();
map.zoomToMaxExtent();
markers = new OpenLayers.Layer.Markers("markers");
map.addLayer(markers);
var styleMap = new OpenLayers.StyleMap({
"default": {
fillOpacity: 1,
strokeOpacity:1,
strokeColor: "#000000",
label: "\n\n${name}",
fontColor: "#99B4CF",
fontSize: "9px",
//fontFamily: "Courier New, monospace",
//fontWeight: "bold",
//labelAlign: "rt",//cm,lb,rt
graphicWidth:30,
graphicHeight:25,
cursor:"hand"
},
"select": {
fillOpacity: 0.75
//label : "${oid}"
}
});
// add rules from the above lookup table
styleMap.addUniqueValueRules("default", "state", {
"0": {externalGraphic: "../img/btsred.png",graphicWidth:25,graphicHeight:35},
"1": {externalGraphic: "../img/btsgre.png",graphicWidth:25,graphicHeight:35},
"2": {externalGraphic: "../img/btsblu.png",graphicWidth:25,graphicHeight:35},
"3": {externalGraphic: "../img/btsyel.png",graphicWidth:25,graphicHeight:35},
"4": {externalGraphic: "../img/btsgra.png",graphicWidth:25,graphicHeight:35},
//super state
"6": {externalGraphic: "../img/sbtsred.png",graphicWidth:45,graphicHeight:50},
"7": {externalGraphic: "../img/sbtsgre.png",graphicWidth:45,graphicHeight:50},
"8": {externalGraphic: "../img/sbtsblu.png",graphicWidth:45,graphicHeight:50},
"9": {externalGraphic: "../img/sbtsyel.png",graphicWidth:45,graphicHeight:50},
"10": {externalGraphic: "../img/sbtsgra.png",graphicWidth:45,graphicHeight:50}
});
vectors = new OpenLayers.Layer.Vector("Simple Geometry", {
styleMap: styleMap,
rendererOptions: {zIndexing: true}
});
map.addLayer(vectors);
selectControl = new OpenLayers.Control.SelectFeature(vectors);
map.addControl(selectControl);
selectControl.activate();
vectors.events.on({
'featureselected': onFeatureSelect
});
measure();
initother();
}
function initother(){
// add some editing tools to a panel
var panel = new OpenLayers.Control.Panel({
displayClass: "olControlEditingToolbar"
});
modify = new OpenLayers.Control.Button({
title: "随基站而动",
trigger: function() {
setFix();
if(fix==0){
modify.deactivate();
}else{
modify.activate();
}
},
displayClass: "olControlModifyFeature"
});
measure = new OpenLayers.Control.Button({
title: "目测",
trigger: function() {
setMea();
control = measureControls['line'];
if(mea && mea==1) {
control.activate();
measure.activate();
} else {
if(popup2){
popup2.hide();
}
control.deactivate();
measure.deactivate();
}
},
displayClass: "olControlDrawFeaturePolygon"
});
panel.addControls([
measure,
modify
]);
map.addControl(panel);
//modify.activate();
var areaCode = $("#areaCode").val();
if(areaCode=='')
{
areaCode = "-1";
}
// alert(areaCode);
if(areaCode=="-1"){
map.setCenter(new OpenLayers.LonLat(125.30593872070312, 43.87017822557581),5);
}
if(areaCode.indexOf("1")==0){
//长春
map.setCenter(new OpenLayers.LonLat(125.30593872070312, 43.87017822557581),9);
}
if(areaCode.indexOf("2")==0){
//吉林
map.setCenter(new OpenLayers.LonLat(126.54957208782434, 43.837883069515065),9);
}
if(areaCode.indexOf("3")==0){
//延吉
map.setCenter(new OpenLayers.LonLat(129.71832275390625, 42.898100636939276),9);
}
if(areaCode.indexOf("4")==0){
//四平
map.setCenter(new OpenLayers.LonLat(124.35012817382812, 43.167125915000284),9);
}
if(areaCode.indexOf("5")==0){
//通化
map.setCenter(new OpenLayers.LonLat(125.93971252441406, 41.72828028223453),9);
}
if(areaCode.indexOf("6")==0){
//白城
map.setCenter(new OpenLayers.LonLat(122.83882141113281, 45.61980072095504),9);
}
if(areaCode.indexOf("7")==0){
//辽源
map.setCenter(new OpenLayers.LonLat(125.13633728027344, 42.896088552971065),9);
}
if(areaCode.indexOf("8")==0){
//松原
map.setCenter(new OpenLayers.LonLat(124.82511788606643, 45.141789104141836),9);
}
if(areaCode.indexOf("9")==0){
//白山
map.setCenter(new OpenLayers.LonLat(126.44920349121094, 41.94110578381598), 9);
}
}
</script>
<script>
var fix = 0;//是否固定地图
var mea = 0;
var features,count=0;
function showBTS(){
if(vectors){
vectors.removeAllFeatures();
}
var areaCode = document.getElementById("areaCode").value;
$.post("gis_getBTSbyArea4Gis.action?areaCode="+areaCode,function(data){
count = 0;
features = geojson.read(data,"FeatureCollection");
startOrie();
});
}
var measureControls;
function measure(){
var sketchSymbolizers = {
"Point": {
pointRadius: 4,
graphicName: "square",
fillColor: "white",
fillOpacity: 1,
strokeWidth: 1,
strokeOpacity: 1,
strokeColor: "#333333"
},
"Line": {
strokeWidth: 3,
strokeOpacity: 1,
strokeColor: "#FF0000",
strokeDashstyle: "dash"
}
};
var style = new OpenLayers.Style();
style.addRules([
new OpenLayers.Rule({symbolizer: sketchSymbolizers})
]);
var styleMap = new OpenLayers.StyleMap({"default": style});
measureControls = {
line: new OpenLayers.Control.Measure(
OpenLayers.Handler.Path, {
persist: true,
handlerOptions: {
layerOptions: {styleMap: styleMap}
}
}
)
};
var control;
for(var key in measureControls) {
control = measureControls[key];
control.events.on({
"measure": handleMeasurements,
"measurepartial": handleMeasurements
});
map.addControl(control);
}
}
var popup2;
function handleMeasurements(event) {
var geometry = event.geometry;
var units = event.units;
var order = event.order;
var measure = event.measure;
if(geometry){
var point;
if(geometry.getVertices()&&geometry.getVertices().length>1){
point = geometry.getVertices()[geometry.getVertices().length-1];
}
if (popup2 == null) {
popup2 = new OpenLayers.Popup("Measure",
new OpenLayers.LonLat(point.x,point.y),
new OpenLayers.Size(150,35),
"",
false);//右上角关闭按钮
popup2.setBackgroundColor("#F7C329");
popup2.setOpacity(0.9);
map.addPopup(popup2);
} else {
popup2.show();
popup2.lonlat = new OpenLayers.LonLat(point.x,point.y);
map.addPopup(popup2);
}
var data = "";
if(order == 1) {
data += "距离: " + measure.toFixed(1) + " " + units;
} else {
data += "距离: " + measure.toFixed(1) + " " + units + "<sup>2</" + "sup>";
}
popup2.setContentHTML(data);
}
}
function locorie(){
if(features) {
if(features.length-count<=4)
{
map.setCenter(new OpenLayers.LonLat(features[count].geometry.x, features[count].geometry.y), 12);
}
vectors.addFeatures([features[count],features[++count],features[++count],features[++count],features[++count]]);
if(fix==1){
map.setCenter(new OpenLayers.LonLat(features[count].geometry.x, features[count].geometry.y), 12);
}
//window.status = (features.length-count)+"/"+features.length;
}
}
function startOrie(){
if(features) {
if((count)<=features.length){
var t=setTimeout("locorie();startOrie();",0.5);
}else{
while((features.length-count)>=2){
vectors.addFeatures(features[++count]);
//window.status = (features.length-count)+"/"+features.length;
}
}
}
}
function setFix(){
if(fix==0){
fix = 1;
}else{
fix = 0;
}
}
function setMea(){
if(mea==0){
mea = 1;
}else{
mea = 0;
}
}
function onFeatureSelect(evt) {
feature = evt.feature;
if(feature.attributes.oid){
getBTSDetail(feature.attributes.oid);
if(fix==1){
map.setCenter(new OpenLayers.LonLat(feature.geometry.x, feature.geometry.y),12);
}else{
map.setCenter(new OpenLayers.LonLat(feature.geometry.x, feature.geometry.y));
}
}
}
function getBTSDetail(btsCode){
$.post("gis_getBTSDetail4Gis.action?areaCode="+btsCode,function(data){
var json = eval('('+data+')');
for(var b=0;b<json.bts.length;b++){
var id = parseFloat(""+json.bts[b].i);
var lot = parseFloat(""+json.bts[b].o);
var lat = parseFloat(""+json.bts[b].a);
$("#bts").html("区域名称:"+json.bts[b].m+";基站编号:"+json.bts[b].i+";基站名称:"+json.bts[b].n+";经度:"+json.bts[b].o+";纬度:"+json.bts[b].a);
}
});
}
</script>
</html>
转载自：https://blog.csdn.net/mach365/article/details/16993761
