🌺前言
OpenLayers初始化地图的简化步骤
1.构造图层
typescript
//需要构建的图层配置信息
const layerConfigList = [
{
name: '高德地图',
layerName: 'gaode',
layerUrl: `****`,
layerType: 'gaode',
zIndex: 32
},
{
name: '天地图矢量',
layerName: 'vector',
layerUrl: `***`,
layerType: 'OnlineXYZ3857',
zIndex: 33
},
{
name: '图层3',
layerName: 'wms',
layerUrl: `你的url`,
layerType: 'TileWMS',
params: {
'LAYERS': '***', FORMAT: 'image/png', Version: '1.1.1', SRS: 'EPSG:3857', TRANSPARENT: 'TRUE'
},
zIndex: 37
},
]
/**
* 组装图层
* @param list
* @returns
*/
const getLayers = (list: LayerItem[]) => {
// wms图层
const layerList = list.map(item => {
if (item.layerType === 'TileWMS') {
return new TileLayer({
source: new TileWMS({
url: item.layerUrl,
params: item.params!,
wrapX: true
}),
zIndex: item.zIndex,
className: item.layerName,
visible: item.visible
});
}
// 自定义的矢量层
if (item.layerType === 'pressureMark') {
return new VectorLayer({
source: getSelfLayerSource('pressure'),
zIndex: item.zIndex,
visible: item.visible,
className: item.layerName,
style: getSelftClusterStyle('pressure')
});
}
if (item.layerType === 'leakageMarker') {
return new VectorLayer({
source: getSelfLayerSource('leakage'),
zIndex: item.zIndex,
visible: item.visible,
className: item.layerName,
style: getSelftClusterStyle('leakage')
});
}
//自定义的矢量层
if (item.layerType === 'polygonLayer') {
return new VectorLayer({
style: new Style({
//图层样式
fill: new Fill({
//填充颜色
color: 'rgba(128,216,255,0.1)',
}),
stroke: new Stroke({
color: '#0091ea', //边框颜色
width: 2, // 边框宽度
}),
image: new Circle({
radius: 5,
stroke: new Stroke({
color: '#FF0000', //边框颜色
width: 3,
}),
fill: new Fill({
color: '#ffffff', //填充颜色
}),
}),
}),
className: item.layerName,
zIndex: item.zIndex,
visible: item.visible,
});
}
//瓦片
return new TileLayer({
source: new XYZ({
url: item.layerUrl,
wrapX: false,
}),
zIndex: item.zIndex,
className: item.layerName,
visible: item.visible
});
})
return layerList
}
2.构造View对象
typescript
const view = new View({
center: fromLonLat([108.9, 34.27]),
zoom: 10,
})
3.构造地图实例
typescript
const layers = getLayers(layerConfigList)
const map = new Map({
target: '标签的id',
layers: [...layers],
view,
controls: defaultControls({
zoom: false,
rotate: false,
attribution: false
})
});
目录
文章最后更新于 2024-10-17 10:09:54
作者:徐徐版权声明:转载请注明文章出处
留言

~~空空如也