OL4使用mapV

最新推荐文章于 2024-08-07 10:12:23 发布

hpugisers

最新推荐文章于 2024-08-07 10:12:23 发布

阅读量2.3k

点赞数 1

分类专栏：前端数据可视化 OpenLayer OpenLayer3 and 4

本文链接：https://blog.csdn.net/weixin_40184249/article/details/89473877

版权

OpenLayer 同时被 3 个专栏收录

54 篇文章 12 订阅

订阅专栏

OpenLayer3 and 4

51 篇文章 17 订阅

订阅专栏

前端数据可视化

2 篇文章 0 订阅

订阅专栏

mapV是一款基于百度地图的地理信息可视化开源库，以前我写一篇文章是基于超图封装mapV和OpenLayers的框架来使用mapV，mapV1.0版本好像不支持OL，现在2.0版本基本支持流行的地图框架例如（Openlayers、LeaFlet、maptalk等等）百度是终于干了一会人事。好像不支持事件注册，下面讲解主要怎么用。

一、引言
github地址

核心类

new mapv.OpenlayersLayer () 结合Openlayer
new mapv.baiduMapLayer () 结合百度地图
new mapv.leafletMapLayer（）结合Leaflet
new mapv.MaptalksLayer（）结合maptalk
new googleMapLayer()结合google
目前支持以上集中地图js框架
二、如何使用
1、引入js

<script src="http://mapv.baidu.com/build/mapv.min.js"></script>

我用的在线的，当然你可下载本地引入，也可npm
2、声明参数

map
dataSet
options

在这里构造参数就三个map（地图容器）, dataSet（数据集）, options （一些渲染或者动画设置）

3、构造图层函数

 var lineLayer = new mapv.OpenlayersLayer(map, dataSet, options);

