<!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>
<script src="js/jquery-2.1.4.min.js"></script>
<style type="text/css">
html,body,#map{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
</style>
<title>构建地图</title>
</head>
<style>
#map{
width: 100vw;
height: 98vh;
}
</style>
<body>
<label>选择类型：</label>
<select id="type">
<option value="None">无</option>
<option value="Point">点</option>
<option value="LineString">线</option>
<option value="Polygon">面</option>
<option value="Circle">圆</option>
</select>
<button onclick="updateDraw()" > 修改 </button>
<div id="map" class="map"></div>
</body>
<script type="text/javascript">
var drawSourceVector = new ol.source.Vector({wrapX: false});
var drawLayerVector = new ol.layer.Vector({
source: drawSourceVector
});
//构建地图
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' //可使用第三方地图作为地图
}) */
,
drawLayerVector
],
view:new ol.View({ //视图创建
projection:"EPSG:4326",//指定使用坐标的标准
center: [116.390373,39.9078],
zoom: 10,
minZoom: 2,
maxZoom: 18
})
});
var drawType = document.getElementById('type');
var draw;
function drawfunction() {
var value = drawType.value;
if (value !== 'None') {
draw = new ol.interaction.Draw({
source: drawSourceVector,
type: value
});
map.addInteraction(draw);
}
}
drawType.onchange = function() {
map.removeInteraction(draw);
map.removeInteraction(snap);
drawfunction();
};
//------------------------------------------------------------------------------------
var modify = new ol.interaction.Modify({source: drawSourceVector});
map.addInteraction(modify);
var snap;
function updateDraw(){
map.removeInteraction(draw);
map.removeInteraction(snap);
snap = new ol.interaction.Snap({source: drawSourceVector});
map.addInteraction(snap);
}
</script>
</html>
网友评论