源码四。不做讲解，根据以前的博客去理解。
<%@ page contentType="text/html; charset=gb2312" %>
<%@ page import="struts.common.UserInfoBean,java.util.*" %>
<%@ page import="com.chinatelecomex.util.Constant"%>
<%@ page pageEncoding="GB2312"%>
<%@ page isELIgnored="true"%>
<html>
<head>
<title>Gis</title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/common/css/style.css">
<link type="text/css" rel="stylesheet"
href="<%=request.getContextPath()%>/css/comm.css">
<script type="text/javascript"
src="<%=request.getContextPath()%>/lib/OpenLayers.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/lib/Firebug/firebug.js"></script>
<link type="text/css" href="<%=request.getContextPath()%>/common/jquery/js/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script language=javascript src="<%=request.getContextPath()%>/common/jquery/js/jquery-1.4.2.min.js"></script>
<script language=javascript src="<%=request.getContextPath()%>/common/jquery/js/jquery-ui-1.8.11.custom.min.js"></script>
<script language=javascript src="<%=request.getContextPath()%>/common/jquery/js/jquery-ui-i18n.js"></script>
<%
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
UserInfoBean userInfo = (UserInfoBean)session.getAttribute("userInfo");
ServletContext sc= this.getServletContext();
String wms =sc.getInitParameter("WMS");
%>
<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>
<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",
//"http://192.168.0.7:8089/geoserver/gwc/service/wms",
"<%=wms%>",
{
layers: 'jilin-map',
srs: 'EPSG:4326',
format: 'image/png'
},
{
tileSize: new OpenLayers.Size(256,256)
}
);
map.addLayer(layerpublic);
geojson = new OpenLayers.Format.GeoJSON();
markers = new OpenLayers.Layer.Markers("markers");
map.addLayer(markers);
var style = new OpenLayers.Style({
fillColor: "#ffcc66",
strokeColor: "#ff9933",
strokeWidth: 1,
fillOpacity: 0.5,
//label: "${ogenId}",
fontColor: "#003366",
fontFamily: "sans-serif",
fontWeight: "bold",
labelAlign: "cm",//cm,lb,rt
cursor:"hand"
}, {
rules: [
new OpenLayers.Rule({
minScaleDenominator: 4000000,
symbolizer: {
pointRadius: "${radius1}",
fontSize: "12px",
label: "${ogens}"
}
}),
new OpenLayers.Rule({
maxScaleDenominator: 4000000,
minScaleDenominator: 937000,
symbolizer: {
pointRadius: "${radius2}",
fontSize: "15px",
label: "\n【${areaName}有${ogens}处发电行为】"
}
}),
new OpenLayers.Rule({
maxScaleDenominator: 937000,
symbolizer: {
pointRadius: "${radius3}",
fontSize: "18px",
label: "\n\n【${areaName}有${ogens}处发电行为】"
}
})
]
});
var styleHightLeight = new OpenLayers.Style({
fillColor: "##66cccc",
strokeColor: "#66cccc",
strokeWidth: 1,
fillOpacity: 0.5,
//label: "${ogenId}",
fontColor: "#003366",
fontFamily: "sans-serif",
fontWeight: "bold",
labelAlign: "cm",//cm,lb,rt
cursor:"hand"
}, {
rules: [
new OpenLayers.Rule({
minScaleDenominator: 4000000,
symbolizer: {
pointRadius: "${radius1}",
fontSize: "12px",
label: "${ogens}"
}
}),
new OpenLayers.Rule({
maxScaleDenominator: 4000000,
minScaleDenominator: 937000,
symbolizer: {
pointRadius: "${radius2}",
fontSize: "15px",
label: "\n【${areaName}有${ogens}处发电行为】"
}
}),
new OpenLayers.Rule({
maxScaleDenominator: 937000,
symbolizer: {
pointRadius: "${radius3}",
fontSize: "18px",
label: "\n\n【${areaName}有${ogens}处发电行为】"
}
})
]
});
vectors = new OpenLayers.Layer.Vector("Simple Geometry", {
styleMap: new OpenLayers.StyleMap({"default":style,"temporary":styleHightLeight,"select":styleHightLeight}),
rendererOptions: {zIndexing: true}
});
map.addLayer(vectors);
var report = function(e) {
//alert(e.type+" "+e.feature.id);
OpenLayers.Console.log(e.type, e.feature.id);
};
var selectCtrlOut = new OpenLayers.Control.SelectFeature(vectors,
{clickout: true}
);
selectControl = new OpenLayers.Control.SelectFeature(vectors, {
hover: true,
highlightOnly: true,
renderIntent: "temporary",
eventListeners: {
beforefeaturehighlighted: report,
featurehighlighted: report,
featureunhighlighted: report
}
});
map.addControl(selectControl);
map.addControl(selectCtrlOut);
selectControl.activate();
selectCtrlOut.activate();
vectors.events.on({
'featureselected': onFeatureSelect
});
measure();
initother();
}
var popup;
//点击油机图标，跳转到油机track页面
function onFeatureSelect(evt) {
feature = evt.feature;
window.location="../gis/ogen_map.jsp?areaCode="+feature.attributes.areaCode;
}
function changePage(){
window.location="../gis/ogen_map.jsp?areaCode=<%=userInfo.getAreaCode()%>";
}
</script>
<script>
var areaCode='<%=userInfo.getAreaCode()%>';
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==1){
modify.activate();
}else{
modify.deactivate();
}
},
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"
});
var changeButton = new OpenLayers.Control.Button({displayClass: "change", trigger: changePage});
panel.addControls([
changeButton,
measure,
modify
]);
map.addControl(panel);
//modify.activate();
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>
</head>
<body style="margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;">
<div id="map" style="margin:0"></div>
</body>
<body style="margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;">
<div id="map2" style="margin:0"></div>
</body>
</html>
<script>
var fix = 0;//是否固定地图
var mea = 0;
function locorie(){
$.post("../ogenmap/ogenmap_queryPreActiveOgens.action",{areaCode:areaCode},function(data){
//alert(data);
data = $.trim(data);
var features = geojson.read(data,"FeatureCollection");
var bounds;
if(features) {
if(vectors){
vectors.removeAllFeatures();
if(fix==1){
for(var i=0; i<features.length; ++i) {
if (!bounds) {
bounds = features[i].geometry.getBounds();
} else {
bounds.extend(features[i].geometry.getBounds());
}
}
}
vectors.addFeatures(features);
if(fix==1&&features.length==1){
map.setCenter(new OpenLayers.LonLat(features[0].geometry.x, features[0].geometry.y), 15);
return ;
}
if(bounds){
map.zoomToExtent(bounds);
}
}
}else{
if(vectors){
vectors.removeAllFeatures();
}
}
});
}
function startOrie(){
var t=setTimeout("locorie();startOrie();",1000*<%=Constant.RERESH_NORMAL%>);
}
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(3) + " " + units;
} else {
data += "间距: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
}
popup2.setContentHTML(data);
}
}
function setFix(){
if(fix==0){
fix = 1;
}else{
fix = 0;
}
}
function setMea(){
if(mea==0){
mea = 1;
}else{
mea = 0;
}
}
init();
locorie();
startOrie();
</script>
转载自：https://blog.csdn.net/mach365/article/details/16993929
