shp文件解析成geojson格式后，坐标如何转换显示到高德地图

shp文件解析成geojson格式后，怎么显示到高德地图上

2 个回答

得票最新

huifer

4831826

发布于
2019-03-24

使用openlayers

下图中数据任意绘制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高德地图+ol</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"
          integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"
            integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="
            crossorigin="anonymous"></script>
    <style>
        #map {
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>
</head>


<body>
<div id="map"></div>
<script type="text/javascript">
    //实例化Map对象，用于加载地图
    var gaodeMapLayer = new ol.layer.Tile({
        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}'
        })
    });


    var map = new ol.Map({
        layers: [gaodeMapLayer],
        view: new ol.View({
            center: [120,30],
            projection: 'EPSG:4326',
            zoom: 7
        }),
        target: 'map'
    });


    var geojsonObject = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                111.796875,
                                47.517200697839414
                            ],
                            [
                                100.546875,
                                26.745610382199022
                            ],
                            [
                                121.9921875,
                                28.92163128242129
                            ],
                            [
                                121.640625,
                                48.22467264956519
                            ],
                            [
                                111.796875,
                                47.517200697839414
                            ]
                        ]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                120.00091552734375,
                                30.168875561169088
                            ],
                            [
                                120.2783203125,
                                29.921613319695577
                            ],
                            [
                                120.66009521484374,
                                30.152252297201876
                            ],
                            [
                                120.29205322265625,
                                30.50311746839939
                            ],
                            [
                                119.73724365234375,
                                30.237713497892038
                            ],
                            [
                                120.00091552734375,
                                30.168875561169088
                            ]
                        ]
                    ]
                }
            }
        ]
    };

    var vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
    });

    var styles = [
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 3
            }),
            fill: new ol.style.Fill({
                color: 'rgba(0, 0, 255, 0.1)'
            })
        }),
        new ol.style.Style({
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: 'orange'
                })
            }),
        })
    ];
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styles
    });
    map.addLayer(vectorLayer)
</script>
</body>

</html>