<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<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="mainMap">
<!-- Popup -->
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content">
</div>
</div>
</div>
</body>
</html>
<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);
// 自定义分辨率和瓦片坐标系
var resolutions = [];
var maxZoom = 18;
// 计算百度使用的分辨率
for (var i = 0; i <= maxZoom; i++) {
resolutions[i] = Math.pow(2, maxZoom - i);
}
var tilegrid = new ol.tilegrid.TileGrid({
origin: [0, 0],
resolutions: resolutions // 设置分辨率
});
// 创建百度地图的数据源
var baiduSource = new ol.source.TileImage({
projection: 'EPSG:3857',
tileGrid: tilegrid,
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
var z = tileCoord[0];
var x = tileCoord[1];
var y = tileCoord[2];
// 百度瓦片服务url将负数使用M前缀来标识
if (x < 0) {
x = -x;
}
if (y < 0) {
y = -y;
}
return "tile/" + z + "/" + x + "/" + y + ".png";
}
});
// 百度地图层
var baiduMapLayer2 = new ol.layer.Tile({
source: baiduSource
});
// 创建地图
var map =new ol.Map({
layers: [
baiduMapLayer2
],
view: new ol.View({
//地图设置中心，设置为海南五指山
center: ol.proj.transform([109.5170,18.77520], 'EPSG:4326', 'EPSG:3857'),
zoom: 8
}),
target: 'mainMap'
});
/**
* 创建标注样式函数,设置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;
};
/**
* 动态创建弹窗的具体内容
格式：7z 资源大小：1.6MB
格式：js 资源大小：309.1KB
百度离线地图实现（可完全实现断网访问） （435个子文件） 
ol.css 3KB
map.html 10KB
home.jpg 19KB ol.js 492KB
68.png 33KB 63.png 29KB 64.png 29KB 68.png 29KB 66.png 28KB 67.png 28KB 66.png 28KB 66.png 27KB 65.png 27KB 65.png 27KB 67.png 26KB 66.png 26KB 63.png 25KB 67.png 25KB 65.png 25KB 33.png 25KB 64.png 24KB 63.png 24KB 62.png 24KB 64.png 23KB 67.png 23KB 65.png 23KB 64.png 23KB 65.png 23KB 64.png 22KB 68.png 22KB 66.png 22KB 66.png 22KB 67.png 22KB 64.png 22KB 68.png 21KB 34.png 21KB 65.png 21KB 63.png 21KB 33.png 21KB 67.png 21KB 31.png 21KB 65.png 20KB 66.png 20KB 68.png 20KB 32.png 20KB 33.png 20KB 67.png 20KB 32.png 18KB 16.png 16KB 32.png 16KB 64.png 16KB 62.png 15KB 63.png 15KB 31.png 15KB 68.png 15KB 32.png 14KB 34.png 13KB 16.png 12KB 8.png 12KB 33.png 9KB 17.png 8KB 33.png 7KB 69.png 7KB 69.png 7KB 26.png 6KB 15.png 6KB 4.png 6KB 31.png 6KB 67.png 6KB 13.png 6KB 34.png 6KB 55.png 5KB 63.png 5KB 25.png 5KB 34.png 5KB 66.png 5KB 12.png 5KB 7.png 5KB 27.png 5KB 68.png 5KB 25.png 5KB 26.png 5KB 15.png 4KB 62.png 4KB 27.png 4KB 56.png 4KB 28.png 4KB 16.png 4KB blueIcon.png 4KB 3.png 4KB 69.png 4KB 18.png 4KB 30.png 3KB 68.png 3KB 13.png 3KB 18.png 3KB 3.png 3KB 6.png 3KB 16.png 3KB 54.png 3KB共 435 条
- 1
- 2
- 3
- 4
- 5
资源评论
深白色的风2020-07-24优秀优秀优秀
KesonZ2020-07-25哈哈哈，谢谢夸奖！
KesonZ
- 粉丝: 398
最新资源
- 北京某病房楼橡胶地面施工技术(工作总结).doc
- chromedriver-linux64-141.0.7383.0(Canary).zip
- chromedriver-mac-arm64-141.0.7383.0(Canary).zip
- 骨质疏松症诊断专家共识.ppt
- 项目6-施工临时工程及独立费用编制.ppt
- 副温混凝土法在主体工程施工应用.doc
- 第12章-动载荷与疲劳强度简述.doc
- “活动营销”是房地产营销最重要的环节.doc
- [甘肃]框剪结构商住楼工程安全专项施工方案.doc
- [重庆]卷烟厂房改造人工挖孔桩基础施工方案.doc
- 5S目视化管理详细图集.ppt
- 第二部分-通用条款.doc
- 城市商品房预售管理办法.ppt
- 度校长个人工作总结.doc
- 如何做好工程签证-2.ppt
- 2013年雀巢ICP大会--设计延展部分--酷地企划--20131124.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
