百度地图,mapV,mapVgl只显示中国地图

主要是在原本的地图上增加了一个覆盖层,把其他地方都盖住,只把中国这块露出来,目前用的这个坐标点也是百度自己随意扣的,没有把海域也抠出来,而且边边角角的也不太细致。(mapv和mapvgl文档写的稀碎),下面看案例

依赖文件:

<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script src="//mapv.baidu.com/build/mapv.min.js"></script>
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.93/dist/mapvgl.min.js"></script>

需要的容器:

<div id="map_container"></div>

js代码:

var map = initMap({
    tilt: 0,
    heading: 0,
    center: [116.395645, 39.929986],
    zoom: 5,
    style: purpleStyle
});

var view = new mapvgl.View({
    map: map
});

var cities = ['重庆', '太原', '合肥', '杭州', '郑州', '武汉', '长沙', '广州', '成都', ];

var data = cities.map((city, index) = >{
    var cityCenter = mapv.utilCityCenter.getCenterByCityName(city);
    return {
        geometry: {
            type: 'Point',
            coordinates: [cityCenter.lng, cityCenter.lat]
        },
        properties: {
            text: '99+'
        }
    };
});

var view = new mapvgl.View({
    map: map
});

var pointLayer = new mapvgl.PointLayer({
    size: 30,
    color: 'rgba(0,0,0,0)',
});

view.addLayer(pointLayer);
pointLayer.setData(data);
pointLayer.setOptions({
    size: 38,
    blend: 'lighter',
    color: 'rgba(0, 0, 0, 0)',
    borderWidth: 5,
    borderColor: '#004E68'
});

var rippleLayer = new mapvgl.RippleLayer({
    size: 600000,
    unit: 'm',
    color: '#f00',
});

view.addLayer(rippleLayer);
rippleLayer.setData(data);

var textLayer = new mapvgl.TextLayer({
    color: '#fff',
    fontSize: 14
});

view.addLayer(textLayer);
textLayer.setData(data);

fetch('https://mapv.baidu.com/examples/data/china.json').then(function(rs) {
    return rs.json();
}).then(function(geojson) {
    var options = {
        fillStyle: 'rgba(8, 18, 15, 0.9)',
        //strokeStyle: 'rgba(250, 250, 55, 1)',
        //shadowColor: 'rgba(250, 250, 55, 1)',
        //shadowBlur: 10,
        //lineWidth: 16,
        //globalAlpha: 0.9,
        draw: 'clip'
    }
    var dataSet = mapv.geojson.getDataSet(geojson);
    var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
});

可以在这里贴入代码看效果https://mapv.baidu.com/gl/examples/editor.html#text.html

百度地图的交通状况组件TrafficControl支持https协议 
下一篇:百度地图的交通状况组件TrafficControl支持https协议
评论

如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