模拟实现疫情分布图 openlayer+Geojson
原始数据来源：http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
版本一：
1、首先读取geojson数据：
//数据是网上下的http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4
var jq=jQuery.noConflict();
jq.ajax({
url: 'json/100000_full.json',
method:'get',
type: "json",
async: false,
success: function (data) {
featureList = data.features;
console.log(featureList);
var num = new Array();
for (var g in featureList) {
if (featureList[g].properties.number!=undefined) {
num[g] = featureList[g].properties.number;
}
}
setStandardColor(Math.max.apply(null, num));
//这里头的获取颜色函数下面会提到
//吧geojson数据分成不同的feature然后一个一个进行渲染style
for (var g in num){
color[g] =new ol.style.Style({
stroke: new ol.style.Stroke({
//边界样式
color: 'RGB(77,184,184)',
width: 1
}),
fill:new ol.style.Fill({
//根据数组进行渲染style
color: getColorByNumber(num[g],Math.max.apply(null, num))
}),
text: new ol.style.Text({
font: '10px Microsoft YaHei',
text: featureList[g].properties.name,
fill: new ol.style.Fill({
color: '#666'
})
})
});
}
for (var s in featureList){
layerList[s] = new ol.layer.Vector({
source: new ol.source.Vector({
})
});
var souur = new ol.source.Vector({
feature: (new ol.format.GeoJSON()).readFeatureFromObject(featureList[s])
});
layerList[s].setSource(souur);
//设置图层样式
layerList[s].setStyle(color[s]);
souur.addFeature( (new ol.format.GeoJSON()).readFeatureFromObject(featureList[s]));
}
}
});没啥好说的，说一些废话，开始的时候我想着用
var ProvinceMapLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'json/100000_full.json', // 地图来源
format: new ol.format.GeoJSON() // 解析矢量地图的格式化类
})
});读取完以后从这个layer里头获取layerList，后来我错了，等着我的只有冷冰冰的一串url（’json/100000_full.json‘），所以我选了上个方案，一个个分离然后设置style。
2、整个map，协商target，ok。
map = new ol.Map({
target: 'map',
layers: layerList,
view: new ol.View({
center: [116.405285, 39.904989],
zoom: 10
}),
controls: ol.control.defaults().extend([mousePositionControl])
});
map.getView().fit([76,18,140,56], map.getSize());
map.addControl(new ol.control.FullScreen());后面必须加上，我不知道为什么我设置了zoom没有用。
3、没啥好说的，添加几个事件
addLayersMapPointMoveEvent(popup,content,container,layerHL);
addLayersMapPointClickEvent(popup,layerHL,[116.405285, 39.904989]);
drawMapTuliMethod();
function addLayersMapPointMoveEvent(popup,content,container,layerHL) {
map.on("pointermove", function (evt) {
var pixel = map.getEventPixel(evt.originalEvent);
var feature = map.forEachFeatureAtPixel(pixel, function(feature, ProvinceMapLayer) {
return feature;
});
if (feature != undefined) {
var source = new ol.source.Vector({wrapX: true});
source.addFeature(feature);
/*移除高亮*/
if (layerHL!='1'){
map.removeLayer(layerHL);
}
/*构建高亮图层*/
layerHL = new ol.layer.Vector({
source: source,
style: featureSelectStyle
});
/*高亮*/
map.addLayer(layerHL);
if (feature.get("number")!=undefined) {
/*弹出框*/
popup.setPosition(evt.coordinate); // 将弹窗位置设置为鼠标点击处
/*设置弹出框偏移*/
popup.setOffset([-50,-120]);
/*设置弹出框内容*/
content.innerHTML = '人数：'+feature.get("number")+'
这里是：'+ feature.get('name') + '
';
container.style.display = 'block';
/*添加弹出框*/
map.addOverlay(popup);
}
}else {
if (layerHL!='1'){
map.removeLayer(layerHL);
}
map.removeOverlay(popup);
}
});
}
function addLayersMapPointClickEvent(popup,layerHL,coor){
map.on("click", function (evt) {
if (pageLevel==1){
var pixel = map.getEventPixel(evt.originalEvent);
var cilckfeature = map.forEachFeatureAtPixel(pixel, function(cilckfeature) {
return cilckfeature;
});
if (cilckfeature != undefined) {
map.removeOverlay(popup);
map.removeLayer(layerHL);
//map.removeLayer(layerList);
var geojsonName = cilckfeature.get('name');
var cityLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: '/json/'+geojsonName+'.json', // 地图来源
format: new ol.format.GeoJSON() // 解析矢量地图的格式化类
})
});
removeAlllayerList(map,layerList);
map.setTarget("map2");
map1 = new ol.Map({
target: 'map',
layers: [cityLayer],
view: new ol.View({
visible: true,
//center: ol.proj.fromLonLat([118.32, 32.30]), [108.405289,34.904987]
center: ol.proj.fromLonLat(coor),
zoom: 4
}),
controls: ol.control.defaults().extend([mousePositionControl])
});
map1.addControl(new ol.control.FullScreen());
pageLevel = pageLevel+1;
map1PointerMove();
console.log(pageLevel);
}else {
}
} else {
}
});
}4、根据数量大小设置颜色（记得把传入的最大值设置为开始的两倍）
function rgbaToHex(color) {
var values = color
.replace(/rgba?\(/, '')
.replace(/\)/, '')
.replace(/[\s+]/g, '')
.split(',');
var a = parseFloat(values[3] || 1),
r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
return "#" +
("0" + r.toString(16)).slice(-2) +
("0" + g.toString(16)).slice(-2) +
("0" + b.toString(16)).slice(-2);
}
function getColorByNumber(n,max) {
var halfMax = max / 2; //最大数值的二分之一
//var 百分之一 = (单色值范围) / halfMax; 单颜色的变化范围只在50%之内
var one = 255 / halfMax;
//console.log('one= ' + one);
var r = 0;
var g = 0;
var b = 0;
if (n!=0){
r = 255;
g = (255- ((n-halfMax)*one))<0?0:(255-((n-halfMax)*one));
b = (255- ((n-halfMax)*one))<0?0:(255-((n-halfMax)*one));
} else {
r = 255;
g = 255;
b = 255;
}
return rgbaToHex("rgb(" + r + "," + g + "," + b + ")");
}图例算了8，不想写了，就到这儿了。