高德开放平台GeoHUB初用（Vue使用高德地图Loca 2.0）

高德开放平台GeoHUB，高德不声不息出的这玩意挺吊的。

以往地图打点、连线、做特定地市的区域地图，都不知道哪里找GeoJSON数据的，现在有这东西就超级方便了。结合高德地图的api，挺好用的了。这里通过Loca.ScatterLayer的来展示下GeoHUB的简单使用。

知识

1、此文涉及Vue对高德地图2.0的封装使用，这里用高德地图Loca 2.0 的呼吸点（也叫散射点、贴地点、水波点）的制作过程来演示
2、GeoHUB生成的geojosn数据文件使用涉及 vue本地模拟服务器请求mock数据
3、viewMode: '3D' ，地图初始化的时候要设置成 3D 模式，否则图层会失去高度信息
4、Loca 2.0 API

实现

components – map – locaPoint.vue

呼吸点的加载代码主要如下，制作geo地图数据具体过程参考下节GeoHUB制作地图geo数据相关介绍

initBreathPoint() {this.breathPoint = new Loca.ScatterLayer({loca: this.loca,zIndex: 113,opacity: 1,visible: true,zooms: [2, 22]})// 这里加载geo地图数据this.breathPoint.setSource(this.geoLevelF)this.breathPoint.setStyle({unit: 'meter',size: [520, 520],borderWidth: 520,borderColor: 'rgba(250,250,250,1)',duration: 500,animate: true,texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_yellow.png',color: 'rgba(200,200,200,1)'})
}

GeoHUB 制作地图geo数据

1、选择绘制点功能，然后就可以在地图上标点。具体位置可以在搜索栏搜索定位。这里随便选了几个地点。

2、如果对数据有定制要求，可以添加自定义的属性字段。例如类型、颜色、分组…

3、点击保存后，返回数据集列表。点击下载，得到一个huadu.geojson的文件。

4、huadu.geojson文件内容如下，标准的geo地图数据格式

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {},"geometry": { "type": "Point", "coordinates": [113.220125, 23.404326] }},{"type": "Feature","properties": {},"geometry": { "type": "Point", "coordinates": [113.203846, 23.377273] }},{"type": "Feature","properties": {},"geometry": { "type": "Point", "coordinates": [113.254308, 23.416872] }},{"type": "Feature","properties": {},"geometry": { "type": "Point", "coordinates": [113.232409, 23.426934] }},{"type": "Feature","properties": {},"geometry": { "type": "Point", "coordinates": [113.161159, 23.400596] }},{"type": "Feature","properties": {},"geometry": { "type": "Point", "coordinates": [113.166207, 23.385075] }},{"type": "Feature","properties": {},"geometry": { "type": "Point", "coordinates": [113.307605, 23.389929] }},{"type": "Feature","properties": {},"geometry": { "type": "Point", "coordinates": [113.235221, 23.496927] }},{"type": "Feature","properties": {},"geometry": { "type": "Point", "coordinates": [113.155997, 23.483681] }}]
}

5、加载geojson数据。参考 vue本地模拟服务器请求mock数据

this.geoLevelF = new Loca.GeoJSONSource({url: publicPath + `/data/huadu.geojson`
})

6、设置呼吸点数据，加载到地图上显示

this.breathPoint.setSource(this.geoLevelF)

7、效果

代码总览

涉及的文件如下（具体参考代码）：

|-- public|-- data|-- huadu.geojson
|-- src|-- components|-- map|-- locaPoint.vue|-- views|-- amapLocaTest    // 实例所在|-- index.vue|-- index.scss|-- index.js

代码

按代码总览的目录去代码里找着看就行了。

总结

以上，只是简单的使用了geohub的绘制点功能。还有绘制线、绘制面、自定义属性、上传数据、发布数据服务等功能有兴趣的自行探索了。

代码里面用Vue演示了高德地图Loca 2.0的一些数据可视化效果。除了呼吸点，还有脉冲线、连接线，具体看代码了。

高德开放平台GeoHUB初用（Vue使用高德地图Loca 2.0）相关推荐

高德开放平台发布“GAIA计划”，打造“组件式”解决方案
今日,高德开放平台在北京举办2018战略说明会,正式对外发布了"GAIA计划",宣布将为合作伙伴提供针对包括网约车.海外.货运.游戏等行业"组件式"的垂类解决方 ...
高德开放平台与360儿童手表达成合作，全球数据助力第三方企业
3月29日下午,国内互联网安全企业 360 对外发布了全新儿童春季智能新品.360 儿童手表与国内领先的 LBS 服务提供商高德开放平台达成合作,可通过定位等多项功能,让家长随时掌握孩子的动态,保障儿 ...
高德开放平台定位功能对接
[高德开放平台] 定位对接萌璐琉璃 https://www.jianshu.com/p/312287e25444 目标对接高德开放平台的定位接口依赖 <!-- httpclient 工具类 ...
微信小程序uniapp高德开放平台路线规划1对多导航路线方法记录
在高德开放平台申请key并下载sdk:amap-wx.js放到pages同级目录libs里面 <template><view class="content"> ...
高德天气 php,高德开放平台天气查询API
更多内容,请查看博客原文:高德开放平台天气查询API https://finolo.gy/2020/01/高德开放平台天气查询API/ 高德开放平台下的天气查询接口文档 https://lbs.ama ...
接入高德开放平台实现地址转换为经纬度坐标
高德地图API 1 地址转为经纬度后台人员填写完房源详情地址后,由此地址转为,电子地图中的经纬度.从而方便日后前台在电子地图中的标识显示. 高德地图开放平台:https://lbs.amap.co ...
python高德查询县_Python和高德开放平台——地名地址空间化及采集POI信息
上一篇我们介绍微博开放平台时说道了通过高德开放平台获取地名地址的坐标,今天我们来说一说怎么使用高德开放平台查询相关关键词的地址坐标,或者采集学校.医院.餐厅.公园.企业等POI的信息. 高德开放平台h ...
高德开放平台天气查询API
更多内容,请查看博客原文:高德开放平台天气查询API https://finolo.gy/2020/01/高德开放平台天气查询API/ 高德开放平台下的天气查询接口文档 https://lbs.ama ...
高德开放平台 - 学习/实践
1.应用场景借助高德开放平台进行项目的开发, 完成业务需要, 如地理编码. 2.学习/操作 2.1 介绍暂见: https://lbs.amap.com/dev/index //高德开放平台开 ...
高德开放平台实现区域地图+云图标记
在项目中需要使用类似GIS效果的地图,考虑到高德开放平台关于云图的便利性,便利用官网和网上的例子,进行了初步实现. 1.带3D效果: 2.代码: <!doctype html> <h ...

高德开放平台GeoHUB初用（Vue使用高德地图Loca 2.0）

知识

实现

components – map – locaPoint.vue

GeoHUB 制作地图geo数据

代码总览

代码

总结

高德开放平台GeoHUB初用（Vue使用高德地图Loca 2.0）相关推荐

最新文章

热门文章