├── .editorconfig
├── .gitignore
├── .travis.yml
├── README.md
├── babel.config.js
├── docs
├── .nojekyll
├── README.md
└── index.html
├── lib
├── demo.html
├── vue-mapboxgl-components.common.js
├── vue-mapboxgl-components.common.js.map
├── vue-mapboxgl-components.css
├── vue-mapboxgl-components.umd.js
├── vue-mapboxgl-components.umd.js.map
├── vue-mapboxgl-components.umd.min.js
└── vue-mapboxgl-components.umd.min.js.map
├── package.json
├── public
├── base64.js
├── demo_heatmap.png
├── demo_markers.png
├── favicon.ico
├── geojson
│ └── region
│ │ ├── anhui.json
│ │ ├── aomen.json
│ │ ├── beijing.json
│ │ ├── china.json
│ │ ├── chongqing.json
│ │ ├── fujian.json
│ │ ├── gansu.json
│ │ ├── guangdong.json
│ │ ├── guangxi.json
│ │ ├── guizhou.json
│ │ ├── hainan.json
│ │ ├── hebei.json
│ │ ├── heilongjiang.json
│ │ ├── henan.json
│ │ ├── hubei.json
│ │ ├── hunan.json
│ │ ├── jiangsu.json
│ │ ├── jiangxi.json
│ │ ├── jilin.json
│ │ ├── liaoning.json
│ │ ├── neimenggu.json
│ │ ├── ningxia.json
│ │ ├── qinghai.json
│ │ ├── shan1xi.json
│ │ ├── shan3xi.json
│ │ ├── shandong.json
│ │ ├── shanghai.json
│ │ ├── sichuan.json
│ │ ├── taiwan.json
│ │ ├── tianjin.json
│ │ ├── xianggang.json
│ │ ├── xinjiang.json
│ │ ├── xizang.json
│ │ ├── yunnan.json
│ │ └── zhejiang.json
├── heatmapData.json
├── index.html
└── point_line.gif
├── src
├── App.vue
├── components
│ ├── config
│ │ ├── base.js
│ │ ├── boundary.js
│ │ ├── extrusion.js
│ │ ├── heatmap.js
│ │ ├── line.js
│ │ ├── point.js
│ │ └── region.js
│ ├── eventbus.js
│ ├── index.js
│ ├── map
│ │ ├── control.vue
│ │ ├── mapview.vue
│ │ ├── markers.vue
│ │ └── popup.vue
│ └── util.js
└── main.js
├── vue.config.js
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 | # local env files
6 | .env.local
7 | .env.*.local
8 |
9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language : node_js
2 |
3 | node_js:
4 | - 8.11.2
5 |
6 | branches:
7 | only:
8 | - master
9 |
10 | install:
11 | - yarn
12 |
13 | script:
14 | - yarn build-bundle
15 |
16 | deploy:
17 | provider: npm
18 | email: javpeiwen2010@gmail.com
19 | api_key: "$npm_token"
20 | skip_cleanup: true
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | >基于 [Vue](https://cn.vuejs.org/index.html) 和 [Mapbox-gl](https://www.mapbox.com/mapbox-gl-js/api/) 的地理信息可视化组件库
2 |
3 | 
4 | [](https://www.npmjs.com/package/vue-mapboxgl-components)
5 | 
6 | 
7 | [](https://wupeiwen.github.io/vue-mapboxgl-components)
8 |
9 | ## 快速开始
10 |
11 | ### 安装依赖
12 | ------
13 | 可以通过 npm 添加依赖
14 | ```
15 | npm i vue-mapboxgl-components --save
16 | ```
17 | 或者通过 yarn 添加依赖
18 | ```
19 | yarn add vue-mapboxgl-components
20 | ```
21 |
22 | ### 引入
23 | ------
24 | 在 Vue 项目的 main.js 中写入以下内容：
25 | ```
26 | import Vue from 'vue'
27 |
28 | import 'vue-mapboxgl-components'
29 |
30 | import 'vue-mapboxgl-components/lib/vue-mapboxgl-components.css'
31 | import App from './App.vue'
32 |
33 | Vue.config.productionTip = false
34 |
35 | new Vue({
36 | render: h => h(App)
37 | }).$mount('#app')
38 | ```
39 | 以上代码便完成了 vue-mapboxgl-components 的引入。
40 |
41 | ### 开始使用
42 | ------
43 | 开发环境已经搭建完毕，在需要使用可视化图表的页面通过 html 标签的形式使用，如：
44 | ```
45 |
46 |
47 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
122 |
123 |
134 | ```
135 | 
136 |
137 | ## 案例
138 | ### 使用heatmap实现热力图
139 | 
140 |
141 | ### 使用markers实现自定义点图
142 | 
143 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/app'
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/docs/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wupeiwen/vue-mapboxgl-components/9e387c9e8ff93b4ca43f756f59839af84e089637/docs/.nojekyll
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | >基于 [Vue](https://cn.vuejs.org/index.html) 和 [Mapbox-gl](https://www.mapbox.com/mapbox-gl-js/api/) 的地理信息可视化组件库
2 |
3 | 
4 | [](https://www.npmjs.com/package/vue-mapboxgl-components)
5 | 
6 | 
7 | [](https://wupeiwen.github.io/vue-mapboxgl-components)
8 | ## 快速开始
9 | 组件库的依赖安装、引入，以及开始使用的过程请参考[基础文档](https://github.com/wupeiwen/vue-mapboxgl-components)
10 |
11 | ## 案例
12 | ### 使用heatmap实现热力图
13 | 
14 |
15 | ### 使用markers实现自定义点图
16 | 
17 |
18 | ## 组件说明
19 | >1.配置项/参数标记* 的为必选项，[ ] 为可选项
20 | >
21 | >2.由于HTML中的特性名是大小写不敏感的，浏览器会把所有大写字符解释为小写字符，因此在实际使用本文档中的配置项/参数时，请将驼峰命名(camelCase)转换为短横线分隔命名(kebab-case)
22 |
23 | ### mapview 地图视图 *
24 | 使用``标签实现地图底图以及相应可视化图层的配置，共有`osmConfig`、`mapConfig`、`mapTypes`三个标签属性，以及`@event`图层响应事件。
25 | #### `osmConfig` *
26 | 对象类型，有`osmUrl `osm地址以及`backgroundStyle `地图样式两个属性。
27 | 可参考：
28 | ```
29 |
30 |
31 |
32 | let osmConfig = {
33 | osmUrl: 'http://ip:port',
34 | backgroundStyle: 'custombrightstyle'
35 | }
36 | ```
37 | #### `mapConfig` *
38 | 对象类型，有`center `中心点、`zoom `缩放等级、`pitch `视角俯视的倾斜角度、`bearing `地图的旋转角度、`minZoom `最小缩放等级、`maxZoom `最大缩放等级六个属性。
39 | 可参考：
40 | ```
41 |
42 |
43 |
44 | let mapConfig = {
45 | center: [120.142577, 30.27719],
46 | zoom: 5,
47 | pitch: 0,
48 | bearing: 0,
49 | minZoom: 0,
50 | maxZoom: 22
51 | }
52 | ```
53 | #### `mapTypes` *
54 | 数组类型，有`line`、`point`、`extrusion`、`region`、`heatmap`等可选项，不同类型可以搭配使用。
55 | 可参考：
56 | ```
57 |
58 |
59 |
60 | let mapTypes = ['line','point']
61 | ```
62 | #### `@event` [ ]
63 | 响应事件，有`point/line/extrusionClick`、`point/line/extrusionMouseenter`、`point/line/extrusionMouseleave`等响应事件，返回该`line/point/extrusion`的相应信息。
64 | 可参考：
65 | ```
66 |
67 |
68 | let callback = (data) =>{
69 | console.log(data)
70 | }
71 | ```
72 | ------
73 |
74 | ### control 交互控件 [ ]
75 | 使用``标签实现交互控件的显示与隐藏，共有`navigation`、`fullscreen`、`scale`三个标签属性。
76 | #### `navigation` [ ]
77 | 对象类型，控制导航控件中指南针的显示与隐藏(`showCompass`, true/false)、放大缩小按钮的显示与隐藏(`showZoom`, true/false)、位置(`position`, top/bottom-left/right 上/下-左右)。可参考：
78 | ```
79 |
80 |
81 |
82 |
83 |
84 | ```
85 | #### `fullscreen` [ ]
86 | 对象类型，控制全屏控件的显示/隐藏(`show`, true/false)、位置(`position`, top/bottom-left/right 上/下-左右)。可参考：
87 | ```
88 |
89 |
90 |
91 |
92 |
93 | ```
94 | #### `scale` [ ]
95 | 对象类型，控制标尺控件的显示/隐藏(`show`, true/false)、标尺单位(`unit`, 'imperial' 英里 / 'metric'公制 / 'nautical'海里)、最大宽度(`maxWidth`, 80), 位置(`position`, top/bottom-left/right 上/下-左右)。可参考：
96 | ```
97 |
98 |
99 |
100 |
101 |
102 | ```
103 | ------
104 |
105 | ### popup 弹框组件 [ ]
106 | 使用``标签实现和地理坐标系结合的弹窗，共有`showPopup`、`laglng`、`htmlContent`、`closeButton`、`closeOnClick`五个标签属性。
107 | #### `showPopup` *
108 | 布尔类型，控制弹框的显示与隐藏，默认为`false`。可参考：
109 | ```
110 |
111 |
112 |
113 |
114 |
115 | ```
116 | #### `laglng` *
117 | 数组类型，经纬度坐标用来定位popup。可参考：
118 | ```
119 |
120 |
121 |
122 |
123 |
124 |
125 | let laglng = [121.1, 30.1]
126 | ```
127 | #### `htmlContent` *
128 | 字符串类型，控制弹出框内的DOM内容，默认为`'Hello World!
'`，可通过配置该配置项展现自定义内容的弹出框。
129 | ```
130 |
131 |
132 |
133 |
134 |
135 |
136 | let htmlContent = 'Hello World!
'
137 | ```
138 | #### `closeButton` [ ]
139 | 布尔类型，控制弹框右上角关闭按钮的显示与隐藏，默认为`true`。可参考：
140 | ```
141 |
142 |
143 |
144 |
145 |
146 | ```
147 | #### `closeOnClick` [ ]
148 | 布尔类型，点击地图是否关闭弹窗，默认为`false`。可参考：
149 | ```
150 |
151 |
152 |
153 |
154 |
155 | ```
156 | ------
157 | #### `@event` [ ]
158 | 响应事件，有`popupClose`弹窗关闭事件，返回该事件的相应信息。
159 | 可参考：
160 | ```
161 |
162 |
163 |
164 |
165 |
166 | let callback = (event) =>{
167 | console.log(event)
168 | }
169 | ```
170 | ------
171 |
172 | ### markers 标记组件 [ ]
173 | 使用``标签实现点标记，共有`data`、`showMarker`两个标签属性，以及`markerClick`、`markerMouseenter` 、`markerMouseleave` 三个事件
174 | #### data *
175 | 数组类型，数组的每个元素描述了标记点的`lng`经度、`lat`维度、`height`标记图标的高度、`width`标记图标的宽度以及`base64`标记图标的base64编码。
176 | ```
177 |
178 |
179 |
180 |
181 |
182 |
183 | let imageBase64Code = 'data:image/png;base64,iVBORw0KGgoA...'
184 |
185 | let data = [
186 | { lng: 122, lat: 40, height: 48, width: 48, base64: imageBase64Code },
187 | { lng: 110, lat: 36, height: 48, width: 48, base64: imageBase64Code },
188 | { lng: 120, lat: 30, height: 48, width: 48, base64: imageBase64Code }
189 | ]
190 | ```
191 | #### showMarker *
192 | 布尔类型，控制导航控件的显示与隐藏，默认为`true`。可参考：
193 | ```
194 |
195 |
196 |
197 |
198 |
199 |
200 | let imageBase64Code = 'data:image/png;base64,iVBORw0KGgoA...'
201 |
202 | let data = [
203 | { lng: 122, lat: 40, height: 48, width: 48, base64: imageBase64Code },
204 | { lng: 110, lat: 36, height: 48, width: 48, base64: imageBase64Code },
205 | { lng: 120, lat: 30, height: 48, width: 48, base64: imageBase64Code }
206 | ]
207 | ```
208 | #### @event [ ]
209 | 响应事件，包含`markerClick`鼠标点击事件、`markerMouseenter`鼠标移入事件以及`markerMouseleave`鼠标移除事件，返回该标记点的信息。可参考：
210 | ```
211 |
212 |
213 |
214 |
215 |
216 | let callback = (data) =>{
217 | console.log(data)
218 | }
219 |
220 | { lng: 122, lat: 40, height: 48, width: 48, base64: imageBase64Code }
221 | ```
222 | ------
223 |
224 | ## 可视化图层配置项
225 | ### line 线
226 | #### color
227 | ``类型，线的颜色，默认值`'green'`
228 |
229 | #### width
230 | ``类型，线的宽度，默认值`6`
231 |
232 | #### opacity
233 | ``类型，线的透明度，默认值`0.8`
234 |
235 | #### useCurve
236 | ``类型，使用贝塞尔曲线，默认值`true`
237 |
238 | #### showAnimation
239 | ``类型，使用动态效果，默认值`true`
240 |
241 | #### data
242 | ``类型，线条数据，包含起点和终点经纬度。可参考：
243 | ```
244 |
245 | [
246 |
247 | [{ lng: 122, lat: 40 }, { lng: 120, lat: 30 }],
248 |
249 | [{ lng: 110, lat: 36 }, { lng: 120, lat: 30 }]
250 | ]
251 | ```
252 | ------
253 |
254 | ### point 点
255 | #### useMultiColor
256 | ``类型，使用多种颜色，默认值`false`。为`false`时，使用`point.color`的颜色作为所有点的颜色；为`true`时，使用`point.data[i].color`的颜色作为该点的颜色。
257 |
258 | #### color
259 | ``类型，点的颜色，默认值`'orange'`
260 |
261 | #### showAnimation
262 | ``类型，使用动态效果，默认值`true`
263 |
264 | #### opacity
265 | ``类型，点的透明度，默认值`0.8`
266 |
267 | #### radius
268 | ``类型，点的半径，如果设置了最大值半径、最小值半径、半径均未设置，则默认值为`5`
269 |
270 | #### min/maxValue, min/maxRadius
271 | ``类型，最大值/半径和最小值/半径，如果设置了最大值/半径和最小值/半径，按照映射关系返回相应半径
272 |
273 | #### textColor
274 |
275 | ``类型，点描述文字的颜色，默认值`'red'`
276 |
277 | #### textOffset
278 |
279 | ``类型，点描述文字的偏移量，默认值`0`
280 |
281 | #### data
282 | ``类型，点数据。可参考：
283 | ```
284 |
285 | [
286 |
287 | { lng: 122, lat: 37, name: '地点1', value: 10, color:'orange' },
288 | { lng: 110, lat: 36, name: '地点2', value: 20, color:'red' },
289 | { lng: 120, lat: 30, name: '地点3', value: 30, color:'green' }
290 | ]
291 | ```
292 | ------
293 |
294 | ### extrusion 挤压
295 | #### shape
296 | ``类型，横截面形状，默认值`'column'`正方形
297 |
298 | #### offset
299 | ``类型，偏移量，用来控制正方形的长度，默认值`0.002`经/维度
300 |
301 | #### height
302 | ``类型，柱子的高度，默认值`1000`
303 |
304 | #### maxHeight/minHeight
305 | ``类型，最大/最小高度默认值`100/10`
306 |
307 | #### maxValue/minValue
308 | ``类型，最大/最小高度默认值`3000/10`
309 |
310 | #### opacity
311 | ``类型，柱子透明度，默认值`0.8`
312 |
313 | #### color
314 | ``类型，柱子的颜色，默认值`'orange'`
315 |
316 | #### colorList
317 | ``类型，柱子的颜色组，默认值`['white', 'red']`
318 |
319 | #### data
320 | ``类型，柱子的数据。可参考：
321 | ```
322 | [{
323 | lng: 120.058617889881,
324 | lat: 30.3123084318025,
325 | value: 2.1
326 | }, {
327 | lng: 120.077143907547,
328 | lat: 30.31249598846499,
329 | value: 2.2
330 | }, {
331 | lng: 120.07800221443175,
332 | lat: 30.30878183662179,
333 | value: 2.3
334 | }]
335 | ```
336 | ------
337 |
338 | ### region 区域
339 | #### geojson
340 | `