openlayer基本构建01
2019-10-15 本文已影响0人
请叫我刚爷
以下为openlayer地图的基本构建，只是一个地图的简单显示。小编使用的时openlayer的4.6.4版本，以下代码粘贴复制后，更改js引用，可直接使用。
<!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
})
});
</script>
</html>
