Openlayers 通过geojson设置点要素

最新推荐文章于 2024-07-14 12:56:18 发布

zllAlbert

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量336

点赞数 1

分类专栏： Openlayers 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Zll321723/article/details/129459961

版权

Openlayers 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>geojson设置点要素</title>
    <!-- 1 导入openlayers依赖-->
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
</head>
<body>
    <!-- 2 设置地图容器或地图挂载点-->
    <div id="map"></div>

    <script>
        // 3 初始化地图图层

        const geoda = new ol.layer.Tile({
            title:"高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });
        // 4 初始化openlayers地图
        const map = new ol.Map({
            // 将初始化的地图设置到id为map 的DOM元素上
            target:"map",
            // 设置图层
            layers:[geoda],
            // 设置视图
            view:new ol.View({
                center:[114.30,30.50],
                // 设置地图放大级别
                zoom :10,
                projection:"EPSG:4326"
            })
        })
        //创建GEOjson数据
        var data = {
            type:"FeatureCollection",
            features:[
                {
                    type:"Feature",
                    geometry:{
                        type:"Point",
                        coordinates:[114.30,30.50]
                    }
                }
            ]
        }
        //数据添加到矢量数据源中
        var source = new ol.source.Vector({
            features:new ol.format.GeoJSON().readFeatures(data)
        })
        //设置矢量图层
        var layer = new ol.layer.Vector({
            source
        })
        //添加地图到矢量容器
        map.addLayer(layer)


    </script>
</body>
</html>