openlayer 加载高德地图（EPSG:3857）和GeoJSON图层（EPSG:4326）

发布时间：2023年12月26日

概述
基于openlayer实现高德底图（墨卡托投影，3857）和GeoJSON图层（4326坐标系）的叠加显示，并实现GeoJSON图层的数据变换。
一、效果展示
在这里插入图片描述

二、代码实现

<!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">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/8.1.0/dist/ol.min.js"
        integrity="sha512-Lu3mKY4gbgocyIAil/7VhNwTSQuvpcLwDyaNz2yhCymG1GiV98pcRsfePdAK7EarOsKHtEMYjhrAt4brBu3HuQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <title>Document</title>

    <style>
        body {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div id="map" style="position: absolute; top: 0; bottom: 0;left: 0;right: 0;"></div>
    <button onclick="change()" style="position: absolute;right: 0;">切换</button>

    <script>
        const g1 = {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {},
                    "geometry": {
                        "coordinates": [
                            [
                                [
                                    99.14453010126164,
                                    48.37188442411559
                                ],
                                [
                                    97.87651995929195,
                                    24.516998554896134
                                ],
                                [
                                    131.05611867416263,
                                    44.890699146088735
                                ],
                                [
                                    99.14453010126164,
                                    48.37188442411559
                                ]
                            ]
                        ],
                        "type": "Polygon"
                    }
                }
            ]
        }

        const g2 = {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {},
                    "geometry": {
                        "coordinates": [
                            [
                                [
                                    114.30097113146928,
                                    36.88500539407568
                                ],
                                [
                                    110.76935572148994,
                                    33.1312347399369
                                ],
                                [
                                    121.18698921009167,
                                    31.225425500546166
                                ],
                                [
                                    119.76977567196718,
                                    36.82254367773106
                                ],
                                [
                                    114.30097113146928,
                                    36.88500539407568
                                ]
                            ]
                        ],
                        "type": "Polygon"
                    }
                }
            ]
        }

        // geojson source and layer
        var vectorSource = new ol.source.Vector({
            features: (new ol.format.GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(g2)
        })

        var vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    lineDash: [4],
                    width: 3,
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(0, 0, 255, 0.1)',
                }),
            })
        })

        // gaode map
        var gaodeMap = new ol.source.XYZ({
            url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
            wrapX: false
        })
        var gaodeLayer = new ol.layer.Tile({
            source: gaodeMap,
        })

        var map = new ol.Map({
            target: 'map',
            layers: [
                gaodeLayer,
                vectorLayer
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([114.30097113146928, 36.88500539407568]),
                zoom: 5
            })
        })

        function change() {
            vectorSource.clear()
            vectorSource.addFeatures((new ol.format.GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(g1))
        }
    </script>
</body>

</html>
文章来源:https://blog.csdn.net/imxiezy/article/details/135222186
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章