百度地图--获取自定义区域JSON数据（下）

基于百度地图的自定义区域绘图–绘制区域

代码暂时存放在百度云盘中（不包含依赖文件）：链接: https://pan.baidu.com/s/1Ps-V262ZdUDFtH2hEfD4lQ 提取码: 3q9z；
这里代码太多了，建议下载后解压代码进行查看。

1. 基于上一篇 百度地图–获取自定义区域JSON数据（上）的准备工作后，开始正式绘图：
   第一步：创建react项目（我的目录结构如图）
                                                                   
2. index.html内容：

3. src下的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './StyleCc/index.css';
import App from './ComCc/App';
import BaiduMap from './ComCc/BaiduMap';//引入我的地图组件
import * as serviceWorker from './JSCc/serviceWorker';

ReactDOM.render(, document.getElementById('root')); //插入到html的id为root的标签中

serviceWorker.unregister();

4. 核心部分BaiduMap.js（代码比较多建议直接复制【即src/Comcc/BaiduMap.js】），故此这里不粘贴大量代码，请你下载我的代码即可（文章开始处有下载链接），永久有效，建议到第五步：见操作步骤

import React, { Component } from 'react';
import $ from 'jquery';
var overlays = [];
const { BMap, BMAP_STATUS_SUCCESS,BMAP_NORMAL_MAP,BMAP_HYBRID_MAP ,BMapLib, BMAP_ANCHOR_TOP_RIGHT} = window ;
var map ;  
/*
**请下载代码，查看src/Comcc/BaiduMap.js即可（文章开始处有下载链接）**
*/
export default BaiduMap;

5. 项目搭建步骤、操作步骤（因为这只是一天的内容，没有做其他详细的逻辑控制，最好按照我的给定步骤操作，遇到问题可以查看代码，基本上代码比较简单，容易上手）
   搭建步骤
   a、创建react项目（npm install -g create-react-app）我这里使用的这个命令（个人感觉这个是创建最快的），详细搭建方式点击参考react搭建；
   b、整理资源（主要是图片资源）
   c、创建类似我的目录结构（方便你直接使用）；
   d、创建完成后启动你的项目（npm start/yarn start）;

   操作步骤
   a、地图上建议随机选择三个以上的点（图嘛，至少三点成图），建议选点不在一条直线上。
   
   b、点击下方的【绘图】（把线变成图）
   
   c、点击【可拖拽】：生成拖拽点，然后你就可以随意拖拽点生成你想要的区域图。
   
   d、你可以把鼠标放在生成选点上，鼠标右键可以删除当前点（建立在可拖拽的情况下）
   
   e、点击【不可拖拽后选点上将不会有序号】；
   f、点击【清除】将清空所有数据，重新绘图；
   g、点击json数据，将在后台打印出，你选择的数据（至于这种JSON的解析JSON.stringify()请参考我的另一篇文章我的JSON问题）；
   
   h、点击测试自定义图标，可以修改原生图标为你自己的图标；
   

---

总结：这个是今天大致写的demo还有待完善，很多逻辑还没有处理，但是按照步骤得到数据，以及演示，具体逻辑大家可以自行完善。
请大家多多指教。谢谢