三、demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>mapV</title>
    <link href="../script/ol4/ol.css" rel="stylesheet" />
    <script src="../script/ol4/ol.js"></script>
    <script src="http://mapv.baidu.com/build/mapv.min.js"></script>
    <script src="../../Scripts/jquery/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body, #map {
            border: 0px;
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            font-size: 13px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var projection = new ol.proj.Projection({
            code: 'EPSG:4326',
            units: 'degrees'
        });

        function getNavmapLayer() {
            return new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'//7,8
                }),
                projection: projection
            });
        }
        var navlayer = getNavmapLayer();
        map = new ol.Map({
            controls: ol.control.defaults({
                attribution: false
            }),
            target: 'map',
            layers: [navlayer],
            view: new ol.View({
                projection: projection,
                center: [116.456, 40.251],
                zoom: 4
            })
        });
        var coordinate = [116.456, 40.251];

        $.get('../data/china.json', function (geojson) {

            var geojsonOptions = {
                gradient: {
                    0: 'rgba(55, 50, 250, 0.4)',
                    1: 'rgba(55, 50, 250, 1)'
                },
                max: 354551,
                draw: 'intensity'
            }

            var geojsonDataSet = mapv.geojson.getDataSet(geojson);

            var to = '北京';

            var qianxi = new mapv.DataSet([
                {
                    from: '河北',
                    count: 354551,
                    to: to,
                },
                {
                    from: '天津',
                    count: 97323,
                    to: to,
                },
                {
                    from: '山东',
                    count: 28664,
                    to: to,
                },
                {
                    from: '山西',
                    count: 16650,
                    to: to,
                },
                {
                    from: '辽宁',
                    count: 14379,
                    to: to,
                },
                {
                    from: '河南',
                    count: 10980,
                    to: to,
                },
                {
                    from: '内蒙古自治区',
                    count: 9603,
                    to: to,
                },
                {
                    from: '江苏',
                    count: 4536,
                    to: to,
                },
                {
                    from: '上海',
                    count: 3556,
                    to: to,
                },
                {
                    from: '广东',
                    count: 2600,
                    to: to,
                },
            ]);

            var qianxiData = qianxi.get();

            var lineData = [];
            var pointData = [];
            var textData = [];
            var timeData = [];

            var citys = {}

            for (var i = 0; i < qianxiData.length; i++) {
                var fromCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].from);
                var toCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].to);
                if (!fromCenter || !toCenter) {
                    continue;
                }
                citys[qianxiData[i].from] = qianxiData[i].count;
                citys[qianxiData[i].to] = 100;
                pointData.push(
                    {
                        geometry: {
                            type: 'Point',
                            coordinates: [fromCenter.lng, fromCenter.lat]
                        }
                    }
                );
                pointData.push(
                    {
                        geometry: {
                            type: 'Point',
                            coordinates: [toCenter.lng, toCenter.lat]
                        }
                    }
                );
                textData.push(
                    {
                        geometry: {
                            type: 'Point',
                            coordinates: [fromCenter.lng, fromCenter.lat]
                        },
                        text: qianxiData[i].from
                    }
                );
                textData.push(
                    {
                        geometry: {
                            type: 'Point',
                            coordinates: [toCenter.lng, toCenter.lat]
                        },
                        text: qianxiData[i].to
                    }
                );

                var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]);

                for (j = 0; j < curve.length; j++) {
                    timeData.push({
                        geometry: {
                            type: 'Point',
                            coordinates: curve[j]
                        },
                        count: 1,
                        time: j
                    });
                }

                lineData.push({
                    geometry: {
                        type: 'LineString',
                        coordinates: curve
                        //coordinates: [[fromCenter.lng, fromCenter.lat], [toCenter.lng, toCenter.lat]]
                    },
                    count: 30 * Math.random()
                });

            }

            var data = geojsonDataSet.get({
                filter: function (item) {

                    if (!citys[item.name]) {
                        return false;
                    }

                    item.count = citys[item.name];
                    return true;
                }
            });
            geojsonDataSet = new mapv.DataSet(data);

            var mapvLayer =  new mapv.OpenlayersLayer(map, geojsonDataSet, geojsonOptions);

            var textDataSet = new mapv.DataSet(textData);

            var textOptions = {
                draw: 'text',
                font: '14px Arial',
                fillStyle: 'white',
                shadowColor: 'yellow',
                shadowBlue: 10,
                zIndex: 11,
                shadowBlur: 10
            }

            var textMapvLayer = new mapv.OpenlayersLayer(map, textDataSet, textOptions);

            var lineDataSet = new mapv.DataSet(lineData);

            var lineOptions = {
                strokeStyle: 'rgba(255, 250, 50, 0.8)',
                shadowColor: 'rgba(255, 250, 50, 1)',
                shadowBlur: 20,
                lineWidth: 2,
                zIndex: 100,
                draw: 'simple'
            }

            var lineLayer = new mapv.OpenlayersLayer(map, lineDataSet, lineOptions);

            var pointOptions = {
                fillStyle: 'rgba(254,175,3,0.7)',
                shadowColor: 'rgba(55, 50, 250, 0.5)',
                shadowBlur: 10,
                size: 5,
                zIndex: 10,
                draw: 'simple'
            }


            var pointDataSet = new mapv.DataSet(pointData);

            var pointLayer = new mapv.OpenlayersLayer(map, pointDataSet, pointOptions);


            var timeDataSet = new mapv.DataSet(timeData);

            console.log(timeData);

            var timeOptions = {
                fillStyle: 'rgba(255, 250, 250, 0.5)',
                zIndex: 200,
                size: 2.5,
                animation: {
                    type: 'time',
                    stepsRange: {
                        start: 0,
                        end: 50
                    },
                    trails: 10,
                    duration: 2,
                },
                draw: 'simple'
            }

            var mapvLayer = new mapv.OpenlayersLayer(map, timeDataSet, timeOptions); 

        });

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

四、效果图
在这里插入图片描述五、总结
使用mapV一定要纠偏，因为通过mapv.utilCurve.getPoints或者mapv.utilCityCenter.getCenterByCityName都是百度坐标系下的坐标会发生偏移，我尝试将坐标纠正但是还是和没有纠正一样。那位道友如有不错的纠偏方法请告知