公司网站建设与维护方案,北京外包公司排行,neotv,自己做网站卖水果上一篇已经讲了#xff0c;怎么加载瓦片地图。这篇就看看怎么简单的渲染矢量点线面数据。最简单的#xff0c;绘制点线面注记。效果长这样#xff1a;新建一个文件FeatureOL.HTML。代码如下#xff1a;!DOCTYPE html
html langen
head…上一篇已经讲了怎么加载瓦片地图。这篇就看看怎么简单的渲染矢量点线面数据。最简单的绘制点线面注记。效果长这样新建一个文件FeatureOL.HTML。代码如下!DOCTYPE html
html langen
headmeta charsetUTF-8titleopenlayer渲染矢量要素/titlelink relstylesheet hrefol/ol.cssscript srcol/ol.js/scriptscript srcjquery-1.7.2.js/scriptstyle typetext/css#map,html,body {height: 100%;width: 100%;}.content {width: 100px;}/style
/headbody
div idmap/div
/body
script typetext/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}typevectorstyle0})}) ];//地图var map new ol.Map({target: map,//指向divlayers: layers,view: view});//设置风格点线面注记var stylenew 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 sourcenew ol.source.Vector({features: [point,line,polygon]});// 创建矢量图层var layernew ol.layer.Vector({source:source,style:style});// 将图层添加至地图map.addLayer(layer);/script
style typetext/css* {margin: 0px;padding: 0px;}#map {width: 100%;height: 100%;}
/style
/html一般来说地图要素的注记与几何属性是不分离的所以注记需要提取要素中的属性字段。本文只是简单示例渲染矢量要素注记的动态展示会在后面渲染查询geojson要素的时候介绍。
