How to use mapv - 10 common examples
To help you get started, we’ve selected a few mapv examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
SuperMap / iClient-JavaScript / test / mapboxgl / overlay / MapvLayerSpec.js View on Github 
var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];
// 构造数据
while (randomCount--) {
var cityCenter1 = utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
var cityCenter2 = utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
data.push({
geometry: {
type: 'LineString',
coordinates: [[cityCenter1.lng - 1 + Math.random() * 1, cityCenter1.lat - 1 + Math.random() * 1],
[cityCenter2.lng - 1 + Math.random() * 1, cityCenter2.lat - 1 + Math.random() * 1]
]
},
count: 30 * Math.random()
});
}
dataSet = new DataSet(data);
if (!map.getLayer("mapv")) {
mapvLayer = new MapvLayer(map, dataSet, options);
}
});
afterEach(() => {"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}]
},
center: [112, 37.94],
zoom: 3
});
originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;
var randomCount = 1;
var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];
// 构造数据
while (randomCount--) {
var cityCenter1 = utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
var cityCenter2 = utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
data.push({
geometry: {
type: 'LineString',
coordinates: [[cityCenter1.lng - 1 + Math.random() * 1, cityCenter1.lat - 1 + Math.random() * 1],
[cityCenter2.lng - 1 + Math.random() * 1, cityCenter2.lat - 1 + Math.random() * 1]
]
},
count: 30 * Math.random()
});
}
dataSet = new DataSet(data);
if (!map.getLayer("mapv")) {
mapvLayer = new MapvLayer(map, dataSet, options);
map.addLayer(mapvLayer);
mapvLayer = map.getLayer('mapv');beforeEach(() => {
originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;
var randomCount = 1000;
var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];
// 构造数据
while (randomCount--) {
var cityCenter1 = utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
var cityCenter2 = utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
data.push({
geometry: {
type: 'LineString',
coordinates: [[cityCenter1.lng - 1 + Math.random() * 1, cityCenter1.lat - 1 + Math.random() * 1],
[cityCenter2.lng - 1 + Math.random() * 1, cityCenter2.lat - 1 + Math.random() * 1]
]
},
count: 30 * Math.random()
});
}
dataSet = new DataSet(data);
if (!map.getLayer("mapv")) {
mapvLayer = new MapvLayer(map, dataSet, options);
}
});testDiv.style.styleFloat = "left";
testDiv.style.marginLeft = "8px";
testDiv.style.marginTop = "50px";
testDiv.style.width = "500px";
testDiv.style.height = "500px";
document.body.appendChild(testDiv);
map = L.map('map1', {
center: [32, 109],
zoom: 4,
});
var randomCount = 2;
var data = [];
var citys = ["北京", "天津"];
// 构造数据
while (randomCount--) {
var cityCenter = utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
data.push({
geometry: {
type: 'Point',
coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
},
count: 30 * Math.random()
});
}
var dataSet = new DataSet(data);
var options = {
fillStyle: 'rgba(55, 50, 250, 0.8)',
shadowColor: 'rgba(255, 250, 50, 1)',
shadowBlur: 20,
max: 100,
size: 50,
label: {beforeEach(() => {
//创建mapVLayer
var randomCount = 1000;
var data = [];
var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南",
"南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州",
"西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];
// 构造数据
while (randomCount--) {
var cityCenter = utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
data.push({
geometry: {
type: 'Point',
coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
},
count: 30 * Math.random()
});
}
var dataSet = new DataSet(data);
var options = {
fillStyle: 'rgba(55, 50, 250, 0.8)',
shadowColor: 'rgba(255, 250, 50, 1)',
shadowBlur: 20,
max: 100,
size: 500,
unit: 'm',beforeEach(() => {
originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;
var randomCount = 1000;
var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];
// 构造数据
while (randomCount--) {
var cityCenter1 = utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
var cityCenter2 = utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
data.push({
geometry: {
type: 'LineString',
coordinates: [[cityCenter1.lng - 1 + Math.random() * 1, cityCenter1.lat - 1 + Math.random() * 1],
[cityCenter2.lng - 1 + Math.random() * 1, cityCenter2.lat - 1 + Math.random() * 1]
]
},
count: 30 * Math.random()
});
}
dataSet = new DataSet(data);
if (!map.getLayer("mapv")) {
mapvLayer = new MapvLayer(map, dataSet, options);
}beforeEach(() => {
originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;
let randomCount = 300;
let data = [];
const citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];
// 构造数据
while (randomCount--) {
var cityCenter = utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
data.push({
geometry: {
type: 'Point',
coordinates: olProj.transform([cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4], 'EPSG:4326', 'EPSG:3857')
},
count: 30 * Math.random()
});
}
const dataSet = new DataSet(data);
const options = {
map: map, dataSet: dataSet, mapvOptions: mapvOptions
};
mapVSource = new Mapv(options);
mapVLayer = new ImageLayer({});
// }
}
// console.log(JSON.stringify(data))
datas.push({
id: 1,
name: '示例点数据',
data
});
// line data
// randomCount = 1000;
randomCount = 300;
data = [];
while (randomCount--) {
var cityCenter1 = mapv.utilCityCenter.getCenterByCityName(
citys[parseInt(Math.random() * citys.length)]
);
var cityCenter2 = mapv.utilCityCenter.getCenterByCityName(
citys[parseInt(Math.random() * citys.length)]
);
data.push({
geometry: {
type: 'LineString',
coordinates: [
[
cityCenter1.lng - 1 + Math.random() * 1,
cityCenter1.lat - 1 + Math.random() * 1
],
[
cityCenter2.lng - 1 + Math.random() * 1,
cityCenter2.lat - 1 + Math.random() * 1// console.log(JSON.stringify(data))
datas.push({
id: 1,
name: '示例点数据',
data
});
// line data
// randomCount = 1000;
randomCount = 300;
data = [];
while (randomCount--) {
var cityCenter1 = mapv.utilCityCenter.getCenterByCityName(
citys[parseInt(Math.random() * citys.length)]
);
var cityCenter2 = mapv.utilCityCenter.getCenterByCityName(
citys[parseInt(Math.random() * citys.length)]
);
data.push({
geometry: {
type: 'LineString',
coordinates: [
[
cityCenter1.lng - 1 + Math.random() * 1,
cityCenter1.lat - 1 + Math.random() * 1
],
[
cityCenter2.lng - 1 + Math.random() * 1,
cityCenter2.lat - 1 + Math.random() * 1
]
]
},refresh: function () {
var mapvOptions = this.model.get('map_v_options')
mapvOptions.size = this.model.get('size');
mapvOptions.globalAlpha = this.model.get('global_alpha');
mapvOptions.fillStyle = this.model.get('fill_style');
mapvOptions.shadowColor = this.model.get('shadow_color');
mapvOptions.shadowBlur = this.model.get('shadow_blur');
// mapvOptions.lineWidth = this.model.get('line_width');
var dataSet = this.model.get('data_set');
var mapvDataSet = new mapv.DataSet(dataSet);
this.obj.update({data: mapvDataSet, options: mapvOptions})
},
