如何分析OpenLayers3加载矢量地图源的问题

技术如何解析OpenLayers 3加载矢量地图源的问题今天就跟大家聊聊有关如何解析OpenLayers 3加载矢量地图源的问题,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可

今天跟大家聊聊如何分析OpenLayers3加载的矢量地图的来源。很多人可能不太了解。为了让大家更好的了解,边肖为大家总结了以下内容。希望你能从这篇文章中有所收获。

00-1010矢量图用直线和曲线来描述图形。这些图形的元素是一些点、线、矩形、多边形、圆和弧等。它们都是用数学公式计算出来的。由于矢量图形可以通过公式计算得到,矢量图形文件的体积一般较小。矢量图形最大的优点就是无论放大缩小还是旋转都不会失真。地图中有很多应用,是地图数据中非常重要的一部分。

为了方便存储、传输和使用,矢量地图会按照一定的格式来表示,比如常见的GeoJSON、TopoJSON、GML、KML、ShapeFile等等。除了最后一个ShapeFile,OpenLayers 3还支持其他几个矢量地图。

一、矢量地图

1.项目结构

如何解析OpenLayers3加载矢量地图源的问题

2、map.geojson

如何解析OpenLayers3加载矢量地图源的问题

{'type':'FeatureCollection ',' Feature ' :[{ ' type ' : ' Feature ',' properties':{},' geometry ' : { ' type ' : ' Polygon ','座标' :[[[104.08859252929688,30 .]38868、[104 . 08888888868

3、map.html

!Doctypehtml

html xmlns=' http://www . w3 . org/1999/XHTML '

meta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8 '

meta http-equiv=' X-UA-Compatible ' content=' IE=edge,chrome=1 '

metacontent='always'name='ref

errer'>
    <title>OpenLayers 3 :加载矢量地图</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>

<script>

    /**
     *  创建地图
     */
    new ol.Map({

        // 设置地图图层
        layers: [

            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),

            //加载一个geojson的矢量地图
            new ol.layer.Vector({
                source: new ol.source.Vector({
                    url: 'geojson/map.geojson',     // 地图来源
                    format: new ol.format.GeoJSON()    // 解析矢量地图的格式化类
                })
            })

        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [104,30],       // 设置地图显示中心于经度104度,纬度30度处
            zoom: 10,           // 设置地图显示层级为10
            projection: 'EPSG:4326'     //设置投影
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    })

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

4、运行结果

如何解析OpenLayers 3加载矢量地图源的问题

三、获取矢量地图上的所有Feature,并设置样式

1、map2.html

<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :获取矢量地图上的所有Feature,并设置样式</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 800px;height:500px;margin: auto'></div>
<br>
<div style='width: 800px;margin: auto'>
    <button type="button" onclick = 'updateStyle()' >修改Feature样式</button>
</div>

<script>

    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [
            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [104,30],       // 设置地图显示中心于经度104度,纬度30度处
            zoom: 10,           // 设置地图显示层级为10
            projection: 'EPSG:4326'     //设置投影
        }),

        // 让id为map的div作为地图的容器
        target: 'map'
    });

    //创建一个矢量地图源图层,并设置样式
    var  vectorLayer =  new ol.layer.Vector({
            source: new ol.source.Vector({
                url: 'geojson/map.geojson',     // 地图来源
                format: new ol.format.GeoJSON()    // 解析矢量地图的格式化类
            }),
            // 设置样式,颜色为绿色,线条粗细为1个像素
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'green',
                    size: 1
                 })
            })
        });


    map.addLayer(vectorLayer);


    /**
     * 获取矢量图层上所有的Feature,并设置样式
     */
    function updateStyle(){

        //创建样式,颜色为红色,线条粗细为3个像素
        var  featureStyle = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                size: 3
            })
        })

        //获取矢量图层上所有的Feature
        var features =  vectorLayer.getSource().getFeatures()


        //遍历所有的Feature,并为每个Feature设置样式
        for (var i = 0;i<features.length;i++){
            features[i].setStyle(featureStyle)
        }


    }


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

2、运行结果

如何解析OpenLayers 3加载矢量地图源的问题

如何解析OpenLayers 3加载矢量地图源的问题

4、矢量地图坐标系转换

矢量地图用的是EPSG:4326,我们可以通过OpenLayers 3内置了地图格式解析器,将坐标转换为EPSG:3857

1、map3.html

<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :矢量地图坐标系转换</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
    <script src="jquery-3.6.0.js"></script>
</head>

<body>

<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>

<script>

    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [

            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: ol.proj.fromLonLat([104,30]),       // 设置地图显示中心于经度104度,纬度30度处
            zoom: 10,           // 设置地图显示层级为10
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });


    // 加载矢量地图
    function addGeoJSON(data) {
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: (new ol.format.GeoJSON()).readFeatures(data, {     // 用readFeatures方法可以自定义坐标系
                    dataProjection: 'EPSG:4326',                            // 设定JSON数据使用的坐标系
                    featureProjection: 'EPSG:3857'                          // 设定当前地图使用的feature的坐标系
                })
            })
        });
        map.addLayer(layer);
    };


    $.ajax({
        url: 'geojson/map.geojson',
        success: function(data, status) {
            // 成功获取到数据内容后,调用方法将矢量地图添加到地图
            addGeoJSON(data);
        }
    });

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

2、运行结果

如何解析OpenLayers 3加载矢量地图源的问题

看完上述内容,你们对如何解析OpenLayers 3加载矢量地图源的问题有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/155758.html

(0)

相关推荐

  • sparksql查询优化的基本流程(spark调优参数)

    技术spark作业调优的方法是什么这篇文章主要讲解了“spark作业调优的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“spark作业调优的方法是什么”吧!调优

    2021年12月14日
  • ps怎么添加笔刷,ps字体和笔刷怎么安装

    技术ps怎么添加笔刷,ps字体和笔刷怎么安装1下载的字体如何安装到PS里ps怎么添加笔刷?首先,打开我的电脑——控制面板——外观和主题——字体(或者找C:\WINDOWS\Fonts)然后,打开下载的解压包(确认你的电脑

    生活 2021年10月20日
  • 网络很火的句子,你知道的今年最火的句子有哪些

    技术网络很火的句子,你知道的今年最火的句子有哪些听过无数话,看似都很有道理,但我最信两句:一个物以类聚,一个因果报应网络很火的句子。你还不认识我!我有一辈子可以认识你。不可能对所有人都好脸相迎,这是我人生的一大原则。

    生活 2021年10月21日
  • Linux系统下ESP32开发板如何搭建RT-Thread开发环境

    技术Linux系统下ESP32开发板如何搭建RT-Thread开发环境这篇文章将为大家详细讲解有关Linux系统下ESP32开发板如何搭建RT-Thread开发环境,文章内容质量较高,因此小编分享给大家做个参考,希望大家

    攻略 2021年10月22日
  • Java内存模型指的是什么

    技术Java内存模型指的是什么本篇内容介绍了“Java内存模型指的是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!J

    攻略 2021年11月24日
  • python中如何计算个数(python怎么求球的体积)

    技术Python怎么计算球的个数这篇文章主要讲解了“Python怎么计算球的个数”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Python怎么计算球的个数”吧!代码如下:

    攻略 2021年12月17日