Source code like start

Open source sharing is not easy, but also please do not hesitate to give advice, more ideas. Like +, start +

GitHub source address

The document address

Writing in the front

  • Vue-baidu-map is a good vUE Baidu map application development component. However, there is no good solution for the mapping tool component, so I thought I could combine BMapLib.DrawingManager

Develop a VUE Of Baidu map mouse drawing components.

  • DrawingManager is very smooth when drawing, but it is difficult to manage these drawing points in a data-driven way in VUE. So can we use the DrawingManager drawing and vue-Bidu-map drawing overlay to manage these coordinate points with MVVM features? With this in mind began the development of the second version, the Cube-map-Draw component.

  • Components to the document, in fact, components have written almost, but has been missing a document, the lack of a perfect, continuous update maintenance of the document. I’ve always wanted to do a project where I could write components, maintain documentation and demonstrate code in an MD file.

  • There may be many shortcomings in time or personal consideration, but I hope to improve it as a plan. To patch and iterate. Hope each big guy puts forward the suggestion much more perfect perfect among them inadequacy.

  • Thanks to VUE, VUE-Baidu-Map, Baidu Map

Use plan

  • Vue + Baidu map + DrawingManager[Example] + VUe-Bidu-map

Project code is component code + document presentation code

Component installation

npm install cube-map-draw -S

import Vue from 'vue'
import CubeDrawMap from 'cube-map-draw'

Vue.use(CubeDrawMap)
Copy the code

Components use

<template>
    <div class="cube-map-draw-warp">
      <cube-map-draw
      :config="config"
      :markers="markers"
      :polylines="polylines"
      :polygons="polygons"
     />
    </div>
</template>

<script>
  export default {
    data() {
      return {
       config: {
        mapCenter: 'Shenzhen'.akey: 'ggeG9Ii3jcwnXUvVXNQ6vjRYUXV5Ckhz'.// Baidu map key Mandatory
       },
       markers: [].polylines: [].polygons: [],}; }};</script>
Copy the code

DrawingManager combined with VUe-Bidu-map to achieve mouse drawing ideas

1 Modify DrawingManager plug-in (SRC /utils/bMapLib) to export modules

2 initialization is completed, the map load using a modified bMapLib plug-in (SRC/packages/CubeMapDraw/SRC/index).

3. Coordinate data processing,

We said that from the beginning. DrawingManager draws coverings that are difficult to manage in a data-driven manner. So it’s a ‘coincidence’ that after the drawing is done we just need to get the coordinate data of the drawing overlay (note, note, note). The overlay drawn by DrawingManager is immediately removed. The collected coordinates of the coverings are given to the VUE-Bidu-map coverings component for management. More detail part can go to see the source code (SRC/packages/CubeMapDraw/SRC/index). This is the implementation idea of Cube-map-draw.

Configure MD document parsing in the project

Add the following configuration to vue.config.js. Check the key codes in scripts/md-loader.

Config.module. rule('md').test(/\.md/).use('vue-loader').loader('vue-loader').options({ compilerOptions: { preserveWhitespace: false } }) .end() .use('markdown-loader') .loader( require('path').resolve(__dirname, './scripts/md-loader/index.js') ) .end()Copy the code

Add the following description to the basic.md file. Md-loader generates the corresponding HTML for :::demo.

If the map cannot be displayed, try setting the height of the parent element. Akey is mandatory. Developers please apply for the corresponding Baidu map secret key. :::demo ```html<template>
    <div class="cube-map-draw-warp">
      <cube-map-draw
      :config="config"
      :markers="markers"
      :polylines="polylines"
      :polygons="polygons"
    />
    </div>
</template>

<script>
  export default {
    data() {
      return {
       config: {
        mapCenter: 'Shenzhen'.akey: 'ggeG9Ii3jcwnXUvVXNQ6vjRYUXV5Ckhz'.// Baidu map key Mandatory
        // initSetViewport: true, // Map initialization completes the best view
       },
       markers: [].polylines: [].polygons: [],}; }};</script>
Copy the code

: : :

Generate HTML effects

Write in the last

Time writing is rough, writing documents is too hard. Look forward to the same needs of the comrade can be a lot of suggestions and suggestions, demand what, late to be continued…. “Like”, “Start”

Source code like start

Open source sharing is not easy, but also please do not hesitate to give advice, more ideas. Like +, start +

GitHub source address

The document address