【云图】自有数据的多边形检索（云检索）-白红宇

【云图】自有数据的多边形检索（云检索）

阅读量：6038 次

发布时间：2019-06-20

本文共 3827 字，大约阅读时间需要 12 分钟。

摘要：记录每天的生活轨迹，分享美食心得，哪里有免费停车，制作班级通讯录等等，都可以用到云图。无论你是开发者，还是app用户，都可以用云图制作一张属于你的专属地图。

---------------------------------------------------------------------------------------------------------

一、通过坐标拾取工具得到经纬度：

（当然，如果你是开发者，你可以使用定位SDK，获取自己的经纬度，详见：http://api.amap.com/location/index ）

二、建立自己的数据表

（数据保存为CSV格式哟）

tag,name,lng,lat,tel,content免费停车场,免费停车场001,116.430359,39.958175,010-52294832,停过5次没贴条免费停车场,免费停车场002,116.279297,40.00132,010-52294832,停过1次没贴条免费停车场,免费停车场003,116.202393,39.825413,010-52294832,停过2次没贴条免费停车场,免费停车场004,116.564941,39.835959,010-52294832,停过7次没贴条免费停车场,免费停车场005,116.437225,39.806426,010-52294832,停过20次没贴条通讯录,酸奶小妹,116.441345,39.961333,18393727348,喝酸奶补钙通讯录,吴蔚,116.374054,39.957122,15000038375,蹦跶的幽默感通讯录,王倩,116.233978,39.943436,1348377294,房姐白富美通讯录,张小颖,116.353455,39.929748,1869393933,精明俏主妇美食记录,望京总店马兰拉面,116.183167,40.022356,010-39382872,嘴巴起泡都要吃！西安辣椒爽到翻！美食记录,绿茶,116.411133,39.992904,010-39382872,就是便宜啊，麻婆豆腐才8元。港丽你敢这么卖麽？美食记录,西贝莜面村,116.507263,39.855992,010-39382872,猜拳赢了115元！老板叫了11个黄馍馍，11个莜面！美食记录,酷圣石,116.133728,39.880235,010-39382872,K总最爱的酷石头，全北京最好吃冰淇淋。其实量太大，吃不完就化掉了。美食记录,吉野家,116.336975,39.886558,010-39382872,有学生卡啊，就去买啊。美食记录,鹿港小镇,116.383667,39.916056,010-39382872,海南鸡饭比三亚的还好吃！爱，赞！美食记录,星巴克,116.523743,40.008683,010-39382872,如果不是傻2的买了2张98的会员卡，你以为我会去消费麽！旅行记录,天安门,116.483917,39.91395,010-283764648,我爱北京天安门旅行记录,红螺寺,116.419373,39.941331,010-283764648,爬山，没看到寺庙旅行记录,大觉寺,116.411133,39.889719,010-283764648,玉兰花美，银杏树大旅行记录,鸟巢,116.27655,39.838068,010-283764648,住的地方，空气好点旅行记录,大兴西瓜村,116.433105,39.785323,010-283764648,西瓜贵死人

将数据导入云图：

当然，如果你没那么多记录，一次不能导入那么多数据的话。你可以每天记录一点点哟！

点击右上角的按钮，可以手工输入一个点哦！

三、建立索引（这步灰常重要！很多开发者因为没建立索引，而导致无法检索到自己数据哦）

文本索引

塞选排序索引

四、好啦，要开始写代码啦。

不用担心，我都写好在这里了，你直接copy去用吧。

当然更多复杂功能，你可以看看官网的开发指南啊，类参考啊，示例啊。

（如果你是移动端的开发者，可以使用REST API，就是webservice服务，来获取json数据，并展示在自己的应用上。）

显示云图层：

var mapObj;//初始化地图对象，加载地图  function mapInit(){      mapObj = new AMap.Map("iMap",{center:new AMap.LngLat(116.39946,39.907629),level:10});          addCloudLayer();  //用于展示麻点图} //叠加云数据图层  function addCloudLayer() {      //清除地图上数据    mapObj.clearMap();    //加载云图层插件      mapObj.plugin('AMap.CloudDataLayer', function () {          var layerOptions = {               query:{keywords: ''},               clickable:true          };          cloudDataLayer = new AMap.CloudDataLayer('533ccc56e4b08ebff7d539eb', layerOptions); //实例化云图层类          cloudDataLayer.setMap(mapObj); //叠加云图层到地图                 AMap.event.addListener(cloudDataLayer, 'click', function (result) {              var clouddata = result.data;              var infoWindow = new AMap.InfoWindow({                  content:""+ clouddata._name + "
" + "分类：" + clouddata.tag + "
一句话："+ clouddata.content +"
",                  size:new AMap.Size(300, 0),                  autoMove:true,                  offset:new AMap.Pixel(0,-5)              });                            infoWindow.open(mapObj, clouddata._location);                      });          AMap.event.addListener(mapObj,"click",function(){            mapObj.clearInfoWindow();        });            });  }

清除图层

//清除图层function clearMap(){cloudDataLayer.setMap(null);}

这次清除图层之后，要再次显示图层，需要重新建立地图对应关系。

cloudDataLayer.setMap(mapObj);

通过索引渲染图层，实时渲染的哦

//索引检索function getType(tag){cloudDataLayer.setMap(mapObj);    var op={        query:{keywords:tag}    }    cloudDataLayer.setOptions(op);    }

效果展示图：

demo地址：

注册你自己的key，填在源代码里哦：

全部源代码：

      
       酸奶小妹-毕设-自有数据            
     
    
             
      查询自己的数据
        
                  
        全部自有数据
            
        清除图层
            
                        免费停车场                 通讯录                 美食记录                 旅行记录