使用vue-baidu-map解析geojson
时间:2020-01-09
本文章向大家介绍使用vue-baidu-map解析geojson,主要包括使用vue-baidu-map解析geojson使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
这是后台给我的gejson:
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[[31.148260581906463,121.67195994909487],[31.086599467631498,121.76969558858048]],[[31.19918663281803,121.60168550904932],[31.270543099071627,121.73454489397504]],[[31.119065864225043,121.58791448558134],[31.19918663281803,121.60168550904932]],[[31.19918663281803,121.60168550904932],[31.148260581906463,121.67195994909487]],[[31.086599467631498,121.76969558858048],[31.270543099071627,121.73454489397504]],[[31.119065864225043,121.58791448558134],[31.086599467631498,121.76969558858048]],[[31.086599467631498,121.76969558858048],[31.04759406186183,121.59196584343134]],[[31.270543099071627,121.73454489397504],[31.148260581906463,121.67195994909487]],[[31.04759406186183,121.59196584343134],[31.119065864225043,121.58791448558134]],[[31.148260581906463,121.67195994909487],[31.119065864225043,121.58791448558134]]]}},{"type":"Feature","properties":{},"geometry":{"type":"MultiPoint","coordinates":[[31.19918663281803,121.60168550904932],[31.270543099071627,121.73454489397504],[31.148260581906463,121.67195994909487],[31.119065864225043,121.58791448558134],[31.086599467631498,121.76969558858048],[31.04759406186183,121.59196584343134]]}}]}
html代码:
<baidu-map class="allMap" v-if="lookMap" :center="map.center" :zoom="map.zoom" :scroll-wheel-zoom="true"> <bm-marker v-for="(item, index) in pointList" :key="index" :position="{lng: item[1], lat: item[0]}"> </bm-marker> <bm-polyline v-for="(item, index) in lineList" :key="index + '-' + index" :path="item" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2"></bm-polyline> </baidu-map>
这是对js的处理
this.lineList = [] this.pointList = [] let jsonArr = [] try { jsonArr = JSON.parse(row.scPhotoJson).features this.lookMap = true for (let i = 0; i < jsonArr.length; i++) { const type = jsonArr[i].geometry.type switch (type) { case 'LineString': let arr = [] for (let j = 0; j < jsonArr[i].geometry.coordinates.length; j++) { const item = jsonArr[i].geometry.coordinates[j] let obj1 = { lng: item[0][1], lat: item[0][0] } let obj2 = { lng: item[1][1], lat: item[1][0] } let obj3 = [obj1, obj2] arr.push(obj3) } this.lineList = arr break case 'MultiPoint': this.pointList = jsonArr[i].geometry.coordinates break } } this.map.center = { lng: this.pointList[0][1], lat: this.pointList[0][0] } } catch (e) { jsonArr = [] this.$message.error('json格式有误!') }
其中仅仅只是做了marker和polyline, 其他的可以按照此法进行解析.
根据后台提供的geojson可以得到如图所示:
原文地址:https://www.cnblogs.com/zaijin-yang/p/12172346.html
- 修改 Windows Host 文件工具
- win7下恢复“经典任务栏”/“快速启动栏”,关闭“窗口自动最大化”
- WCF和ASP.NET Web API 接口执行时间监控
- 额的神啊:AS3中Button被disable了,也会触发Click事件!
- [原创]CI持续集成系统环境---部署gerrit环境完整记录
- CentOS设置Mono环境变量
- 分布式监控系统Zabbix-3.0.3-完整安装记录(2)-添加mysql监控
- 从APM角度上看:NoSQL和关系数据库并无不同
- 事故记录-过多进程致使CPU卡死
- Flash/Flex学习笔记(54):迷你滚动条ScrollBar
- linux下正向代理/反向代理/透明代理使用说明
- 万达网科年底集体裁员?公司回应仅是业务调整
- 两个四字母域名均以五位数被交易
- Flash/Flex学习笔记(15):FMS 3.5之远程共享对象(Remote Shared Object)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Redis数据结构 String类型】String类型生产中的应用 缓存、计数器、限速器的实现
- Redis数据结构 List 类型】List 类型生产中的应用 消息队列、排行榜、朋友圈、监控程序的实现
- Crawlab准备之python+scrapy环境搭建
- 一致性协议之 ZAB
- Elasticsearch Analyzer原理分析并实现中文分词
- php laravel5.5使用rabbitmq消息队列
- 还不知道怎么运行Python代码,快来撸代码
- Linux常用命令速查表
- 机器学习中必须要会用的模块
- 【MathorCup】2020年 A题 无车承运人平台线路定价问题,特征间的相关性分析
- 决策树预测成本价 2020年 MathorCup数学建模 A题 无车承运人平台线路定价问题
- 2020年 MathorCup数学建模 A题 无车承运人平台线路定价问题,定价评价
- RabbitMQ 消费端限流、TTL、死信队列
- 全栈必备 Redis基础
- JSP的异常处理