WebGIS二次开发-12-绘制点

最新推荐文章于 2024-08-31 21:18:22 发布

团子WebGIS

最新推荐文章于 2024-08-31 21:18:22 发布

阅读量125

点赞数

分类专栏： WebGIS GIS javascript 文章标签： css javascript css3 Powered by 金山文档

本文链接：https://blog.csdn.net/bguihiub/article/details/129241469

版权

WebGIS 同时被 3 个专栏收录

22 篇文章 4 订阅

订阅专栏

GIS

21 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 1 订阅

订阅专栏

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)