openlayer xyz加载_webGIS实践：3_1_openlayer展绘点线面注记
生活随笔
收集整理的這篇文章主要介紹了
openlayer xyz加载_webGIS实践：3_1_openlayer展绘点线面注记
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
上一篇已經(jīng)講了，怎么加載瓦片地圖。
這篇就看看怎么簡(jiǎn)單的渲染矢量點(diǎn)線面數(shù)據(jù)。
最簡(jiǎn)單的，繪制點(diǎn)線面注記。
效果長(zhǎng)這樣：
新建一個(gè)文件FeatureOL.HTML。
代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>openlayer渲染矢量要素</title><link rel="stylesheet" href="ol/ol.css"><script src="ol/ol.js"></script><script src="jquery-1.7.2.js"></script><style type="text/css">#map,html,body {height: 100%;width: 100%;}.content {width: 100px;}</style> </head><body> <div id="map"></div> </body> <script type="text/javascript">//頁(yè)面var view = new ol.View({// 設(shè)置中心點(diǎn)坐標(biāo)，因?yàn)榧虞d的騰訊瓦片地圖的坐標(biāo)系是墨卡托投影坐標(biāo)系（'EPSG:3857'），所以要對(duì)經(jīng)緯度坐標(biāo)點(diǎn)進(jìn)行投影，ol.proj.transform既是openlayer自帶的坐標(biāo)系轉(zhuǎn)換函數(shù)，支持WGS84和墨卡托投影的互換。center: ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'),// 比例尺級(jí)數(shù)為9zoom: 9});var layers = [// 加載騰訊瓦片底圖new ol.layer.Tile({source: new ol.source.XYZ({url: "http://rt{0-3}.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0"})}) ];//地圖var map = new ol.Map({target: 'map',//指向divlayers: layers,view: view});//設(shè)置風(fēng)格，點(diǎn)線面注記var style=new ol.style.Style({image: new ol.style.Circle({fill: new ol.style.Fill({color: 'rgba(192, 192, 192, 0.5)'}),stroke: new ol.style.Stroke({color: 'rgba(192, 0, 0, 1)',width: 2}),radius: 10,}),stroke: new ol.style.Stroke({color: 'rgba(192, 0, 0, 1)',width: 2}),fill: new ol.style.Fill({color: 'rgba(192, 192, 192, 0.5)'}),text: new ol.style.Text({font: '20px Microsoft YaHei',text: '測(cè)試注記',offsetX: 20,offsetY: 20,fill: new ol.style.Fill({color: 'rgba(192, 0, 0, 1)'}),stroke: new ol.style.Stroke({color: 'rgba(255, 255, 255, 1)', width: 1}),})})// 新建點(diǎn)var point = new ol.Feature(new ol.geom.Point(ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857')));// 新建線var line = new ol.Feature(new ol.geom.LineString([ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'), ol.proj.transform([117.400146,41.250184], 'EPSG:4326', 'EPSG:3857')]));// 新建面var polygon = new ol.Feature(new ol.geom.Polygon([[ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'), ol.proj.transform([116.400146,41.250184], 'EPSG:4326', 'EPSG:3857'),ol.proj.transform([117.400146,41.250184], 'EPSG:4326', 'EPSG:3857'),ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857')]]));// 創(chuàng)建矢量資源var source=new ol.source.Vector({features: [point,line,polygon]});// 創(chuàng)建矢量圖層var layer=new ol.layer.Vector({source:source,style:style});// 將圖層添加至地圖map.addLayer(layer);</script> <style type="text/css">* {margin: 0px;padding: 0px;}#map {width: 100%;height: 100%;} </style> </html>一般來(lái)說(shuō)，地圖要素的注記與幾何屬性是不分離的，所以注記需要提取要素中的屬性字段。
本文只是簡(jiǎn)單示例渲染矢量要素，注記的動(dòng)態(tài)展示，會(huì)在后面渲染查詢geojson要素的時(shí)候介紹。
總結(jié)
以上是生活随笔為你收集整理的openlayer xyz加载_webGIS实践：3_1_openlayer展绘点线面注记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 外星人bios按f2调风扇_刷完BIOS
- 下一篇： 怎么加载csv_python爬虫入门实战