openlayers 画点并标注，用静态图片作为图层，并从数据库加载点信息显示在图层上。
<!DOCTYPE html>
<html>
<head>
<title>Static Image</title>
<link rel="stylesheet" href="../Scripts/openlayers/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="../Scripts/openlayers/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="../Scripts/openlayers/ol.js"></script>
<script src="../Scripts/Class/jquery-1.10.2.min.js"></script>
<script src="../Scripts/Common/Common.js"></script>
<script src="../Scripts/Class/HttpRequest.js" type="text/javascript"></script>
<script src="../Scripts/Class/CoreConst.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/main/common/layui/layui.js"></script>
<style type="text/css">
.ol-attribution img {
display:none;
}
.layui-layer-title {
padding: 0 80px 0 20px;
height: 42px;
line-height: 42px;
border-bottom: 1px solid #222222;
font-size: 14px;
color: #333;
overflow: hidden;
background-color: #222222;
border-radius: 2px 2px 0 0;
}
</style>
</head>
<body style="overflow:hidden;width:100%;height:100%" οnlοad="init()">
<div id="map" style="overflow:hidden;width:100%;height:100%" class="map"></div>
<script>
var $Root = "http://localhost:5132";
var markingLayer = null;
var vectorSource = null;
// Map views always need a projection. Here we just want to map image
// coordinates directly to map coordinates, so we create a projection that uses
// the image extent in pixels.
var extent = [0, 0, 2426, 1600];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
vectorSource = new ol.source.Vector({
wrapX: false
});
var layerListeners = {
featureclick: function (e) {
log(e.object.name + " says: " + e.feature.id + " clicked.");
return false;
}
}
markingLayer = new ol.layer.Vector({
source: vectorSource,
eventListeners: layerListeners
});
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: '../css/images/pingmiantu.jpg',//这里添加静态图片的地址
projection: projection,
imageExtent: extent
})
}),markingLayer
],
eventListeners: {
//鼠标悬停在要素上面
featureover: function(e) {
e.feature.renderIntent = "select";
e.feature.layer.drawFeature(e.feature);
log("Map says: Pointer entered " + e.feature.id + " on " + e.feature.layer.name);
},
//鼠标离开要素
featureout: function(e) {
e.feature.renderIntent = "default";
e.feature.layer.drawFeature(e.feature);
log("Map says: Pointer left " + e.feature.id + " on " + e.feature.layer.name);
},
//鼠标点击要素
featureclick: function(e) {
log("Map says: " + e.feature.id + " clicked on " + e.feature.layer.name);
}
},
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2,
maxZoom: 8
})
});
function init() {
queryCamera();
}
map.on('click', function (evt) {
//--------------------------------------------------------------------------
//正式发布时，注释掉，用于获取地图坐标
//var pixel = evt.pixel;
//var coordinate = map.getCoordinateFromPixel(pixel); //获取像素界别的坐标
//var lonlat = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326');
//var logitude = lonlat[0];
//var lattitude = lonlat[1];
//alert(logitude + "," + lattitude);
//---------------------------------------------------------------------------
//createMarker(logitude, lattitude, '../css/images/8.png')
var feature = map.forEachFeatureAtPixel(evt.pixel, function (
feature, layer) {
return feature;
})
if (feature) {
var geometry = feature.getGeometry();
// alert(feature.type);
layui.use('layer', function () {
var layer = layui.layer;
layer.open({
type: 2,
title: 'Camera',
maxmin: true,
area: ['800px', '500px'],
content: 'camera.html?name=' + feature.attributes.userName + "&pwd=" + feature.attributes.pwd + "&ip=" + feature.attributes.ip + "&port=" + feature.attributes.port + "&chanel=" + feature.attributes.chanel,
end: function () {
// layer.tips('Hi', '#about', { tips: 1 })
}
});
});
}
});
function queryCamera() {
var url = $Root + "/Camera/queryCamera";
var httpRequest = new HttpRequest();
httpRequest.ajax(url, {}, function (ret) {
if (ret.DataTable && ret.DataTable.length > 0) {
for (var i = 0; i < ret.DataTable.length; i++) {
var obj=ret.DataTable[i];
createMarker(obj.x, obj.y, '../css/images/camera.png', obj,'camera');
}
}
//alert(ret);
});
}
function createMarker(log,lat,src,data,type) {
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([log, lat],
'EPSG:4326', 'EPSG:3857')),
name: 'Added Marker'
});
iconFeature.setStyle(new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 1,
src: src
}),
text:new ol.style.Text({ //文本样式
font: '12px Calibri,sans-serif',
text: data.name,
fill: new ol.style.Fill({
color: '#aa3300'
}),
offsetY: -55,
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
})
}));
iconFeature.attributes = data;
iconFeature.type = type;
vectorSource.addFeature(iconFeature);
}
</script>
</body>
</html>
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
