WebGIS二次开发-14-绘制线

最新推荐文章于 2024-07-26 11:41:15 发布

团子WebGIS

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量121

点赞数

分类专栏： WebGIS 学习 GIS 文章标签： javascript 开发语言 ecmascript Powered by 金山文档

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

版权

WebGIS 同时被 3 个专栏收录

22 篇文章 4 订阅

订阅专栏

GIS

21 篇文章 0 订阅

订阅专栏

学习

17 篇文章 3 订阅

订阅专栏

var LineString = new ol.Feature({
    geometry:new ol.geom.LineString([
        [114,30],[120,30]
    ])
})
# tips:线要素是一个二维数组

<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: [0, 0],
                zoom: 4
            })
        })
        /* 1、创建一个线要素 */
        const Line = new ol.Feature({
            geometry:new ol.geom.LineString([
                [0,10],[10,10]
            ])
        })
        /* 2、设置线的样式 */
        Line.setStyle(new ol.style.Style({
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#ff2d51',
                width: 2
            })
        }));
        /* 3、设置数据源 */
        var source = new ol.source.Vector({
            features:[Line]
        })
        /* 4、创建图层 */
        var vector = new ol.layer.Vector({
            source:source
        })
        /* 5、将图层添加到地图容器中 */
        map.addLayer(vector)
    </script>
</body>