本文实例为大家分享了Openlayers实现图形绘制的具体代码,供大家参考,具体内容如下
1,新建一个html页面,引入ol.js文件,然后在身体中创建一个div标签,标签标签和一个选择下拉选项卡;
2代码实现
& lt; !DOCTYPE html>
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title> & lt;/title>
& lt;脚本src=" https://www.yisu.com/lib/ol/ol.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
窗口。onload=function () {//获取下拉列表框
var typeSelect=. getelementbyid(“类型”);//定义一个用来接收绘制对象的对象,方便以后对绘制对象进行添加,移除等操作
var画;//初始化地图对象
var=new ol.Map地图({
目标:“地图”,
层:[
新ol.layer.Tile ({
来源:新ol.source.OSM ()
})
),
观点:新ol.View ({
中心:(0,0),
变焦:3
})
});//初始化矢量数据源对象//wrapX:包装世界水平。默认是正确的。//用于矢量编辑在-180°和180°经脉正常工作,这应该是设置为false
var=new ol.source来源。向量({wrapX:假});//实例化矢量数据图层
var向量=new ol.layer.Vector ({//数据源
来源:来源,//样式
风格:新ol.style.Style ({//样式填充
填写:新ol.style.Fill ({//填充颜色
颜色:“rgba (37241239, 0.2)”
}),//笔触
中风:新ol.style.Stroke ({//笔触颜色
颜色:# 264 df6,//笔触宽度
宽:2
}),//图形样式,主要适用于点样式
图片:新ol.style.Circle ({//半径大小
半径:7,//填充
填写:新ol.style.Fill ({//填充颜色
颜色:# e81818”
})
})
})
});//将矢量图层加载到映射中
map.addLayer(向量);//添加绘图交互的函数
函数addInteraction () {//获取当前选择的绘图类型
var值=https://www.yisu.com/zixun/typeSelect.value;//如果当前选择的绘图类型不为“没有”的话,则进行相应绘图操作//如果当前选择的绘图类型为“没有”的话,则清空矢量数据源
如果(价值!=='没有'){//如果当前的矢量数据源为空的话,则重新创建和设置数据源//因为当你选择的绘图类型为“没有”时,会清空数据源
如果(源==null) {=new ol.source来源。向量({wrapX:假});
vector.setSource(源);
}//geometryFunction变量,用来存储绘制图形时的回调函数//maxPoints变量,用来存储最大的点数量
var geometryFunction maxPoints;//如果当前选择的绘图类型是“广场”的话,则将值设置为圆//然后调用createRegularPolygon()方法
如果(值=https://www.yisu.com/zixun/==肮愠 ?{
值=' https://www.yisu.com/zixun/Circle ';//创建一个geometryFunction类型:“圆”//将创建一个正多边形与用户指定数量的边和角,而不是一个ol.geom开始。//根据圆来创建一个四边形
geometryFunction=ol.interaction.Draw.createRegularPolygon (4);
}else if (value=https://www.yisu.com/zixun/==熬匦巍?{//如果当前选择的绘图类型是“广场”的话,则将值设置为LineString
值=' https://www.yisu.com/zixun/LineString ';//设置最大点数为2
maxPoints=2;
geometryFunction=函数(坐标、几何){//如果几何对象不存在或者为空,则创建
如果(几何){
几何=new ol.geom.Polygon(空);
}//开始点的坐标
var开始[0]=坐标;//结束点的坐标
var=结束坐标[1];//根据开始坐标和结束坐标设置绘图点坐标
geometry.setCoordinates ([
[开始,[[0]开始,结束[1]],最终,[[0],[1]]开始,开始)
]);
返回几何;
};
}//将交互绘图对象赋给画对象//初始化交互绘图对象
画=new ol.interaction.Draw ({//数据源
来源:来源,//绘制类型
类型:值,//回调函数//函数叫做当几何坐标更新
geometryFunction: geometryFunction,//最大点数
maxPoints: maxPoints
});//将画对象添加到地图中,然后就可以进行图形绘制了
map.addInteraction(画);
其他}{//清空矢量数据源
源=零;//设置矢量图层的数据源为空
vector.setSource(源);
}
}//当绘制类型下拉列表框的选项发生改变时执行
typeSelect。onchange=function (e) {//从地图中移除交互绘图对象//如果不移除,则会在下拉列表框选项发生改变时再次进行绘制时,保留上一次的画对象
map.removeInteraction(画);//执行添加绘图交互的函数
addInteraction ();
};//添加绘图交互的函数//此处是为保证刷新页面后,仍然能够根据下拉列表框框的选项进行图形绘制
addInteraction ();
};
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=安说ァ北?
& lt; label>几何图形绘制:& lt;/label>
& lt;选择id=袄嘈汀北?
& lt;选项值=" https://www.yisu.com/zixun/None "祝辞无& lt;/option>
& lt;选项值=" https://www.yisu.com/zixun/Point "祝辞点& lt;/option>
& lt;选项值=" https://www.yisu.com/zixun/LineString "祝辞线& lt;/option>
& lt;选项值=" https://www.yisu.com/zixun/Polygon "祝辞多边形& lt;/option>
& lt;选项值=" https://www.yisu.com/zixun/Circle "祝辞圆& lt;/option>
& lt;选项值=" https://www.yisu.com/zixun/Square "祝辞正方形& lt;/option>
& lt;选项值=" https://www.yisu.com/zixun/Rectangle "祝辞长方形& lt;/option>
& lt;/select>
& lt;/div>
& lt; div id="地图"祝辞& lt;/div>
& lt;/body>
& lt;/html>
