百度地图,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
评论