玩转OpenLayers地图
一、引入地图
1.h5端引入
官网下载ol.js文件，放入项目文件夹，在要渲染地图的html文件引入
2.pc端引入
下载ol依赖，在要渲染地图的文件import引入
二、创建地图容器
三.定义地图和图层
var map, baseLayer, tileLayer, landInfoLayer, polygonFeatures, landLayer, polygonLayer, myCurrentFarmLand, locationMarkerLayer, myCurrentFarmLandHight;
四、初始化地图
清除地图图层（图层名）
map.removeLayer(landLayer);
map.removeLayer(labelLayer);
initMap: function() {
landLayer = new ol.layer.Vector({ source: new ol.source.Vector(), zIndex:6 });
labelLayer = new ol.layer.Vector({ source: new ol.source.Vector(), zIndex:6 });
polygonLayer = new ol.layer.Vector({ source: new ol.source.Vector(), zIndex:5 });
baseLayer = _mapLayer.baseLayer();
map = new ol.Map({
target: 'map',
interactions: ol.interaction.defaults(),
view: new ol.View({
projection: _mapConfig.view.projection,
center: [103.504892,30.545058],
zoom: _mapConfig.view.zoom,
minZoom: _mapConfig.view.minZoom,
maxZoom: _mapConfig.view.maxZoom,
}),
controls: new ol.control.defaults({
attribution: false,
zoom: false,
scale: true,
rotate: false,
}),
layers: [baseLayer, polygonLayer],
});
// 地图点击事件
this.listenMapSingleClick();
},
四、地图点击事件
1.地图点击事件获取点击位置执行对应点击操作
listenMapSingleClick: function() {
map.on("click", function(event) {
var wkt = `POINT(${event.coordinate[0]} ${event.coordinate[1]})`;
});
}.bind(this);
五、瓦片图层
1.离线瓦片地图加载
getCurrentFarmLandHight: function() {
myCurrentFarmLandHight = new ol.layer.Tile({
source: new ol.source.WMTS({
url: "/jsyApi/api/proxy/map/highFarmLand",
layer: 'farm:f_farm_land_view',
matrixSet: "EPSG:4326",
format: "image/png",
projection: new ol.proj.Projection({
code: "EPSG:4326",
units: "degrees",
axisOrientation: "neu"
}),
tileGrid: new ol.tilegrid.WMTS({
tileSize: [256, 256],
extent: [-180.0, -90.0, 180.0, 90.0],
origin: [-180.0, 90.0],
resolutions: [
0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625,
0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625,
6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5,
4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5,
5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6,
6.705522537231445E-7, 3.3527612686157227E-7
],
matrixIds: [
'EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4',
'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9',
'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14',
'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19',
'EPSG:4326:20', 'EPSG:4326:21'
]
}),
style: 'if_farm_diff_color',
wrapX: true
})
});
myCurrentFarmLandHight.setZIndex(4);
map.addLayer(myCurrentFarmLandHight);
},
2.在线瓦片图层加载
getCurrentFarmLand: function() {
myCurrentFarmLand = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: "/cdszlyManager/farmLandApp/layer/land",
resolutions: resolutions,
cacheSize: 0
})
});
myCurrentFarmLand.setZIndex(3);
map.addLayer(myCurrentFarmLand);
},
六、渲染点、线、面
addFeatures(value) {
var features = [];
// Add WKT data
if (value && value.length && typeof value !== 'string') {
value.map((item, index) => {
features.push(this.getFeatureByWKT(item));
});
} else {
features.push(this.getFeatureByWKT(value));
}
landLayer.getSource().addFeatures(features);
// Map positioning
var extent;
try {
extent = landLayer.getSource().getExtent();
} catch (err) {
console.log('err', err);
}
map.getView().fit(extent, {
duration: 1,
constrainResolution: false,
nearest: true
});
},
getFeatureByWKT(item, sourceCode, targetCode) {
try {
const view = map.getView();
const format = new ol.format.WKT();
const feature = format.readFeature(item.mapPoints || item.point, {
featureProjection: targetCode || view.getProjection(),
dataProjection: sourceCode || view.getProjection()
});
feature.id = item.id;
feature.type = this.activeNav;
feature.item = item;
var geometry = feature.getGeometry();
// Point
if (geometry instanceof ol.geom.Point) {
feature.setStyle(() => {
return new ol.style.Style({
image: new ol.style.Icon({
src: `../../../images/farmer/${this.activeNav}.png`,
scale: 0.8
})
});
});
}
// Line
if (geometry instanceof ol.geom.LineString) {
feature.setStyle(() => {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#FF4141',
width: 2
}),
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' })
}),
fill: new ol.style.Fill({ color: 'rgba(255,65,65,.2)' })
});
});
}
// Polygon
if (geometry instanceof ol.geom.Polygon || geometry instanceof ol.geom.MultiPolygon) {
feature.setStyle(() => {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#FF4141',
width: 2
}),
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' })
}),
fill: new ol.style.Fill({ color: 'rgba(255,65,65,.2)' })
});
});
}
return feature;
} catch (e) {
return null;
}
},
七、渲染轨迹线条（起点、终点，轨迹线条）
addFeatures(value) {
if (map) {
// this.removeTrackLineLayer()
if (!value.length) return;
// Convert data format type
// Set map center to the first value in the array
map.getView().animate({ center: value[0], duration: 0 });
// Create a geoMarker feature
let geoMarker = new ol.Feature({
type: 'geoMarker',
geometry: new ol.geom.Point(value[0])
});
geoMarker.setStyle(() => {
return new ol.style.Style({
image: new ol.style.Icon({
src: `../../../images/farmer/agriculturalMachinery.png`,
scale: 0.8,
zIndex: 10,
// rotation: (Math.PI * (-90 + dir) / 180)
})
});
});
// Create startMarker feature
let startPoint = new ol.Feature({
type: "startMarker",
geometry: new ol.geom.Point(value[0])
});
startPoint.setStyle(() => {
return new ol.style.Style({
image: new ol.style.Icon({
src: `../../../images/farmer/icon-start.png`,
scale: 0.6,
anchor: [0.5, 1]
})
});
});
// Create endMarker feature
let endPoint = new ol.Feature({
type: "endMarker",
geometry: new ol.geom.Point(value[value.length - 1])
});
endPoint.setStyle(() => {
return new ol.style.Style({
image: new ol.style.Icon({
src: `../../../images/farmer/icon-end.png`,
scale: 0.6,
anchor: [0.5, 1]
})
});
});
// Create trackLine feature
let feature = new ol.Feature({
type: "trackLine",
geometry: new ol.geom.LineString(value)
});
feature.setStyle(() => {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 3
})
});
});
// Add features to the landLayer's source
landLayer.getSource().addFeatures([geoMarker, feature, startPoint, endPoint]);
// Add landLayer to the map
// map.addLayer(landLayer)
}
}
七、地图点位point格式转换成数组
1.地图点位point格式转换成数组
let formats = new ol.format.WKT().readFeatureFromText(item.location);
let mapPoint = formats.getGeometry().getCoordinates();
2.地图点位数组转换成point格式
let formats = [103.2546415225, 30.2554545];
let mapPoint = `POINT(${formats[0]} ${formats[1]})`;
3.地图点位geojson格式转换成feature格式
let features = new ol.format.GeoJSON().readFeatures(value.geojson);
4.地图点位json格式创建成feature格式
// 数据格式类型
const format = new ol.format.WKT();
const feature = format.readFeature(item.businessPoint, { featureProjection: view.getProjection(), dataProjection: view.getProjection() });
5.地图点位数组地块转换成Polygon格式
1.
import ol from 'openlayers';
const coords = [
[103.57945599148707, 30.499150800262896],
[103.57899615541459, 30.49809488039276],
[103.58058003521978, 30.497549889492046],
[103.58056300425415, 30.498776119018654],
[103.57945599148707, 30.499150800262896]
];
const polygonFeature = new ol.Feature({
geometry: new ol.geom.Polygon([coords])
});
const vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [polygonFeature]
})
});
2.
let polygonFeature = new Feature(new Polygon([wkt]));
let mapPointsWkt = new WKT().writeFeatureText(polygonFeature);
6.画圆
// 创建一个坐标
// const center = [120, 30];
// 创建一个圆形对象
let myCircle = new ol.geom.Circle(mapPoint, 0.00005);
// 创建一个矢量对象
let myVector = new ol.source.Vector();
// 创建一个矢量图层
let myVectorLayer = new ol.layer.Vector({
source: myVector,
zIndex: 10
});
let myVectorFeature = new ol.Feature(myCircle);
myVectorFeature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
color: "#f00",
width: 2
}),
fill: new ol.style.Fill({
color: [255, 0, 0, 0.6]
}),
}));
// 将圆形对象添加到矢量对象中
myVector.addFeature(myVectorFeature);
// 将矢量图层添加到地图中
map.addLayer(myVectorLayer);
7.渲染数组格式地块面
getFeatureByWKT(item) {
let polygonFeature = new ol.Feature({
geometry: new ol.geom.Polygon([item.mapPoints]) // 线的坐标
});
polygonFeature.item = value;
polygonFeature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
width: 3,
color: [255, 0, 0, 1]
}),
fill: new ol.style.Fill({
color: [0, 0, 255, 0.2]
})
});
landLayer.getSource().addFeature(polygonFeature);
}