<!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
});
//添加图层
var pointVector = new ol.layer.Vector({
source: new ol.source.Vector({
features:[pointFeature],
})
});
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 lineVector = new ol.layer.Vector({
source: new ol.source.Vector({
features:[lineFeature],
})
});
map.addLayer(lineVector);//点位上图
//为地图添加一个面
var routeCoords1=[[]];
routeCoords1[[0]].push([116.487271,39.912501]);
routeCoords1[[0]].push([116.422122,39.701176]);
routeCoords1[[0]].push([116.458258,39.304600]);
var polygonGeom=new ol.geom.Polygon(routeCoords1);
var polygonFeature = new ol.Feature({
geometry: polygonGeom
});
var polygonVector = new ol.layer.Vector({
source: new ol.source.Vector({
features:[polygonFeature],
})
});
map.addLayer(polygonVector);//点位上图
</script>
</html>
网友评论