如果我們有一些矢量數(shù)據(jù)，如何利用OPENLAYERS將這些數(shù)據(jù)在網(wǎng)絡(luò)上進(jìn)行發(fā)布呢？我向大家介紹一下我使用過的兩種方法：
1.????? 將數(shù)據(jù)轉(zhuǎn)換成GEOJSON、KML等網(wǎng)絡(luò)矢量格式，然后用OPENLAYERS在瀏覽器中進(jìn)行展示。
2.???? 用GISERVER發(fā)布成OGC服務(wù)，然后用OPENLAYERS在瀏覽器中進(jìn)行展示。詳見：http://www.itdecent.cn/p/66a6ba063aab
下面我首先詳細(xì)講解第一種方式的具體做法，在后續(xù)我們將介紹第二種方式的具體做法。由于國內(nèi)數(shù)據(jù)偏移及保密問題，我的測試使用了下載的澳大利亞行政區(qū)域的數(shù)據(jù)，這樣可以測試位置疊加是否準(zhǔn)確。
1數(shù)據(jù)格式轉(zhuǎn)換
由于數(shù)據(jù)處理軟件的通用格式一般是MAPINFO(TAB)、ARCGIS(SHP),我們拿到的地圖數(shù)據(jù)不會是我們需要的網(wǎng)絡(luò)矢量格式（GEOJSON、KML、GML等），因此我們需要進(jìn)行格式轉(zhuǎn)換。由于我的獲得的數(shù)據(jù)是SHP格式，因此我需要將其轉(zhuǎn)換為網(wǎng)絡(luò)的矢量格式，我們這里是GEOJSON。
注意：由于原始數(shù)據(jù)的坐標(biāo)系是很奇怪的國外的坐標(biāo)系，我將其統(tǒng)一轉(zhuǎn)換為網(wǎng)絡(luò)上比較通用的谷歌墨卡托坐標(biāo)系。
數(shù)據(jù)轉(zhuǎn)換完成后，我們利用OPENLAYERS將轉(zhuǎn)換后的地圖數(shù)據(jù)進(jìn)行展示，代碼如下：
????? "stylesheet"href="https://openlayers.org/en/v4.6.4/css/ol.css"type="text/css">
old environments like Internet Explorer and Android 4.x -->
???"https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
???"https://openlayers.org/en/v4.6.4/build/ol.js">
???"map"class="map">
?????varimage = newol.style.Circle({
??????? radius: 5,
??????? fill:null,
??????? stroke:new ol.style.Stroke({color: 'red', width: 1})
?????});
?????varstyles = {
??? ????????'MultiPolygon': new ol.style.Style({
??? ????????????stroke:new ol.style.Stroke({
??? ??????????????color:'green',
??? ??????????????width: 1
??? ????????????}),
??? ????????????fill:new ol.style.Fill({
??? ??????????????color:'red'
??? ????????????})
??? ??????????})
?????};
?????varstyleFunction = function(feature) {
??????? returnstyles[feature.getGeometry().getType()];
?????};
?????varGeoJsonLayer = newol.layer.Vector({
????????? title:'add Layer',
????????? source:new ol.source.Vector({
????????????? projection:'EPSG:3857',
????????????? url:'./mapout.geojson',
????????????? format:new ol.format.GeoJSON()
????????? }),
????????? style: styleFunction
?????});
?????varmap = newol.Map({
??????? layers: [
????????? new ol.layer.Tile({
??????????? source:new ol.source.OSM()
????????? }),
????????? GeoJsonLayer
??????? ],
??????? target:'map',
??????? controls: ol.control.defaults({
????????? attributionOptions: {
??????????? collapsible:false
????????? }
??????? }),
??????? view:new ol.View({
????????? center: [0, 0],
????????? zoom: 2
??????? })
?????});
如果代碼部分
效果如下：
程序中為了體現(xiàn)效果，我疊加了OSM(OPENSTREETMAP)的在線地圖。這樣如果我們將這個網(wǎng)頁在自己建設(shè)的網(wǎng)站上進(jìn)行發(fā)布就會非常方便的將我們的矢量數(shù)據(jù)分享給其它人查看。當(dāng)然要完成這個目標(biāo)我們還需要做一些其它的工作和配置。我將在今后的文章里逐個描述。
文中涉及代碼及數(shù)據(jù)下載：https://pan.baidu.com/s/1zJ_zssMPamjoJaezjY3Pnw
文中格式轉(zhuǎn)換器的下載：http://www.itdecent.cn/p/70fbc925b7fc
如有疑問及需求請聯(lián)系：QQ 315022850
WEBGIS前端自動生成工具，無需任何編程經(jīng)驗，也無需任何編程工作，只需要進(jìn)行簡單的配置，就可以開發(fā)出自己的WEGGIS程序：https://blog.csdn.net/qq_35582643/article/details/81868972
如您希望搭建自己的GIS數(shù)據(jù)服務(wù)器來發(fā)布共享GIS數(shù)據(jù)，然后使用OPENLAYERS展示，請參考：
