百度地图js版api绘制几何图形覆盖物并保存数据库

百度地图js版api绘制几何图形覆盖物并保存数据库

你好!相信你看到这边文章的时候,我的方案,已经满足了你的需求:
1,在html5上调用web版百度地图api,绘制多边形,我项目的是绘制小区。
2,将绘制的小区图形保存到数据库中,在指定的jsp等查询页面上展示。
不做,增删查,web开发的基本需求。你来对地方了。。

下载链接

包含参考文档代码,核心代码如下方图片,自己手写也没问题,懒得动手,就给个写代码的积分吧,毕竟我也是码农一个
https://download.csdn.net/download/xyzz609/10798827

思路分析

如果我想保存数据,我首先考虑的是如何展示,因为这样我才知道我要保存什么样的数据:

  1. 批量展示多个多边形 ,是的,从数据库拿出来的,最少百八十个,你需要数组;
  2. 分析数组该如何展示 ,知道需要的是啥才可以;
  3. 写出来查询,保存就不远了

参考博客

大神已经把各种方法写好了,我就不废话了
百度地图js版api绘制几何图形覆盖物并保存数据库_第1张图片

思想误区

  1. 将所有点保存到数据库
    a.按横表存储,百八十个点的图形也有,不现实;
    b.按横表存储,可行,但是太麻烦,得考虑点的存储顺序,太麻烦,增删查代码太多
  2. 将几何图形保存到数据库
    a.我曾想过将下方的tuList,作为一个字段pqPoinPath保存到oracle数据库表中,结果查询展示失败了,ajax获取的pqPoinPath数据类型为Sting,不是百度地图的数据。
var tulist = [
		  new BMap.Point(113.93763,22.53061),
		  new BMap.Point(113.94108,22.531028),
		  new BMap.Point(113.939894,22.528073),
		  new BMap.Point(113.947044,22.528357),
		  new BMap.Point(113.944529,22.531428),
		  new BMap.Point(113.948769,22.536619),
		  new BMap.Point(113.940289,22.535751),
		  new BMap.Point(113.942373,22.532363),
		  new BMap.Point(113.938529,22.533982),
		  new BMap.Point(113.938924,22.532229)
	  ];
	  var polygon = new BMap.Polygon(tulist, styleOptions);  //创建多边形
	  map.addOverlay(polygon);   //增加多边形

方案正解

oracle数据库表中字段pqPoinPath存储格式,类型VARCHAR2(500);

117.10597,36.693367#117.110497,36.686538#117.118043,36.6903#117.11639,36.694814#117.111359,36.694872

哈哈,
看到这是不是已经想到解题方案了。没错js.split("#");

ajax数据库获取

百度地图js版api绘制几何图形覆盖物并保存数据库_第2张图片

ajax数据库获取

styleOptions5 为几何图形的样式 参考文档里面有
百度地图js版api绘制几何图形覆盖物并保存数据库_第3张图片

最近积分下载东西都用完了,赚个积分

包含参考文档代码,核心代码如下方图片,自己手写也没问题,懒得动手,就给个写代码的积分吧,毕竟我也是码农一个
https://download.csdn.net/download/xyzz609/10798827

百度地图js版api绘制几何图形覆盖物并保存数据库_第4张图片

你可能感兴趣的:(百度地图)