Openlayers
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test4.aspx.cs" Inherits="test4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#map {
height: 600px;
width: 800px;
border: 1px solid black;
}
.reds {
background-color: red;
}
.greens {
background-color: green;
}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<link href="css/ol.css" rel="stylesheet" />
<script src="js/ol.js"></script>
</head>
<body>
aaaaaaaaaaaaaa:
<div id="count"></div>
<div id="map" style="width: 850px; height: 750px"></div>
</body>
</html>
<script type="text/javascript">
var totalView = new ol.View({
extent: [113.468897, 36.055732, 119.869576, 42.623632],
center: [116.6692365, 39.339682],
zoom: 7.3,
minZoom: 7,//缩放等级最小等级
maxZoom: 8, //缩放等级最大等级
projection: 'EPSG:4326',
zindex: 5
});
//创建地图
var map = new ol.Map({
logo: { src: 'image/favicon.ico', href: 'http://huatron.cn' }, // 点击能跳转到对应页面
logo: false, // 不显示logo
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
zindex: 5//显示z顺序
})
],
view: totalView,//控制缩放等级
target: 'map'//目标div
});
//增加数据图层
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: '130000.txt',
format: new ol.format.GeoJSON()
})
});
map.addLayer(vectorLayer);
var dxarray = [117.33, 117.22, 116.37, 116.52];
var dyarray = [38.40, 38.07, 37.65, 37.89];
var cssarray = ['reds', 'greens', 'reds', 'greens'];
var numarray = ['51', '52', '61', '66']
//循环添加站点数据 click时间
for (var i = 0; i < dxarray.length; i++) {
var dx = dxarray[i];//x坐标
var dy = dyarray[i];//y坐标
var elementsss = document.createElement('div');
elementsss.className = cssarray[i];
elementsss.innerText = numarray[i];
//注册单击事件
elementsss.onclick = function () {
alert(this.innerText);
}
//注册鼠标划入事件
elementsss.onmouseover = function() {
//alert(this.innerText+":test划入")
}
//注册鼠标移出事件
elementsss.onmouseout = function () {
//alert(this.innerText+":test划出");
}
var makerss = new ol.Overlay({
position: [dx, dy],
positioning: 'center-center',
element: elementsss
});
map.addOverlay(makerss);
}
//叠图片 加载动态图片
var radarLayer =
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'ImageDir/20200326091649_Neighbour.jpg',
projection: 'EPSG:3857',
imageExtent: ol.proj.transformExtent([113.468897, 36.055732, 119.869576, 42.623632], 'EPSG:4326', 'EPSG:3857')//经纬度一定要设置对 是河北的就给河北的经纬度
})
});
map.addLayer(radarLayer);
map.addLayer(radarLayer);
var ttt = map.getLayers()
if (ttt.getLength() > 2) {
map.removeLayer(ttt.item(2));
}
</script>
