Openlayers 添加 WKT WKB GeoJson 格式点线面数据
2024-05-15 23:03:34
Openlayers 添加 WKT WKB GeoJson 格式点线面数据
- OpenLayers 教程
- Openlayers 添加 WKT WKB GeoJson 格式点线面数据
- 在线示例
OpenLayers 教程
WebGIS 开发中，对于数据量不是很大的场景，可以直接从数据库读取数据，通过创建点线面要素（Feature），然后添加到矢量图层（vectorLayer）中，在地图上展示。添加点线面的方法可以封装一下，方便使用。
WebGIS 数据最好符合标准，这里介绍 WKT WKB GeoJson 三种常见格式数据。
2022年10月23日 已修改示例，增加数据转换工具。
Openlayers 添加 WKT WKB GeoJson 格式点线面数据
<html lang="en"><head><meta charset="utf-8"><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css"><style>/* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */.map {height: 400px;width: 100%;float:left;} </style><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><script src="http://openlayers.vip/examples/resources/ol.js"></script><script src="./tiandituLayers.js"></script><title>OpenLayers example</title></head><body><h2>Feature Layer</h2><!--地图容器，需要指定 id --><div id="map" class="map"></div><script type="text/javascript">var map = new ol.Map({// 地图容器target: 'map',// 地图图层，比如底图、矢量图等layers: [getIMG_CLayer(),getIBO_CLayer(),getCIA_CLayer(),],// 地图视野view: new ol.View({// 设置投影projection: "EPSG:4326",// 定位center: [116, 39],// 缩放zoom: 4,maxZoom: 18,minZoom: 1,})}); var layer = initVectorLayer();addFeatures();// 添加点线面function addFeatures() {var features = [];// 添加 WKT 数据features.push(getFeatureByWKT("POINT(116.17983834030585 39.98298600752048)"));// 添加 geojson 数据var geojson = {"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[116.09129344901807,39.976463050783],[116.12802898368604,39.986934394777144],[116.14845668754346,39.970454902589644],[116.14365016898877,39.952945442140425],[116.11069118461377,39.95037052148613],[116.09129344901807,39.976463050783]]]},"properties":null};features.push(getFeatureByGeoJson(geojson));// 添加 WKB 数据features.push(getFeatureByWKB("0102000020E6100000040000004AB6DE424F095D4024548C542D0144404AB6DE42E10D5D4024548CD46D0444404AB6DE022D115D4024548CD4DBFF43404AB6DE42DB135D4024548CD46D044440"));// 将 features 添加到图层中layer.getSource().addFeatures(features);// 地图定位var extent = layer.getSource().getExtent();map.getView().fit(extent, {duration: 1,//动画的持续时间,callback: null,});}/*** @todo 矢量图层* @returns {VectorLayer}* @constructor*/function initVectorLayer() {//实例化一个矢量图层Vector作为绘制层let source = new ol.source.Vector();//创建一个图层let customVectorLayer = new ol.layer.Vector({source: source,zIndex: 2,//设置样式style: new ol.style.Style({//边框样式stroke: new ol.style.Stroke({color: 'red',width: 5,lineDash: [3, 5]}),//填充样式fill: new ol.style.Fill({color: 'rgba(0, 0, 255, 0.3)',}),// 点的样式image: new ol.style.Circle({// 点半径radius: 9,// 点颜色fill: new ol.style.Fill({color: 'red',})})}),});//将绘制层添加到地图容器中map.addLayer(customVectorLayer);return customVectorLayer;}/*** @todo wkt格式数据转化成图形对象* @param {string} wkt "POINT(112.7197265625,39.18164062499999)" 格式数据* @param {string|Projection} sourceCode 源投影坐标系* @param {string|Projection} targetCode 目标投影坐标系* @returns {Feature}*/function getFeatureByWKT(wkt, sourceCode, targetCode) {try {let view = map.getView();if (!wkt) {return null;}// 数据格式类型let format = new ol.format.WKT();let feature;feature = format.readFeature(wkt, {featureProjection: targetCode || view.getProjection(),dataProjection: sourceCode || view.getProjection(),});return feature;} catch (e) {console.log(e);return null;}}/*** @todo 图形对象转化成GeoJson格式数据(postgis)* @param {string|object} geojson geojson字符串或者对象* @param {string|Projection} sourceCode 源投影坐标系* @param {string|Projection} targetCode 目标投影坐标系* @returns {Feature}*/function getFeatureByGeoJson(geojson, sourceCode, targetCode) {let view = map.getView();if (!geojson) {return null;}let feature;if ((typeof geojson) == 'string') {// 替换 null 字符while (geojson.indexOf('null') != -1) {// geojson = geojsongeojson = geojson.replace("null", "");}}feature = (new ol.format.GeoJSON()).readFeature(geojson, {dataProjection: sourceCode || view.getProjection(), // 设定JSON数据使用的坐标系featureProjection: targetCode || view.getProjection() // 设定当前地图使用的feature的坐标系});return feature;}/*** @todo WKB格式数据转化成图形对象* @param {string} coordinate 0101000020E610000063B48EAA26105D404E7FF623451C4440 格式数据* @param {string|Projection} sourceCode 源投影坐标系* @param {string|Projection} targetCode 目标投影坐标系* @returns {Feature}*/function getFeatureByWKB(coordinate, sourceCode, targetCode) {try {let view = map.getView();if (!coordinate) {return null;}// 数据格式类型let format = new ol.format.WKB();let feature;// 判断收尾，是否为 WKB 格式if (coordinate.indexOf('010') == 0) {// 判断字符结尾let confirmEnding = function (str, target) {// 请把你的代码写在这里var start = str.length - target.length;var arr = str.substr(start, target.length);if (arr == target) {return true;}return false;}if (confirmEnding(coordinate, '40')) {feature = (format).readFeature(coordinate, {dataProjection: sourceCode || view.getProjection(), // 设定JSON数据使用的坐标系featureProjection: targetCode || view.getProjection() // 设定当前地图使用的feature的坐标系});}}return feature;} catch (e) {console.log(e);return null;}}</script></body>
</html>
在线示例
Openlayers 添加 WKT WKB GeoJson 格式点线面数据：Openlayers feature
Openlayers 添加 WKT WKB GeoJson 格式点线面数据相关推荐
- Python之Pandas：利用pandas实现行数据添加，即将字典格式的数据，按照行数据，从头开始循环添加到dataframe中
Python之Pandas:利用pandas实现行数据添加,即将字典格式的数据,按照行数据,从头开始循环添加到dataframe中e中 目录 利用pandas实现行数据添加,即将字典格式的数据,按照行 ...
- Cesium源码解读系列（一）：GeoJsonDataSource如何处理geojson格式的数据
想写这个系列的文章起因,是因为项目上的"图层管理"模块功能进行了更改.里面涉及到了一种GeoJson格式的图层数据. 从接口获取到的数据,当时设计接口的时候就已经定好了数据格式.标 ...
- 用shp制作geoJson格式地图数据(shp convert to geoJson)
本文紧接前文,简单说明利用shp数据制作Echarts支持的geoJson格式的地图数据.本文以北京市通州区各镇的shp数据为例进行说明. 今天是香港回归20周年之际,在这个特殊的日子,祝愿祖国繁荣昌 ...
- 最新中国省市区县geoJSON格式地图数据Echarts地图数据
最新全国省市区县geoJSON格式的地图数据,可直接用于echarts地图展示: https://github.com/lyhmyd1211/GeoMapData_CN 全国地图: china.jso ...
- 实时最新中国省市区县geoJSON格式地图行政边界数据Echarts地图数据（可精确到街道级）
geojson 数据下载地址:https://hxkj.vip/demo/echartsMap/ 可下载的数据包含省级geojson行政边界数据.市级geojson行政边界数据.区/县级geojson ...
- 百度地图渲染wkt格式网格数据
百度地图渲染wkt格式的网格数据 1.渲染百度地图 先引入百度地图的源文件,我们公司要求使用内网部署的百度地图,所以没有下载百度地图的相关依赖,不过api都和官网一致,直接参照官网的方法使用即可. 相 ...
- R语言配对图可视化：pivot_longer函数将宽格式的数据重塑为长格式并进行数据全连接和左连接(left join)、配对图可视化(根据分类变量的值为散点图上的数据点添加颜色）
R语言配对图可视化:pivot_longer函数将宽格式的数据重塑为长格式并进行数据全连接和左连接(left join).配对图可视化(根据分类变量的值为散点图上的数据点添加颜色,Add color ...
- Mars3D(含Cesium)数据及服务篇：shp转geojson格式
shp格式介绍 Shapefile文件是ESRI公司ArcGIS平台的常用格式文件,是工业标准的矢量数据文件. Shapefile将空间特征表中的非拓扑几何对象和属性信息存储在数据集中,特征表中的几何 ...
- 用于ECharts的全国省市区县乡镇街道级的行政区划边界数据(GeoJSON格式)
https://map.vanbyte.com 提供了免费的省市县3级行政边界数据(GeoJSON格式).省市县乡4级联动数据. 至于行政区划边界数据的来源,网络上有各种教程.授人以鱼不如授人以渔,下 ...
最新文章
- 蓝牙PSKEY的调整
- ActiveMQ安装
- 一个蚂蚁前端程序员，曾经的辛酸面试历程
- C#开源资源大汇总(转）
- 一图读懂马云与阿里20年：互联网巨头是如何养成的？
- springboot中使用@Value读取配置文件
- pyqt5 判断lineedit是否为空_是否注意过isEmpty 和 isBlank 区别？
- 一步到位之INNODB
- 苹果cmsv10仿美剧吧自适应好看的免费高端简约模板
- Solidity入门学习
- 动图解析：22张电气元件原理动图
- 海外问卷调查项目分为哪几种？
- win10小娜_这个版本的win10系统不到10G，运行比win7还流畅，低配电脑的福音
- 1.什么是方法 2.方法定义俩变量求和打印 3.改进上面的 （在调用里面改值相加） 4.形参与实参 5.计算长方形周长 定义一个方法并打印出来 6.定义一个方法 计算圆的面积打印出来
- cherry Tree的严重漏洞
- Kafka时间轮学习总结
- 计算机一级试题上网题收发邮件,计算机等级一级MS Office考题：第一套上网题
- 百度知道推出企业问答平台
- 大数据处理的关键技术有哪些？
- 项目管理平台前端改造