壹膏燃、?常見問題
備注：
如同現(xiàn)openlayer官網(wǎng)的實(shí)例代碼所以用的是VectorLayer的格式刷允，項(xiàng)目是在該頁(yè)面上引用的ol；
項(xiàng)目在全局引用了ol奶躯，所以用的ol.layer.Vector這樣的格式；
部分代碼是在word里改的可能有錯(cuò)誤亿驾，粘貼復(fù)制需要檢查嘹黔。
1、?tilelayer與vectorlayer
tilelayer為瓦片數(shù)據(jù)莫瞬，獲取到的數(shù)據(jù)是以圖片的形式展示的儡蔓，所以無(wú)法獲取包含的屬性值；
??var imgayer?=?new?TileLayer({
????????source:?new?TileWMS({
??????????url:?'http://xx.xxx.xxxx /geoserver/'testosmmap /wms',
??????????params:{
?LAYERS:?'testosmmap:xxxx,
????????????TILED:?true,
????????????VERSION:?'1.1.0'
},
??????????serverType:?'geoserver',
??????????wrapX:?false,
})
})
vectorlayer獲取到的為矢量數(shù)據(jù)疼邀，openlayer默認(rèn)的樣式：點(diǎn)為中間白色邊框?yàn)樗{(lán)色的圓圈喂江，線為藍(lán)色，面為中間白色邊框藍(lán)色旁振；在添加矢量數(shù)據(jù)的時(shí)候可以根據(jù)自己想要的樣子修改vectorlayer里的style获询，改變其樣式。
var?style?=?new?ol.style.Style({
????????fill:?new?ol.style.Fill({
??????????color:?'RGBA(27,84,146,0.3)'
}),
????????stroke:?new?ol.style.Stroke({
??????????width:?4,
??????????color:?'RGBA(27,84,146,1)'
}),
????????image:?new?ol.style.Icon({
??????????anchor:?[0.5,?30],
??????????anchorXUnits:?'fraction',
??????????anchorYUnits:?'pixels',
??????????opacity:?0.95,
??????????src:?that.point_icon //圖片src
}),
????????text:?new?ol.style.Text({
??????????font:?'bold?15px?"Open?Sans",?"Arial?Unicode?MS",?"sans-serif"',
??????????placement:?'point',
??????????fill:?new?ol.style.Fill({
????????????color:?'black'
}),
??????????offsetY:?5,
})
})
??????//點(diǎn)線面要素圖層
??//?這里的arr為要素集
??????Var vectorsource1?=?new?ol.source.Vector({
????????features:?arr
})
??????Var vectorlayer1?=?new?ol.layer.Vector({
????????source:?vectorsource1,
?//要素的name值顯示在要素上
????????style:?function?(feature)?{
??????????style.getText().setText(feature.get('name'))
??????????return?style
}
})
通過geoserver添加vectorlayer矢量數(shù)據(jù)：
? ? ? ? Var vectorsource=?new?VectorSource({?
?????????//geoserver下預(yù)覽選擇geojson格式的url?
??????????url:?'http://xx.xxx.xxxx/geoserver/testosmmap/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=testosmmap%3Apeople_point&maxFeatures=50&outputFormat=application%2Fjson',
??????????format:?new?GeoJSON()
})
????????Var?vectorlayer?=?new?VectorLayer({
??????????source:?vectorsource_
??????????style:?new?Style({
????????????image:?new?Icon({
??????????????src:?people
})
})
})
2拐袜、?獲取矢量要素的屬性值getProperties()及幾何信息getGeometry()
?var?features?=?vectorsource.getFeatures()
????????for?(var?m?=?0;?m?<?feature.length;?m++)?{
?var prop = features[m].getProperties()
?var geom = features[m].getGeometry()
}
3吉嚣、?獲取當(dāng)前的zoom比例縮放值
當(dāng)我們要根據(jù)其zoom的值來(lái)改變一些地圖上的東西時(shí)，這時(shí)候就要監(jiān)聽zoom的變化阻肿，實(shí)時(shí)獲取當(dāng)前的zoom值：（在moveend瓦戚，縮放結(jié)束時(shí)獲取當(dāng)前地圖的縮放比例）
map.on('moveend',?function?(event)?{
????????var?zoom?=?map.getView().getZoom()
})
4、?獲取當(dāng)前地圖的范圍丛塌，并根據(jù)當(dāng)前范圍設(shè)置中心點(diǎn)，定位功能
比如說根據(jù)一個(gè)點(diǎn)擊事件畜疾，定位到該要素赴邻，將該要素設(shè)為中心點(diǎn)：(通過getGeomety()獲取該要素的幾何信息，再根據(jù)幾何信息獲取該要素的范圍啡捶，最后設(shè)置地圖的視圖即可)
?var?geometry?=?feature.getGeometry();
var?extent?=?geometry.getExtent();
????map.getView().fit(extent,?map.getSize());
5姥敛、?Drawend事件，繪制點(diǎn)線面結(jié)束事件
繪制結(jié)束后瞎暑，獲取本次繪制的要素feature
draw.on('drawend',?function?(event)?{
????????that.feature?=?event.feature
?//獲取feature的坐標(biāo)點(diǎn)
????????var?coordinate?=?event.feature.getGeometry().getCoordinates()
????????map.removeInteraction(draw)
})?
6彤敛、?添加select選中事件与帆，Selected選中后觸發(fā)事件
?var?select?=?new?ol.interaction.Select()
??????map.addInteraction(select)
??????select.on('select',?function?(evt)?{
?//選中的要素
????????var?feature?=?evt.selected[0]
})
7、?地圖點(diǎn)擊事件墨榄，click玄糟、doubleclick、pointermove袄秩、pointerdrag阵翎、pointerdown
//單擊事件
map.on('click',?function?(evt)?{
?????var?feature1?=?map.forEachFeatureAtPixel(evt.pixel,?function?(feature){
??????????return?feature
})
})
//鼠標(biāo)移動(dòng)事件
map.on("pointermove",?function(e)?{
??varfeature1?=?map.forEachFeatureAtPixel(e.pixel,?function?(feature){
??????????return?feature
})
});
//雙擊事件
map.on("doubleclick",?function(e)?{
??varfeature1?=?map.forEachFeatureAtPixel(e.pixel,?function?(feature){
??????????return?feature
})
});
//鼠標(biāo)拖拽事件
//（拖拽時(shí)改變鼠標(biāo)樣式的操作）
??map.on('pointerdrag',?function?(evt)?{
????????$('#map').removeClass('mapup')
????????$('#map').addClass('mapdown')
})
??????map.on('pointerup',?function()?{
????????$('#map').addClass('mapup')
})
8、?添加超圖服務(wù)器上的data數(shù)據(jù)即矢量數(shù)據(jù)之剧，sql查詢郭卫、幾何查詢添加數(shù)據(jù)
//通過sql查詢
var?geometryParam?=?new?SuperMap.GetFeaturesBySQLParameters({
????????????queryParameter:{
??????????????name:?'abc'
},
?//abc為data的數(shù)據(jù)源名稱；xyz為數(shù)據(jù)集名稱
????????????datasetNames:?['abc:?xyz'],
????????????toIndex:?20000,
????????????maxFeatures:?20000
})
var?url?=?'http://xxx.xxx.xxxx/iserver/services/xxx/rest/data'
??????????var?icon?=?that.icon1
??????????that.adddata(url,?geometryParam,?icon)
//添加的方法
adddata?(url,?geometryParam,?icon)?{
??????let?that?=?this
??????new?ol.supermap.FeatureService(url).getFeaturesBySQL(
????????geometryParam,
????????function?(serviceResult)?{
??????????var?features?=?new?ol.format.GeoJSON().readFeatures(
????????????serviceResult.result.features
)
??????????var?vectorSource?=?new?ol.source.Vector({
????????????features:?features,
????????????wrapX:?false
})
??????????var?style?=?new?ol.style.Style({
????????????image:?new?ol.style.Icon({
??????????????anchor:?[0.5,?30],
??????????????anchorXUnits:?'fraction',
??????????????anchorYUnits:?'pixels',
??????????????opacity:?0.95,
??????????????src:?icon
}),
????????????text:?new?ol.style.Text({
??????????????font:?'bold?15px?"Open?Sans",?"Arial?Unicode?MS",?"sans-serif"',
??????????????placement:?'point',
??????????????fill:?new?ol.style.Fill({
????????????????color:?'black'
}),
??????????????offsetY:?5,
})
})
??????????var?resultLayer?=?new?ol.layer.Vector({
????????????source:?vectorSource,
????????????//?style:?style
????????????style:?function?(feature)?{
??????????????style.getText().setText(feature.get('NAME'));
??????????????return?style
}
})
??????????map.addLayer(resultLayer)
??????????//?}
})
},
//通過幾何查詢
var?geometryParam?=?new?SuperMap.GetFeaturesByGeometryParameters({
//abc為data的數(shù)據(jù)源名稱背稼；xyz為數(shù)據(jù)集名稱
??????datasetNames:?[abc:xyz],
??????geometry:?polygon,
??????spatialQueryMode:?'INTERSECT'
})
var?url?=?'http://xxx.xxx.xxxx/ iserver/services/xxxx /rest/maps/xxxx'
????????new?ol.supermap.FeatureService(url).getFeaturesByGeometry(geometryParam,?function?(serviceResult)?{
??????getdata?=?serviceResult
??????var?vectorSource?=?new?ol.source.Vector({
????????features:?(new?ol.format.GeoJSON()).readFeatures(serviceResult.result.features),
????????wrapX:?false
})
????????????var?resultLayer?=?new?ol.layer.Vector({
????????source:?vectorSource
})
????????????resultLayer.setProperties({
????????'layerType':?'query_result'
})
????????????map.addLayer(resultLayer)
})
}
9贰军、 想到別的再寫
貳、?Openlayer詳解
等下次再寫蟹肘，困了词疼。
