openlayer xyz加载_webGIS实践：3_1_openlayer展绘点线面注记
生活随笔
收集整理的這篇文章主要介紹了
openlayer xyz加载_webGIS实践：3_1_openlayer展绘点线面注记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上一篇已經講了，怎么加載瓦片地圖。
這篇就看看怎么簡單的渲染矢量點線面數據。
最簡單的，繪制點線面注記。
效果長這樣：
新建一個文件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">//頁面var view = new ol.View({// 設置中心點坐標，因為加載的騰訊瓦片地圖的坐標系是墨卡托投影坐標系（'EPSG:3857'），所以要對經緯度坐標點進行投影，ol.proj.transform既是openlayer自帶的坐標系轉換函數，支持WGS84和墨卡托投影的互換。center: ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'),// 比例尺級數為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});//設置風格，點線面注記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: '測試注記',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}),})})// 新建點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')]]));// 創建矢量資源var source=new ol.source.Vector({features: [point,line,polygon]});// 創建矢量圖層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>一般來說，地圖要素的注記與幾何屬性是不分離的，所以注記需要提取要素中的屬性字段。
本文只是簡單示例渲染矢量要素，注記的動態展示，會在后面渲染查詢geojson要素的時候介紹。
總結
以上是生活随笔為你收集整理的openlayer xyz加载_webGIS实践：3_1_openlayer展绘点线面注记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 外星人bios按f2调风扇_刷完BIOS
- 下一篇： 怎么加载csv_python爬虫入门实战