openlayers入门：在瓦片图上加矢量及OverLay的使用
openlayers入门：在瓦片图上加矢量及OverLay的使用
- 矢量三要素：
- 关于OverLay的使用
- 地图数据三类型
矢量三要素：
- geometry：
几何体包括点（Point），线（LineString），面（Polygon） - properties:
features - style:
样式
这是一个绘制点的代码：
<script type="text/javascript">
//点的经纬度
var labelCoords_org = [112.46667, 74.18667]
//转换成坐标
var labelCoords=ol.proj.transform(labelCoords_org, "EPSG:4326", "EPSG:3857");
//制定属性
var feature = new ol.Feature({
//制定几何体
geometry: new ol.geom.Point(labelCoords)
});
//制定图层 vLayer
var vLayer = new ol.layer.Vector({
source: new ol.source.Vector({features:[feature]})
});
//制定中心点
var center = ol.proj.transform([112.46667, 74.18667], 'EPSG:4326', 'EPSG:3857');
//创建地图,这里没有制作地图层
var map = new ol.Map({
view: new ol.View({
center: center,
projection: 'EPSG:3857',
zoom: 8
}),
controls: ol.control.defaults().extend([mousePositionControl]),
target: 'map'
});
//把vlayer加到map对象上
map.addLayer(vLayer);
</script>
下面是点线面的feature代码：
//点
var labelCoords_org = [120, 40];
//线
var lineCoords_org = [[120,40],[116,35]];
var lineGeom = new ol.geom.LineString(lineCoords_org);
//面
var polygon_org = {[121,41],[117,36],[119,39]};
var polygonGeom = new ol.geom.Polygon(polygon_org);
//坐标转换
lineGeom.transform("EPSG:4326", "EPSG:3857");
polygonGeom.transform("EPSG:4326", "EPSG:3857");
//制定features 可参看官方文档
// https://openlayers.org/en/latest/examples/geojson.html?q=geojson
var feature2 = new ol.Feature({
geometry:lineGeom
});
var feature3 = new ol.layer.Vector({
geometry:polygon
});
var vLayers2 = new ol.layer.Vector({
source:new ol.source.Vector({features:[feature2]})
});
var vLayers3 = new ol.layer.Vector({
source:new ol.source.Vector({feature:[feature3]})
});
//制定中心点
var center = ol.proj.transform([112.46667, 74.18667], 'EPSG:4326', 'EPSG:3857');
//创建地图,这里没有制作地图层
var map = new ol.Map({
view: new ol.View({
center: center,
projection: 'EPSG:3857',
zoom: 8
}),
controls: ol.control.defaults().extend([mousePositionControl]),
target: 'map'
});
//把vlayer加到map对象上
map.addLayer(vLayers2);
map.addLayer(vLayers3);
样式要加在层上面（Layer）下面是调整样式的代码,官方文档中是在ol.style：
//点
var labelCoords_org = [120, 40];
var labelGeom = new ol.geom.Point(labelCoords_org);
//线
var lineCoords_org = [[120,40],[116,35]];
var lineGeom = new ol.geom.LineString(lineCoords_org);
//面
var polygon_org = {[121,41],[117,36],[119,39]};
var polygonGeom = new ol.geom.Polygon(polygon_org);
//坐标转换
labelGeom.transform("EPSG:4326", "EPSG:3857");
lineGeom.transform("EPSG:4326", "EPSG:3857");
polygonGeom.transform("EPSG:4326", "EPSG:3857");
//制定features 可参看官方文档
// https://openlayers.org/en/latest/examples/geojson.html?q=geojson
var feature = new ol.feature({
geometry:
var feature2 = new ol.Feature({
geometry:lineGeom
});
var feature3 = new ol.Feature({
geometry:polygon
});
//从官网复制一个style的样式 需要自己设置fill（填充颜色）和 stroke(边界颜色)
var stoke2 = new ol.style.Stroke({
color = '#4fff16',
width = 3
});
var fill3 = new ol.style.Fill({
color:'rgba(255, 0, 0, 0.5)'
});
var stroke3 = new ol.style.Stroke({
color:'#3399CC',
width: 1.25
});
var styles2 = [
new ol.style.Style({
stoke: stoke2;
})
]
var styles3 = [
new ol.style.Style({
//image 暂时没有 先注释掉
// image: new ol.style.Circle({
// fill:fill,
// stroke:stroke,
// radius:5
// }),
fill:fill3,
stroke:stroke3
)}
];
//点的style需要用到Circle的样式
var image1 = new ol.style.Circle({
fill: fill,
stroke: stroke,
radius:15
)};
var styles = [
new ol.style.Style({
image:image1
}),
fill:fill,
stroke:stroke
})
];
//点的图标样式
var styles_icon = [
new ol.style.Style({
image:new ol.style.Icon({
//文件路径
src:"/filePath/icon.png",
//其他参数详见
//https://openlayers.org/en/latest/apidoc/module-ol_style_Icon.html
})
}];
]
// vLayers
var vLayers = new ol.layers.Vector({
source:new ol.source.Vector({feature:[feature]}),
style:styles
});
var vLayers2 = new ol.layer.Vector({
source:new ol.source.Vector({features:[feature2]}),
style:stylels2
});
var vLayers3 = new ol.layer.Vector({
source:new ol.source.Vector({feature:[feature3]}),
style: styles3
});
//制定中心点
var center = ol.proj.transform([112.46667, 74.18667], 'EPSG:4326', 'EPSG:3857');
//创建地图,这里没有制作地图层
var map = new ol.Map({
view: new ol.View({
center: center,
projection: 'EPSG:3857',
zoom: 8
}),
controls: ol.control.defaults().extend([mousePositionControl]),
target: 'map'
});
//把vlayer加到map对象上
map.addLayer(vLayers);
map.addLayer(vLayers2);
map.addLayer(vLayers3);
map属性的依赖关系是:
Geometry
Style
Feature
Source
Vector
Source
Map
Layer
View
关于OverLay的使用
OverLay是地图上的覆盖物功能，该功能需要创建一个新的div来接收。Overlay和在地图上直接使用feature描点的方法相比，缺点在于使用起来代码稍复杂，但是优点在于它使用div容器，所以也更加多样化。下面是Overlay的使用方法：
//overlay 官网example
//https://openlayers.org/en/latest/examples/overlay.html
<style>
#popup {
width: 20px;
height: 20px;
border: 1px solid #088;
border-radius: 10px;
background-color: #0FF;
opacity: 0.5;
}
</style>
...
<script>
var popup = new ol.Overlay({
element: document.getElementById('popup')
});
popup.setPosition(labelCoords);
map.addOverlay(popup);
</script>
地图数据三类型
- 影像瓦片
- 矢量shp
ArcGis 使用格式 - 矢量geojson
这个在官网上有 示例。
geojson 简单用法如下：
<script type="text/javascript">
var gjson={
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature",
"properties": { "name": "Saguenay (Arrondissement Latterière)" },
"geometry": {
"type": "Point",
"coordinates": [ 120, 40 ]
}
}
]
}
;
// vLayer
var vLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(gjson,{featureProjection:"EPSG:3857"})
// features:[feature]
}),
style:function(feature) {
styles[0].getText().setText(feature.get('name'));
return styles[0];
}
});