<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/ol.css">
<script type="text/javascript" src="js/ol-debug.js"></script>
<script type="text/javascript" src="js/ol.js" ></script>
<style type="text/css">
html,body,#map{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
</style>
<title>构建地图</title>
</head>
<body>
<div id="map" class="map"></div>
</body>
<script type="text/javascript">
//构建地图
var map=new ol.Map({
target:"map",//绑定元素IP
layers:[
new ol.layer.Tile({
source: new ol.source.OSM()//默认使用国外的免费地图
})
/* ,
new ol.layer.Tile({
source: new ol.source.XYZ({
url:'http://t0.tianditu.gov.cn/vec_c/wmts?tk ，xxxxx' //可使用第三方地图作为地图
}) */
],
view:new ol.View({ //视图创建
projection:"EPSG:4326",//指定使用坐标的标准
center: [116.390373,39.9078],
zoom: 10,
minZoom: 2,
maxZoom: 18
})
});
//---------------------------------------------------------------------------------------------------------------
//为地图添加一个点位
var pointCoords=[116.390373,39.9078];
//创建一个点位设置坐标
var pointGeom = new ol.geom.Point(pointCoords);
var pointFeature = new ol.Feature({
geometry: pointGeom,
// ,
// name:'这是一个点点'
});
//为点位设置样式
var pointFill = new ol.style.Fill({ //圆的填充颜色
color: 'rgba(255,255,255,0.5)'
});
var poitStroke = new ol.style.Stroke({//圆的边线颜色
color: 'rgba(255,0,0,0.5)',
width: 1.25
});
var pointStylesCircle = [
new ol.style.Style({
image: new ol.style.Circle({//此处因为上图是点位是画了个圆所以设置颜色
fill: pointFill,
stroke: poitStroke,
radius: 15
})
,
text: new ol.style.Text({
font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
fill: new ol.style.Fill({
color: 'red'
}),
text:'这是一个点'
})
})
];
var pointStylesIcon = [
new ol.style.Style({
image:new ol.style.Icon({//此处因为上图是点位是个图片
anchor:[0.5,0.5],
scale:0.8,//缩放
src:'dw.png'//图片路径
})
,
text: new ol.style.Text({
font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',//设置字体
fill: new ol.style.Fill({
color: 'red'
}),
offsetX:0,
offsetY:15,//向下偏移
textAlign:'left',//文字居中或者偏左偏右
// textBaseline:'top',
text:'这是一个点'
})
,
zIndex:120
})
];
//添加图层
var pointVector = new ol.layer.Vector({
source: new ol.source.Vector({
features:[pointFeature],
}),
// style:pointStylesCircle,//可以设置为圆
style:pointStylesIcon//设置为图片
});
map.addLayer(pointVector);//点位上图
//---------------------------------------------------------------------------------------------------------------
//为地图添加一条线
var routeCoords0=[];
routeCoords0.push([116.387271,39.912501]);
routeCoords0.push([116.422122,39.701176]);
routeCoords0.push([116.358258,39.904600]);
var lineGeom=new ol.geom.LineString(routeCoords0);
var lineFeature = new ol.Feature({
geometry: lineGeom
});
var lineStyles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255,0,0,0.5)',
width: 3 //线的粗细
})
,
text: new ol.style.Text({
font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',//设置字体
fill: new ol.style.Fill({
color: 'red'
}),
offsetX:0,
offsetY:15,//向下偏移
textAlign:'right',//文字居中或者偏左偏右
// textBaseline:'top',
text:'这是一条线'
})
,
zIndex:120
})
];
var lineVector = new ol.layer.Vector({
source: new ol.source.Vector({
features:[lineFeature],
}),
style:lineStyles
});
map.addLayer(lineVector);//点位上图
//---------------------------------------------------------------------------------------------------------------
//为地图添加一个面
var routeCoords1=[[]];
routeCoords1[[0]].push([116.487271,39.912501]);
routeCoords1[[0]].push([116.602122,39.701176]);
routeCoords1[[0]].push([116.488258,39.604600]);
var polygonGeom=new ol.geom.Polygon(routeCoords1);
var polygonFeature = new ol.Feature({
geometry: polygonGeom
});
var polygonFill = new ol.style.Fill({//填充属性设置
color: 'rgba(255,0,0,0.5)'
});
var polygonStroke = new ol.style.Stroke({ //边线属性设置
color: '#3399CC',
width: 1.25
});
var polygonStyles = [
new ol.style.Style({
fill: polygonFill,
stroke: polygonStroke
,
text: new ol.style.Text({
font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',//设置字体
fill: new ol.style.Fill({
color: '#FFF'
}),
offsetX:0,
offsetY:0,//向下偏移
textAlign:'center',//文字居中或者偏左偏右
textBaseline:'bottom',
text:'这是一面'
})
,
zIndex:120
})
];
var polygonVector = new ol.layer.Vector({
source: new ol.source.Vector({
features:[polygonFeature],
}),
style:polygonStyles
});
map.addLayer(polygonVector);//点位上图
</script>
</html>
网友评论