<!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">
//固定json格式数据：
var back_data=[
{
"address":"五指山测试工地",
"cameraId":"T204",
"lat":"18.77520",
"lon":"109.5170"
},
{
"address":"成都火车站",
"cameraId":"成都火车站",
"lat":"30.707095990039168",
"lon":"104.07902163517471"
}
]
/**
* 数据转换
*/
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 name1= decodeURI(getQueryVariable("name")) ;
var url1= getQueryVariable("url") ;
console.log("name1=="+name1);
console.log("url1=="+url1);
var queryData = back_data.filter(function (_data) {
return _data.cameraId == name1;
});
console.log("info=="+queryData[0].key);
var address=queryData[0].address;
var lat=queryData[0].lat;
var lon=queryData[0].lon;
console.log("queryData.address=="+address);
console.log("lat=="+lat+",lon=="+lon);
//const coord1 = [104.07902163517471,30.707095990039168];//[120.61106,31.33116]; 104.07902163517471,30.707095990039168
var coord=[];coord[0]=Number(lon);coord[1]=Number(lat);
//console.log(coord1);
console.log(coord);
var info_key=queryData[0].key;
// 创建地图
var map =new ol.Map({
layers: [
baiduMapLayer2
],
view: new ol.View({
//地图设置中心，设置为海南五指山
center: ol.proj.transform(coord, '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 })
})
});
}
//标点渲染
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
}
show_dian(queryData[0]);
/**
* 实现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);
// 新�
OpenLayers做的地图小应用
需积分: 5 66 浏览量
2023-03-02
15:22:24
上传
评论
收藏 1012KB RAR 举报
OpenLayers做的地图小应用 （167个子文件） 
ol.css 3KB
map.html 10KB
home.jpg 19KB ol.js 492KB
8.png 18KB 7.png 17KB 6.png 17KB 6.png 16KB 6.png 16KB 6.png 16KB 5.png 15KB 7.png 14KB 5.png 14KB 7.png 14KB 9.png 13KB 5.png 13KB 9.png 12KB 8.png 12KB 9.png 11KB 5.png 11KB 10.png 11KB 8.png 11KB 4.png 11KB 8.png 10KB 5.png 10KB 7.png 10KB 8.png 10KB 4.png 9KB 7.png 9KB 5.png 9KB 10.png 9KB 11.png 8KB 4.png 8KB 7.png 8KB 7.png 8KB 5.png 8KB 7.png 8KB 9.png 8KB 5.png 8KB 5.png 8KB 9.png 8KB 5.png 7KB 6.png 7KB 4.png 7KB 6.png 7KB 11.png 7KB 12.png 7KB 12.png 7KB 13.png 6KB 10.png 6KB 8.png 6KB 10.png 6KB 4.png 6KB 6.png 6KB 4.png 6KB 7.png 6KB 6.png 6KB 9.png 6KB 8.png 6KB 5.png 6KB 7.png 5KB 4.png 5KB 4.png 5KB 13.png 5KB 9.png 5KB 4.png 5KB 8.png 5KB 8.png 5KB 13.png 5KB 9.png 5KB 13.png 5KB 11.png 5KB 6.png 5KB 12.png 5KB 4.png 5KB 10.png 5KB 12.png 5KB 13.png 5KB 12.png 5KB 12.png 5KB 6.png 5KB 12.png 5KB 6.png 4KB 11.png 4KB 12.png 4KB 10.png 4KB 11.png 4KB 11.png 4KB 13.png 4KB 10.png 4KB 10.png 4KB 9.png 4KB 8.png 4KB 12.png 4KB 12.png 4KB 13.png 4KB 12.png 4KB 13.png 4KB 7.png 4KB 11.png 4KB共 167 条
- 1
- 2
资源评论
