oplenlayers 与 Vue 结合，实现添加任意内容到地图指定位置，并跟随放大级别缩放
目录
先上效果：
可以在地图的指定位置（坐标）上放任何 html 标签，并实现跟随地图放大级别缩放
下面是地图放大级别特别大的时候的效果：
下面是放大级别特别小的时候的效果（可以设置成不显示）：
原理和说明
- 放置任意 Html，这里毫无疑问是使用的 ol.Overlay 这个类。但是问题是，在 ol 封装好的 ol.Overlay 类中，显示的内容是无法跟随地图的级别缩放的，而可以跟随地图放大级别显示缩放的类是 ol.Feature
- 为什么不用 pop 来实现？因为 pop 自带了一些恼人的样式，而且还要需要点击以下才能显示
- 怎么用 overlay 实现跟随地图放大级别缩放？使用 Vue ，将地图的放大级别与 overlay 的大小绑定实现
关键代码
var app=new Vue({
el:"#app",
data:{
map:undefined, // 将 ol 绑定到 vue 对象上，成为它的一个属性
info:undefined,
infoOnMap:undefined,
imgHeight:50,
fontSize:100,
},
methods:{
// 生成地图
setMap:function () {
this.map=new ol.Map({
layers:[
new ol.layer.Tile({
source : new ol.source.XYZ({
url:'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
})
}),
],
view:new ol.View({
center: [121, 23.6],
zoom:8,
projection:'EPSG:4326'//这种定义投影方式才能全局改变投影，而不是只改变中心点投影
}),
target:'map'
});
},
// 获取天气信息
getInfo:function(){
this.info=getWeatherInfo();
},
// 将获得的天气信息原数据进行处理
getInfoOnMap:function(){
var loactionArray=[];
for(var i=0;i<this.info.length;i++){
loactionArray.push({
index:i,
lat:this.info[i].item.lat,
long:this.info[i].item.long,
icon:this.info[i].item.forecast[0].imgUrl,
text:Math.ceil((parseInt(this.info[i].item.forecast[0].high)+parseInt(this.info[i].item.forecast[0].low))/2)+" ℃"
});
}
this.infoOnMap=loactionArray;
},
setInfoToMap:function(cityInfo){
var overlay = new ol.Overlay({
position: [cityInfo.long,cityInfo.lat],
element: document.getElementById("popup-"+cityInfo.index),
positioning: 'center-center',
});
this.map.addOverlay(overlay);
},
},
mounted:function(){
// 初始化
this.getInfo();
this.getInfoOnMap();
this.setMap();
this.infoOnMap.forEach(function(eachInfo){
this.setInfoToMap(eachInfo);
});
// 将地图放大级别与内容显示像素值绑定（注意：这里是指数放大，不是等比例放大）
var _this=this;
this.map.on("moveend",function(e){
var zoom = _this.map.getView().getZoom(); //获取当前地图的缩放级别
if (zoom<9) {
_this.fontSize=45*Math.pow(2,(zoom-8));
_this.imgHeight=50*Math.pow(2,(zoom-8));
}
});
}
});
附上获取天气信息的 getWeatherInfo() 代码
具体说明可以看我以前的博客使用Yahoo天气接口实现全球天气预报 JavaScript+Ajax
function getWeatherInfo() {
var weatherInfo;
var weatherCode=[
'龙卷风',//0 tornado
'热带风暴',//1 tropical storm
'飓风',//2 hurricane
'次剧烈雷雨',//3 severe thunderstorms
'雷雨',//4 thunderstorms
'雨夹雪',//5 mixed rain and snow
'雨夹雪',//6 mixed rain and sleet
'雨夹雪',//7 mixed snow and sleet
'毛毛雨',//8 freezing drizzle
'小雨',//9 drizzle
'冻雨',//10 freezing rain
'小阵雨',//11 showers
'大阵雨',//12 showers
'小雪花',//13 snow flurries
'小雪阵雨',//14 light snow showers
'风雪天',//15 blowing snow
'雪',//16 snow
'冰雹',//17 hail
'雨夹雪',//18 sleet
'灰尘',//19 dust
'雾',//20 foggy
'霾',//21 haze
'烟',//22 smoky
'风暴',//23 blustery
'多风',//24 windy
'冷',//25 cold
'多云',//26 cloudy
'多云',//27 mostly cloudy (night)
'多云',//28 mostly cloudy (day)
'多云转晴',//29 partly cloudy (night)
'多云转晴',//30 partly cloudy (day)
'晴',//31 clear (night)
'晴',//32 sunny
'少云',//33 fair (night)
'少云',//34 fair (day)
'混合雨和冰雹',//35 mixed rain and hail
'炎热',//36 hot
'零星雷暴',//37 isolated thunderstorms
'零星雷阵雨',//38 scattered thunderstorms
'零星雷阵雨',//39 scattered thunderstorms
'零星阵雨',//40 scattered showers
'大雪',//41 heavy snow
'分散的阵雪',//42 scattered snow showers
'大雪',//43 heavy snow
'部分多云',//44 partly cloudy
'雷阵雨',//45 thundershowers
'阵雪',//46 snow showers
'零星雷阵雨',//47 isolated thundershowers
'无法获取',//48 3200 not available
];
var cityList=[
{name:"台北",woeid:"2306179"},
// {name:"新北",woeid:"90717580"},
{name:"桃园",woeid:"2298866"},
{name:"台中地区",woeid:"2306181"},
{name:"台南",woeid:"2306182"},
{name:"高雄地区",woeid:"2306180"},
{name:"基隆",woeid:"2306188"},
{name:"新竹",woeid:"2306185"},
{name:"嘉义",woeid:"2296315"},
{name:"云林",woeid:"2347346"},
{name:"花莲",woeid:"2347335"},
{name:"金门",woeid:"28760735"},
{name:"屏东",woeid:"2347340"},
{name:"彰化",woeid:"20070572"},
{name:"台东",woeid:"2347344"},
{name:"澎湖",woeid:"22695856"},
{name:"宜兰",woeid:"2347336"},
{name:"苗栗",woeid:"2347338"},
];
var apiServer = 'https://query.yahooapis.com/v1/public/yql';
var idListString="";
for(var i=0;i<cityList.length;i++){
if(i==0){
idListString=cityList[i].woeid;
}else{
idListString+=","+cityList[i].woeid;
}
}
var queryString = 'select * from weather.forecast where woeid in ('+idListString+') and u="c"';
$.ajax({
method:'get',
async: false,
url:apiServer,
data:{
format:'json',
q:queryString
},
success:function(data){
for(var i=0;i<data.query.results.channel.length;i++){
data.query.results.channel[i].cityname=cityList[i].name;
for(var k=0;k<data.query.results.channel[i].item.forecast.length;k++){
if(data.query.results.channel[i].item.forecast[k].code==3200){
data.query.results.channel[i].item.forecast[k].text=weatherCode[48];
}else{
data.query.results.channel[i].item.forecast[k].text=weatherCode[data.query.results.channel[i].item.forecast[k].code];
}
// 获取天气图片
var weatherImgURL=你的天气图片包地址;
switch(data.query.results.channel[i].item.forecast[k].code){
case '0':
weatherImgURL=weatherImgURL+'Weather NA.png';break;
case '1':
weatherImgURL=weatherImgURL+'Thunderstorms.png';break;
case '2':
weatherImgURL=weatherImgURL+'Windy.png';break;
case '3':
weatherImgURL=weatherImgURL+'Thunders.png';break;
case '4':
weatherImgURL=weatherImgURL+'Thunderstorms.png';break;
case '5':
weatherImgURL=weatherImgURL+'Icy Snow.png';break;
case '6':
weatherImgURL=weatherImgURL+'Icy Snow.png';break;
case '7':
weatherImgURL=weatherImgURL+'Icy Snow.png';break;
case '8':
weatherImgURL=weatherImgURL+'Light Rain.png';break;
case '9':
weatherImgURL=weatherImgURL+'Light Rain.png';break;
case '10':
weatherImgURL=weatherImgURL+'Icy.png';break;
case '11':
weatherImgURL=weatherImgURL+'Rain.png';break;
case '12':
weatherImgURL=weatherImgURL+'Heavy Rain.png';break;
case '13':
weatherImgURL=weatherImgURL+'Few Flurries.png';break;
case '14':
weatherImgURL=weatherImgURL+'Wet Flurries.png';break;
case '15':
weatherImgURL=weatherImgURL+'Windy Snow.png';break;
case '16':
weatherImgURL=weatherImgURL+'Snow.png';break;
case '17':
weatherImgURL=weatherImgURL+'Weather NA.png';break;
case '18':
weatherImgURL=weatherImgURL+'Icy Snow.png';break;
case '19':
weatherImgURL=weatherImgURL+'Dust.png';break;
case '20':
weatherImgURL=weatherImgURL+'Fog.png';break;
case '21':
weatherImgURL=weatherImgURL+'Haze.png';break;
case '22':
weatherImgURL=weatherImgURL+'Smoke.png';break;
case '23':
weatherImgURL=weatherImgURL+'Thunderstorms.png';break;
case '24':
weatherImgURL=weatherImgURL+'Windy.png';break;
case '25':
weatherImgURL=weatherImgURL+'Frigid.png';break;
case '26':
weatherImgURL=weatherImgURL+'Cloudy.png';break;
case '27':
weatherImgURL=weatherImgURL+'Cloudy Night.png';break;
case '28':
weatherImgURL=weatherImgURL+'Cloudy.png';break;
case '29':
weatherImgURL=weatherImgURL+'Night Few Clouds.png';break;
case '30':
weatherImgURL=weatherImgURL+'Mostly Sunny.png';break;
case '31':
weatherImgURL=weatherImgURL+'Moon.png';break;
case '32':
weatherImgURL=weatherImgURL+'Sunny.png';break;
case '33':
weatherImgURL=weatherImgURL+'Night Few Clouds.png';break;
case '34':
weatherImgURL=weatherImgURL+'Sun.png';break;
case '35':
weatherImgURL=weatherImgURL+'Icy Snow.png';break;
case '36':
weatherImgURL=weatherImgURL+'Hot.png';break;
case '37':
weatherImgURL=weatherImgURL+'Thunders.png';break;
case '38':
weatherImgURL=weatherImgURL+'Thunderstorms.png';break;
case '39':
weatherImgURL=weatherImgURL+'Thunderstorms.png';break;
case '40':
weatherImgURL=weatherImgURL+'Rain.png';break;
case' 41':
weatherImgURL=weatherImgURL+'Snow.png';break;
case '42':
weatherImgURL=weatherImgURL+'Few Flurries.png';break;
case '43':
weatherImgURL=weatherImgURL+'Snow.png';break;
case '44':
weatherImgURL=weatherImgURL+'Cloudy.png';break;
case '45':
weatherImgURL=weatherImgURL+'Thunderstorms.png';break;
case '46':
weatherImgURL=weatherImgURL+'Rain.png';break;
case '47':
weatherImgURL=weatherImgURL+'Thunderstorms.png';break;
case '48':
weatherImgURL=weatherImgURL+'Weather NA.png';break;
}
data.query.results.channel[i].item.forecast[k].imgUrl=weatherImgURL;
}
}
weatherInfo=data.query.results.channel;
},
});
return weatherInfo;
}
转载自：https://blog.csdn.net/DSH964/article/details/84893303
