WebGIS开发教程：Openlayers常见功能实现

Openlayers的核心

Openlayers如何实现交互式绘制

创建矢量图层和矢量数据源 - 创建画布
创建画笔
激活画笔

如何加载天地图,设置中心点和显示级别

javascript 复制代码

const TianDiMap_cva = new ol.layer.Tile({ 
title:"天地图矢量注记图层", 
source:new ol.source.XYZ({ 
url:'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + '8a5c2b00e94b49659861e064c37f778d', 
wrapX:false 
}) 
}) 
const map = new ol.Map({ 
target:'map_container', 
layers:[TianDiMap_vec,TianDiMap_cva], view:new ol.View({ 
projection:'EPSG:4326', 
center:[0,0], 
zoom:1 
}) 
})

如何实现图层切换

javascript 复制代码

const layers = map.getLayers().getArray(); 
map.addLayer(); 
map.removeLayer(); 
map.getLayers().item(index).setVisible(boolean) //实现图层的显示和隐藏

Openlayer如何查询要素

在本地定义geojson数据

javascript 复制代码

var data = { 
type: "FeatureCollection", 
features: [ 
{ 
type: "Feature", 
geometry: { 
type: "Point", coordinates: [114, 30] 
}, 
properties:{ 
id:1001, 
name:"武汉" 
} 
},{ 
type:"Feature", 
geometry:{ 
type:"LineString", coordinates:[ 
[114,30], 
[120,30] 
] 
} 
} 
] 
} 
const style = new ol.style.Style({ 
//填充⾊ 
fill: new ol.style.Fill({ 
color: 'rgba(255, 255, 255, 0.2)' }), 
//边线颜⾊ 
stroke: new ol.style.Stroke({ 
color: '#ffcc33', 
width: 2 
}), 
//形状 
image: new ol.style.Circle({ 
radius: 8, 
fill: new ol.style.Fill({ 
color: '#ffcc3367' 
}), 
stroke: new ol.style.Stroke({ color: '#333', 
width: 2 
})
}) 
}) 
var source = new ol.source.Vector({ 
/* 将geojson数据设置给实例数据源 */ 
features: new ol.format.GeoJSON().readFeatures(data) }) 
var layer = new ol.layer.Vector({ 
source, 
style 
}) 
map.addLayer(layer); 
给要素定义样式 
var data = { 
type: "FeatureCollection", 
features: [ 
{ 
type: "Feature", 
geometry: { 
type: "Point", 
coordinates: [114, 30] 
} 
} 
] 
} 
const style = new ol.style.Style({ 
//填充⾊ 
fill: new ol.style.Fill({ 
color: 'rgba(255, 255, 255, 0.2)' 
}), 
//边线颜⾊ 
stroke: new ol.style.Stroke({ 
color: '#ffcc33', 
width: 2 
}), 
//形状 
image: new ol.style.Circle({ 
radius: 8, 
fill: new ol.style.Fill({ 
color: '#ffcc3367' 
}), 
stroke: new ol.style.Stroke({ 
color: '#333', 
width: 2 
}) 
}) 
}) 
var features = new ol.format.GeoJSON().readFeatures(data) //++ features[0].setStyle(style)//++ 
var source = new ol.source.Vector({ 
/* 将geojson数据设置给实例数据源 */ 
features 
}) 
var layer = new ol.layer.Vector({ 
source 
}) 
map.addLayer(layer);

加载geojson⽂件的数据

javascript 复制代码

{ 
"type": "FeatureCollection", 
"features": [ 
{ 
"type": "Feature", 
"geometry": { 
"type": "Point", 
"coordinates": [114, 30] } 
} 
] 
} 
const source = new ol.source.Vector({ url: './data/map.geojson', format: new ol.format.GeoJSON() 
}) 
const layer = new ol.layer.Vector({ source 
}) 
map.addLayer(layer)

复制代码

⼀定要以服务的方式去加载，否则报错

加载网络数据

javascript 复制代码

const source = new ol.source.Vector({ 
url: 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=420100', format: new ol.format.GeoJSON() 
}) 
const layer = new ol.layer.Vector({ 
source 
}) 
map.addLayer(layer)

openlayer添加图层到指定位置

javascript 复制代码

const layers = map.getLayers(); 
layers.insertAt(index,layerName);

openlayer的坐标转换

javascript 复制代码

var gcs4490 = ol.proj.transform([605906.540647357,2723639.37418766], new ol .proj.Projection({code:'EPSG:4548'}),new ol.proj.Projection({code:'EPSG:449 0'}));