<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>离线地图根据经纬度标点显示</title>
<!--<link href="${ctxPath}/static/css/ol.css" rel="stylesheet" type="text/css" />-->
<!--<script src="${ctxPath}/static/js/ol.js"></script>-->
<link href="./ol.css" rel="stylesheet" type="text/css" />
<script src="./ol.js" type="text/javascript"></script>
<style type="text/css">
body, html {
border: none;
padding: 0;
margin: 0;
}
#menu {
width: 100%;
height: 20px;
padding: 5px 10px;
font-size: 14px;
font-family: "微软雅黑";
left: 10px;
text-align: center;
}
#mapCon {
width: 100%;
height: 600px;
position: relative;
}
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 45px;
left: -50px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
#popup-content {
font-size: 14px;
font-family: "微软雅黑";
}
#popup-content .markerInfo {
font-weight: bold;
}
</style>
</head>
<body>
<div id="menu" style="font-weight:bold">
<!--鼠标单击标注点，弹出Popup标注-->
</div>
<div id="mapCon">
<!-- Popup -->
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content">
</div>
</div>
</div>
<script type="text/javascript">
//利用ajax对后台接口进行调用
/*var back_data = [];
$.ajax({
//请求方式
type : "POST",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
//请求设置异步
async: false,
//请求地址
url : Feng.ctxPath + "/camera/getCameraList",
//请求成功
success : function(result) {
back_data=result;
console.log(result);
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
//console.log(list);
console.log(back_data);*/
//固定json格式数据：
var back_data=[
{
"address":"五指山测试工地",
"cameraId":"T204",
"lat":"18.77520",
"lon":"109.5170"
},
{
"address":"椰树第三工业城测试工地",
"cameraId":"T206",
"lat":"19.9332",
"lon":"110.1424"
},
{
"address":"海南热带野生动物园测试工地",
"cameraId":"T214",
"lat":"19.7688",
"lon":"110.2477"
},
{
"address":"白石岭测试工地",
"cameraId":"T213",
"lat":"19.1607",
"lon":"110.3775"
},
{
"address":"海南大学测试工地",
"cameraId":"T212",
"lat":"20.06089",
"lon":"110.32645"
}
]
/**
* 数据转换
*/
var new_cicy_data = [];
for (let i = 0; i < back_data.length; i++) {
new_cicy_data[i] = back_data[i];
back_data[i].ol = [];
back_data[i].ol[0] = parseFloat(back_data[i].lon);
back_data[i].ol[1] = parseFloat(back_data[i].lat);
back_data[i].key = i;
}
console.log(new_cicy_data);
/**
* 实例化Map对象加载地图,默认底图加载天地图
*/
//地图设置中心，设置为海南五指山
var center=ol.proj.transform([109.5170,18.77520],'EPSG:4326','EPSG:3857');
//创建地图
//创建地图
var map=new ol.Map({
view:new ol.View({
center:center,
minZoom:7,//设置缩放的最大和最小级别
maxZoom:15,
zoom:8//设置默认加载的级别
}),
target:'mapCon'//要显示地图的DIV的ID
});
//添加一个使用离线瓦片地图的层
var offLineMap=new ol.layer.Tile({
source:new ol.source.XYZ({
url:'tile/{z}/{x}/{y}.png'//本例中地图瓦片保存在当前目录下的tile文件夹目录下
})
});
map.addLayer(offLineMap);
/**
* 创建标注样式函数,设置image为图标ol.style.Icon
*/
var createLabelStyle = function (feature) {
return new ol.style.Style({
image: new ol.style.Icon(
{
//设置图标点
anchor: [0.5, 60],
//图标起点
anchorOrigin: 'top-right',
//指定x值为图标点的x值
anchorXUnits: 'fraction',
//指定Y值为像素的值
anchorYUnits: 'pixels',
//偏移
offsetOrigin: 'top-right',
// offset:[0,10],
//图标缩放比例
// scale:0.5,
//透明度
opacity: 0.75,
//图标的url
src: 'image/blueIcon.png'
}),
text: new ol.style.Text({
//位置
textAlign: 'center',
//基准线
textBaseline: 'middle',
//文字样式
font: 'normal 14px 微软雅黑',
//文本内容
text: feature.get('name'),
//文本填充样式（即文字颜色）
fill: new ol.style.Fill({ color: '#aa3300' }),
stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 })
})
});
}
/**
* 遍历绚烂设备标点
*/
for (let i = 0; i < new_cicy_data.length; i++) {
show_dian(new_cicy_data[i]);
}
//标点渲染
function show_dian(info) {
//实例化Vector要素，通过矢量图层添加到地图容器中
let iconFeature = new ol.Feature({
//坐标点
geometry: new ol.geom.Point(ol.proj.fromLonLat(info.ol)),
//名称属性
name: info.cameraId,
//address: info.address,
//自定义数据，作用:唯一标识符
//自定义数据，作用:唯一标识符
key: info.key,
});
iconFeature.setStyle(createLabelStyle(iconFeature));
//矢量标注的数据源
let vectorSource = new ol.source.Vector({
features: [iconFeature]
});
//矢量标注图层
let vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
//实例化Vector要素，通过矢量图层添加到地图容器中 end
}
/**
* 实现popup的html元素
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* 在地图容器中创建一个Overlay
*/
var popup = new ol.Overlay({
//要转换成overlay的HTML元素
element: container,
//当前窗口可见
autoPan: true,
//Popup放置的位置
positioning: 'bottom-center',
//是否应该停止事件传播到地图窗口
stopEvent: false,
autoPanAnimation: {
//当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
duration: 250
}
});
map.addOverlay(popup);
/**
* 添加关闭按钮的单击事件（隐藏弹窗）
*
*/
closer.onclick = function () {
//未定义popup位置
popup.setPosition(undefined);
//失去焦点
closer.blur();
return false;
};
/**
* 动态创建弹窗的具体内容
*/
function addFeatrueInfo(info) {
//新增a元素
var elementA = document.createElement('a');
elementA.className = "markerInfo";
/*elementA.href = info.titleURL;*/
//elementA.innerText = info.att.title;
setInnerText(elementA, info.cameraId);
// 新建的div元素添加a子节点
content.appendChild(elementA);
//新增div元素
var elementDiv = document.createElement('div');
elementDiv.className = "markerText";
// elementDiv.innerText = info.text;
setInnerText(elementDiv, info.address);
// 为conten
根据经纬度对离线地图进行标点示例（用Ajax调用后台接口返回Json数据） （751个子文件） 
ol.css 3KB
map.html 9KB
home.jpg 19KB ol.js 492KB
918.png 35KB 454.png 33KB 454.png 31KB 455.png 31KB 912.png 31KB 907.png 31KB 456.png 31KB 914.png 31KB 457.png 30KB 456.png 29KB 914.png 29KB 913.png 28KB 456.png 28KB 457.png 28KB 228.png 28KB 915.png 28KB 456.png 27KB 458.png 27KB 457.png 27KB 456.png 26KB 914.png 26KB 454.png 26KB 912.png 26KB 455.png 26KB 227.png 26KB 916.png 26KB 227.png 26KB 909.png 26KB 917.png 26KB 458.png 25KB 458.png 25KB 915.png 25KB 917.png 25KB 457.png 25KB 913.png 25KB 913.png 24KB 908.png 24KB 915.png 24KB 228.png 24KB 457.png 24KB 911.png 24KB 914.png 23KB 915.png 23KB 454.png 23KB 917.png 23KB 915.png 23KB 916.png 23KB 455.png 23KB 227.png 22KB 912.png 22KB 912.png 22KB 913.png 22KB 913.png 21KB 912.png 21KB 455.png 21KB 916.png 21KB 917.png 21KB 914.png 21KB 229.png 21KB 914.png 21KB 916.png 20KB 913.png 20KB 454.png 20KB 912.png 20KB 909.png 20KB 114.png 20KB 910.png 20KB 915.png 20KB 908.png 20KB 113.png 19KB 915.png 19KB 914.png 19KB 458.png 18KB 459.png 18KB 915.png 18KB 915.png 18KB 913.png 18KB 912.png 18KB 910.png 18KB 909.png 18KB 228.png 18KB 913.png 17KB 908.png 17KB 914.png 17KB 908.png 17KB 909.png 17KB 909.png 17KB 913.png 17KB 912.png 17KB 454.png 16KB 911.png 16KB 916.png 16KB 914.png 16KB 456.png 16KB 911.png 16KB 910.png 16KB共 751 条
- 1
- 2
- 3
- 4
- 5
- 6
- 8
资源评论
KesonZ
- 粉丝: 397
最新资源
- 工程项目管理方法的核心方法.docx
- 计算机网络技术与应用试题库.doc
- 计算机三级(网络技术)笔试275.pdf
- 电子商务产业园项目可行性研究报告.doc
- 基于YOLOv8深度学习的磁瓦表面缺陷自动化检测：实验结果与效率分析 · YOLOv8 v2.1
- 计算机网络专业学生实习报告范文.doc
- 情侣装网络营销策划方案样本.doc
- 医药电商市场现状和发展态势互联网事业部培训.ppt
- 基于HTML5的响应式网站的设计与实现论文正文.docx
- 会展策划第七章第一节会展项目管理的基本理论ppt课件.ppt
- 系统集成项目管理工程师复习小结.doc
- 内河水运建设项目管理指标体系及信息系统开发设想.doc
- 因特网信息交流与网络安全教学设计(整理).pdf
- 虚拟化项目验收报告模板.docx
- 最新国家开放大学电大《优秀广告作品评析(专)》网络核心课形考网考作业及答案.pdf
- 综合布线设计的若干要点.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
