# openlayer 绘制线
openlayer 绘制线
上一小节说了一下openlayer绘制坐标标记点,这一次说一下绘制线,其实也很简单。
// 初始化地图
initMap() {
map = new Map({
layers: [
new TileLayer({
source: new OSM(),
}),
],
target: 'map',
view: new View({
center: [116.403218, 39.92372],
zoom: 12,
maxZoom: 18,
projection: 'EPSG:4326',
constrainResolution: true, // 设置缩放级别为整数
smoothResolutionConstraint: false, // 关闭无级缩放地图
}),
});
this.addPoint()
this.addLine()
},
// 绘制坐标点
addPoint() {
let feature = new Feature({
title: 'beijing',
geometry: new Point([116.403218, 39.92372]),
})
feature.setStyle(
new Style({
image: new CircleStyle({
fill: new Fill({
color: 'blue',
}),
radius: 4,
}),
})
);
let source = new VectorSource()
source.addFeature(feature)
let layer = new VectorLayer()
layer.setSource(source)
map.addLayer(layer)
},
// 绘制连线
addLine() {
let featureLine = new Feature({
geometry: new LineString([
[116.403218, 39.92372],
[116.503218, 39.62372],
]),
});
let source = new VectorSource()
source.addFeature(featureLine)
let layer = new VectorLayer()
layer.setSource(source)
map.addLayer(layer)
}
偶买噶!太简单了吧这也!
【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】粘你一身大鼻嘎 : http://www.cnblogs.com/wjw1014
【CSDN地址】粘你一身大鼻嘎 : https://wjw1014.blog.csdn.net/
【Gitee地址】粘你一身大鼻嘎 :https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】粘你一身大鼻嘎 : http://www.cnblogs.com/wjw1014
【CSDN地址】粘你一身大鼻嘎 : https://wjw1014.blog.csdn.net/
【Gitee地址】粘你一身大鼻嘎 :https://gitee.com/wjw1014