首页 > 代码库 > 离线地图解决方案（三）：地图点、线、面绘制
离线地图解决方案（三）：地图点、线、面绘制
使用鼠标，在地图上添加点、线、面，并获取所添加地物的坐标信息。
效果如下：
图元绘制后获取坐标：
<!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 rel="stylesheet" href="http://www.mamicode.com/plugin/ol3/css/ol.css" type="text/css" />
<style type="text/css">
body, #div_gis {
border: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-size: 13px;
}
</style>
<script type="text/javascript" src="http://www.mamicode.com/plugin/ol3/build/ol-debug.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/Config.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/PrivateFunction.js"></script>
</head>
<body>
<input type="button" value="http://www.mamicode.com/画点" onclick="SetMapDrawState(‘Point‘)" />
<input type="button" value="http://www.mamicode.com/画线" onclick="SetMapDrawState(‘LineString‘)" />
<input type="button" value="http://www.mamicode.com/画矩形" onclick="SetMapDrawState(‘Box‘)" />
<input type="button" value="http://www.mamicode.com/画多边形" onclick="SetMapDrawState(‘Polygon‘)" />
<input type="button" value="http://www.mamicode.com/画圆" onclick="SetMapDrawState(‘Circle‘)" />
<div id="div_gis">
</div>
</body>
</html>
<script type="text/javascript">
LoadTiandituTileMap(0, ‘div_gis‘, 1, 11, 8, 103.964571, 30.245677);
CreateVectorLayer();
</script>
离线地图解决方案（三）：地图点、线、面绘制
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。