OpenLayers geojson 进行展示矢量标签展示

效果预览：

在线沙盒地址：https://codesandbox.io/s/olditucontrals-dnvcl

GeoJSON：

GeoJSON是一种对各种地理数据结构进行编码的格式，支持下面几何类型：点、线、面、多点、多线、多面和几何集合。（自己百度）

推荐工具地址：http://geojson.io 在线矢量图，可以查看个格式

GeoJSON特征集合：
let geojsonObject={"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "Point","coordinates": [102.0, 0.5]},"properties": {"prop0": "value0"}}, {"type": "Feature","geometry": {"type": "LineString","coordinates": [[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]]},"properties": {"prop0": "value0","prop1": 0.0}}, {"type": "Feature","geometry": {"type": "Polygon","coordinates": [[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]]},"properties": {"prop0": "value0","prop1": {"this": "that"}}}]
}

样式控制

import {Fill, Stroke, Circle, Style} from 'ol/style';let  styleGeoJson =new Style({stroke: new Stroke({width: 5,color: 'red'}),fill: new Fill({color: '#f5f5f5'}),text: new Text({text:'ceshi',font: '26',fill: new Fill({color: '#f5f5f5'}),})});

fill：填充样式

image：图片样式

text：文字样式

样式与数据geojson组合

var vectorPolygons = new VectorLayer({source:  new VectorSource({features: (new GeoJSON()).readFeatures(geojsonObject)}),style: styleGeoJson
});map.addLayers(vectorPolygons)

OpenLayers geojson 进行展示矢量标签展示相关推荐

BBS（仿博客园系统）项目03（主页搭建、个人站点搭建（侧边栏分类展示、标签展示、日期归档）、文章详情页相关功能实现）...
摘要: 主页面的搭建(导航条下面的区域) 个人站点侧边栏分类展示侧边栏标签展示侧边栏日期归档文章详情页文章内容文章点赞点踩文章评论一.主页面home.html的搭建(进一步完善) ho ...
html 使用iframe标签展示pdf
iframe标签展示pdf与window.open(url, "_self"), window.open(url, "_blank");类似,不过 window ...
前端img标签展示tiff格式图片
前端img标签展示tiff格式图片下面展示一些内联代码片. *html<el-form-item label="参考图片"><img id="img ...
Echarts 柱状图横向展示和竖向展示
第021个点击查看专栏目录本示例是显示柱状图,分别是横向展示和纵向展示.关键是X轴和Y轴的参数互换. 文章目录横向示例效果横向示例源代码(共81行) 纵向示例效果纵向示例源代码(共81行) ...
电商3D展示360全景展示可以突出产品优势
在互联网高速发展的大环境下,电商早已融入到人们生活和工作中,电商行业竞争激烈,为在营销方式上找到新的收益增长,很多企业纷纷选择电商3D展示360全景展示商品,让顾客可以全方位观看和了解商品,商迪3D商 ...
在线vr模型展示-3D可视化展示解决方案
在全球疫情的影响下凸显了三维展示的重要性,三维线上展示给企业产品宣传给来了不少便利,诸多企业利用3d线上交互展示把产品立体全面的展现给客户,商迪3D运用数字化技术和线上Web3D展示技术,将企业产品实 ...
基于Qt实现的股票分析预测软件，实现外排序功能，创建索引，加快数据获取，根据股票的年月和代码进行k线图展示，热力图展示，相关系数计算，最后价格预测和股票价格曲线展示。
资源下载地址 https://download.csdn.net/download/qq_40335674/87857061 基于Qt实现的股票分析预测软件,实现外排序功能,程序加载数据内存限制不超过 ...
公司企业展示门户店铺展示宣传微信小程序前端源码
wx供重浩:创享日记对话框发送:wx门户获取完整源码微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及& ...
simditor存储数据到前台展示去掉标签
怎么处理都是在前台带标签的,后来在数据库中看数据是这样的: <p>服务</p> 展示到页面也时把这个字段传过去的值变成了字符串,这个可以我最后就是直接在后台将这个字段的内容进行 ...
EXCEL——图表数据标签——展示两组比较的绝对值和变化率
有以下业务场景数据,为不同模型下某个线上活动的千人响应率. 企业对照组测试组 A 1.13 1.73 B 0.25 0.23 C 0.56 2.23 D 0.30 0.86 E 0.42 1.17 ...

OpenLayers geojson 进行展示矢量标签展示

效果预览：

GeoJSON：

样式控制

样式与数据geojson组合

OpenLayers geojson 进行展示矢量标签展示相关推荐

最新文章

热门文章