new ol.geom.Point([114.30,30.50])
//点要素的[lng,lat]经纬度用数组包裹
<body>
<div id="map_container">
</div>
<script>
/* 一、渲染地图 */
const map = new ol.Map({
target: 'map_container',
layers: [TianDiMap_vec, TianDiMap_cva],
view: new ol.View({
projection: 'EPSG:4326', // 经纬度坐标系(默认是默卡托坐标系)
center: [114, 30],
zoom: 4
})
})
/* 一、绘制点 */
/* 1、创建要素类 */
const point = new ol.Feature({
/* 创建点 */
geometry:new ol.geom.Point([114.4,30.6])
})
/* 2、设置样式 */
point.setStyle(
new ol.style.Style({
// 形状
image:new ol.style.Circle({
radius:17,
/* 填充色 */
fill:new ol.style.Fill({
color:'rgba(0,0,0,0.5)'
}),
/* 描边 */
stroke:new ol.style.Stroke({
color:'#ff2d51',
width:2
})
})
})
)
/* 3、创建数据源 创建要素*/
const source= new ol.source.Vector({
features:[point]
})
/* 4、创建图层 */
const vector = new ol.layer.Vector({
source:source
})
/* 5、将图层添加到地图 */
map.addLayer(vector)
</script>
</body>
1、设置样式的要素
const point = new ol.Feature({
/* 创建点 */
geometry: new ol.geom.Point([114.4, 30.6])
})
const style = new ol.style.Style({
// 形状
image: new ol.style.Circle({
radius: 17,
/* 填充色 */
fill: new ol.style.Fill({
color: 'rgba(0,0,0,0.5)'
}),
/* 描边 */
stroke: new ol.style.Stroke({
color: '#ff2d51',
width: 2
})
})
})
point.setStyle(style);
2、给图层设置样式
const vector = new ol.layer.Vector({
source: source,
// style
})
vector.setStyle(style)
3、设置多个点要素
/* 1、创建要素类 */
const point = new ol.Feature({
/* 创建点 */
geometry: new ol.geom.Point([114.4, 30.6])
})
const point2 = new ol.Feature({
/* 创建点 */
geometry: new ol.geom.Point([120, 40])
})
/* 3、创建数据源 创建要素*/
const source = new ol.source.Vector({
features: [point,point2]
})
const style = new ol.style.Style({
// 形状
image: new ol.style.Circle({
radius: 17,
/* 填充色 */
fill: new ol.style.Fill({
color: 'rgba(0,0,0,0.5)'
}),
/* 描边 */
stroke: new ol.style.Stroke({
color: '#ff2d51',
width: 2
})
})
})
/* 4、创建图层 */
const vector = new ol.layer.Vector({
source: source,
// style
})
vector.setStyle(style)
/* 5、将图层添加到地图 */
map.addLayer(vector)