Mapv 结合 Leaflet 地图使用

最新推荐文章于 2024-07-19 10:53:44 发布

早晨阳光一般暖

最新推荐文章于 2024-07-19 10:53:44 发布

阅读量1.7k

点赞数 1

分类专栏： map javascript mapv 文章标签： Mapv Leaflet map

原文链接：https://github.com/huiyan-fe/mapv/tree/master/examples/leaflet

版权

javascript 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

map

4 篇文章 0 订阅

订阅专栏

mapv

3 篇文章 1 订阅

订阅专栏

看了Mapv的源码才发现，它是支持 Leaflet 地图的，Mapv作者也是有和Leaflet地图结合的案例的，但是直接百度 “Mapv Leaflet” 却没有结果，为了补全这个空缺，所以写了这个博客

原文链接：https://github.com/huiyan-fe/mapv/blob/master/examples/leaflet

使用案例：

<!DOCTYPE html>
<html>

<head>
    <title>maptalks example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">


    <style>
        html,
        body,
        #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>


    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
    <script src="../../build/mapv.js"></script>
    <script>
        var map = L.map('map').setView([34.41583177128595, -102.17609405517578], 5);
        L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
            'subdomains': ['a', 'b', 'c', 'd', 'e']
        }).addTo(map);
        var randomCount = 300;
        var data = [];
        while (randomCount--) {
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]
                },
                count: 30 * Math.random()
            });
        }
        var dataSet = new mapv.DataSet(data);
        var options = {
            fillStyle: 'rgba(255, 250, 50, 0.8)',
            globalCompositeOperation: "lighter",
            maxSize: 10,
            max: 30,
            shadowBlur: 30,
            shadowColor: 'rgba(255, 250, 50, 1)',
            draw: 'bubble'
        };

        //这一句是唯一和百度地图不同的一处
        var mapvLayer = mapv.leafletMapLayer(dataSet, options).addTo(map);
    </script>
</body>

</html>