当前位置：文江博客话题详情

JavaScript 高德地图

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

发布于 2022-09-11 18:39:25 字数 131 浏览 18 评论 0

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

疯狂的代价 2022-09-18 18:39:25

高德地图上显示geojson文件，可以参考一下我的这个demo：https://xiangyuecn.gitee.io/a...

ps：可以到我的库里面直接下载整理好的省市区县矢量边界（也有乡镇边界围栏），我提供了工具支持转换成geojson、shp、导入数据库等，关键是数据会长期维护

残月升风 2022-09-18 18:39:25

使用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>

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

離殇

文章 0 评论 0

小姐丶请自重

文章 0 评论 0

Aik

文章 0 评论 0

国产ˉ祖宗

文章 0 评论 0

猥琐帝

文章 0 评论 0

半仙

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文