在一家互联网企业工作，工作接近一年，总结一下对openlayers的学习，主要是在vue项目中对openlayers的使用，希望可以对大家有所帮助~~
从openlayers的安装说起把~
npm install olopenlayers在项目中的引入
引入是按需引入，根据你所需要的来引入就好了
import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import { WMTS, Vector as VectorSource } from 'ol/source'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { Circle as CircleStyle, Fill, Stroke, Icon, Text, Style } from 'ol/style';
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import Feature from 'ol/Feature'
import { XYZ,ImageWMS,TileWMS, Vector as VectorSource,WMTS } from "ol/source";
import { Tile as TileLayer, Image as ImageLayer,Vector as VectorLayer } from "ol/layer";创建天地图
为了方便后面对地图的操作，可以将map定义成全局变量
data(){
return{
map:null,
newcontent: null,
newoverlay: null,
}
},
mounted(){
this.initMap()
},
methods:{
initMap(){
const map = new Map({
target: 'map',
// logo: false,
layers: [],
view: new View({
// 地图视图
projection: 'EPSG:4326', // 坐标系，有EPSG:4326和EPSG:3857
center: [117.2531, 31.861184], // 坐标 安徽
// minZoom: 10, // 地图缩放最小级别
zoom: 8 // 地图缩放级别
})
})
this.map = map
const wkid = "EPSG:4326"
//天地图底图
this.addTiandiLayer("http://t{0-7}.tianditu.com/DataServer?T=vec_w&tk=申请的天地图
key&x= {x}&y={y}&l={z}",wkid)
//天地图标注图层
this.addTiandiLayer("'http://t{0-7}.tianditu.com/DataServer?T=cva_w&tk=申请的天地图
key&x= {x}&y={y}&l={z}'",wkid)
},
addTiandiLayer(url,wkid) {
const source = new XYZ({
url: url,
projection: wkid
});
const tdtLayer = new TileLayer({
source: source,
visible: true
});
}
}加载矢量数据
以点为例，point.setProperties(data[i]);很重要，不写的话点击的时候获取不到point的属性数据
addPointData(){
var source = new VectorSource();
var layer = new VectorLayer({
source: this.source
});
this.map.addLayer(layer);
for (let i = 0; i < data.length; i++) {
const point = new Feature({
geometry: new Point([data[i].longitude, data[i].latitude])
});
point.setStyle(new Style({
image: new Icon({
src: require('../../../assets/icons/点.png')
})
}))
point.setProperties(data[i]);//这点很重要，不写的话点击的时候获取不到point的属性数据
layer.getSource().addFeature(point);
}
}地图的几种事件
用到最多的应该就是单击事件了，目前见到的大概就是这么多了
map.on('click', this.mapClick);//地图点击
map.on('pointermove', this.mapPointerMove);//鼠标移入
map.on('singleclick', this.mapSingleClick);//地图单击
map.on('postcompose', this.animateFlights);//拖拽地图开始事件（不常用）
map.on('moveend', this.mapMoveEnd);//拖拽地图结束事件（不常用）地图事件详解——click单击事件的mapClick方法
当你点击地图的时候，就会触发这个方法
mapClick(evt){
console.log(evt)//打印结果如下图
if (this.map.hasFeatureAtPixel(evt.pixel)) {//判断是否点击的是加载的feature数据,点线面等
//获取点击到的features，可能不止一个,根据需要取舍,在此取features[0]
const features = this.map.getFeaturesAtPixel(evt.pixel);
//可以对点击的feature进行一些操作，如显示点击图层的某个属性，以弹窗展示等等，或是设置点击feature高亮显示，当然这要根据具体功能来写了
}
}这是打印出来的evt的结果，我们常用到的也就是上面的二个属性evt.pixel和evt.coordinate
这是打印出来的features的结果，我们常用到的也就是上面的二个属性features[0].values_
地图事件详解——pointermove移入事件的mapPointerMove方法
移入事件和点击事件是一样的，只不过触发方式不同
mapPointerMove(evt){
console.log(evt)//打印结果如下图
if (this.map.hasFeatureAtPixel(evt.pixel)) {//判断是否点击的是加载的feature数据,点线面等
//获取点击到的features，可能不止一个,根据需要取舍,在此取features[0]
const features = this.map.getFeaturesAtPixel(evt.pixel);
//可以对点击的feature进行一些操作，如显示点击图层的某个属性，以弹窗展示等等，或是设置点击feature高亮显示，当然这要根据具体功能来写了
}
}地图弹窗实现
initMap修改
initMap(){
var container = document.getElementById('popup');
var content = document.getElementById('popupcontent');
var overlay = new Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
const map = new Map({
target: 'map',
// logo: false,
layers: [],
view: new View({
// 地图视图
projection: 'EPSG:4326', // 坐标系，有EPSG:4326和EPSG:3857
center: [117.2531, 31.861184], // 坐标 安徽
// minZoom: 10, // 地图缩放最小级别
zoom: 8 // 地图缩放级别
}),
overlays: [overlay]
})
this.map = map
this.newoverlay = overlay
this.newcontent = content
const wkid = "EPSG:4326"
//天地图底图
this.addTiandiLayer("http://t{0-7}.tianditu.com/DataServer?T=vec_w&tk=申请的天地图
key&x= {x}&y={y}&l={z}",wkid)
//天地图标注图层
this.addTiandiLayer("'http://t{0-7}.tianditu.com/DataServer?T=cva_w&tk=申请的天地图
key&x= {x}&y={y}&l={z}'",wkid)
},
mapClick(evt){
if (this.map.hasFeatureAtPixel(evt.pixel)) {
const features = this.map.getFeaturesAtPixel(evt.pixel);
//判断点击的是否为点数据,面改为Polygon,线改为Line
if(features[0].getGeometry() instanceof Point){
const cor = evt.coordinate
const data = features[0].values_
this.addPopup(data,cor)//展示弹窗
}else{
this.newoverlay.setPosition(undefined);// 否则不显示
}
}
}
addPopup(data,cor){
if(data.name){
this.newcontent.innerHTML = '<div><span>名称：</span><span
class="popup_code">' +
data.name + '</span></div';
this.newoverlay.setPosition(cor);
}
},temlate
<div id="mapDiv" class="device-mapDiv"></div>
// 弹窗
<div id="popup" class="ol-popup" style="background:rgba(32, 72, 145, 1);">
<div id="popupcontent" class="popupcontent"></div>
</div>弹窗样式css
.ol-popup{
position: relative;
left: -100px;
top: -55px;
border-radius: 5px;
}
.popupcontent{
height: 46px;
padding: 10px;
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
// border-top-color: white;
// border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
// border-top-color: #cccccc;
// border-width: 11px;
left: 48px;
margin-left: -11px;
}点击事件就完成了，内容可以根据需要修改
如何加载矢量面的时候，将面的名称也显示出来
设置样式的时候加个text就好了
for (let i = 0; i < data.length; i++) {
var source = new VectorSource();
var layer = new VectorLayer({
source: this.source
});
if (data[i].floor == selectfloor) {
//wkt转feature数据
let wkt = data[i].shape;
let format = new WKT();
let feature = format.readFeature(wkt);
feature.setProperties(data[i]);
source.addFeature(feature);
feature.setStyle(addStyle(feature));
function addStyle () {
let style = new Style({
fill: new Fill({
color: '#0e2036'
}),
stroke: new Stroke({
color: '#5b91bb',
width: 3
}),
text: new Text({
text: `${feature.getProperties().name}`,
textAlign: 'center',
font: 'bold 12px sans-serif',
fill: new Fill({
color: '#7bb5e1'
})
})
});
return style;
}
}
}先更新到这了，之后遇到问题会持续更新~~