壹、?常見問題

備注：

如同現(xiàn)openlayer官網(wǎng)的實(shí)例代碼所以用的是VectorLayer的格式，項(xiàng)目是在該頁面上引用的ol；

項(xiàng)目在全局引用了ol，所以用的ol.layer.Vector這樣的格式；

部分代碼是在word里改的可能有錯誤，粘貼復(fù)制需要檢查。

1、?tilelayer與vectorlayer

tilelayer為瓦片數(shù)據(jù)，獲取到的數(shù)據(jù)是以圖片的形式展示的，所以無法獲取包含的屬性值；

??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ù)的時候可以根據(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的值來改變一些地圖上的東西時，這時候就要監(jiān)聽zoom的變化，實(shí)時獲取當(dāng)前的zoom值：（在moveend，縮放結(jié)束時獲取當(dāng)前地圖的縮放比例）

map.on('moveend',?function?(event)?{

????????var?zoom?=?map.getView().getZoom()

})

4、?獲取當(dāng)前地圖的范圍，并根據(jù)當(dāng)前范圍設(shè)置中心點(diǎn)，定位功能

比如說根據(jù)一個點(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)移動事件

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)拖拽事件

//（拖拽時改變鼠標(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詳解

等下次再寫，困了。