地图开发入门

本文档面向开发人员,通过本文档的学习,快速掌握地图应用开发。建议按顺序阅读以下内容:

一、开发准备

1、注册地图易用户

注册地址

2、获取Key

登入后台>个人设置>key管理

3、获取用户ID

登入后台>个人设置>个人信息

二、创建地图

1 . 引入地图API文件

                        
    <link rel="stylesheet" href="http://www.dituyi.com.cn/wmap/wmap.css">
    <script src="http://www.dituyi.com.cn/wmap/wmap.js"></script>
    <script src="http://www.dituyi.com.cn/wmap/config.js"></script>
                        
                    

2 . 创建地图的容器

                        
    <div id="mapDiv"></div>
                        
                    

3 . 设置地图容器大小

                        
    <style>
        html,body ,#mapDiv {
			width: 100%;
			height: 100%;
			margin: 0px;
			padding: 0px;
		}
    </style>
                        
                    

4 . 使用js代码创建地图

                        
    //创建地图对象
    var map = W.map("mapDiv");
    //创建一个底图,并添加到map中
    var tileServiceUrl  ="http://api.dituyi.com.cn/tileService/rasterSample/{z}/{x}/{y}?layer=exampleVector";
    var baseLayer = W.tileLayer(tileServiceUrl).addTo(map);
    //设置地图显示的中心点和级别
    map.setView([37.98, 104.33], 4);
                        
                    

详见:地图创建示例 下载

三、在地图上添加标记

                        
   //创建一个marker,并添加到地图上
   var marker = W.marker([39.894987,116.322556]).addTo(map);
   //并在marker上绑定一个气泡并打开
   marker.bindPopup("气泡内容").openPopup();
                        
                    

详见:标记示例 下载

四、后台数据交互

1.使用图层管理工具,创建图层

创建图层说明:查看

2.使用数据采集应用,采集数据

数据采集说明:查看

3.数据查询展示

                        
    var key = "xxxxxxxxxxxxxxx";//用户key
    var userId = "xxxxxxxxxxxxxxxxxxx";//用户id
    var apiBasePath  ="http://api.dituyi.com.cn";  //要素服务访问路径
    var layerName = userId + '.' + "msp_demo_pt";//查询图层
    var opts = {
                    apiBasePath: apiBasePath,
                    key:key,
                }
    //创建要素服务
    var service=  new WS.WServer(opts).createFeatureService();
    //创建查询对象
    var queryObj = service.createQueryObject(layerName);
    //设置查询返回字段
    queryObj.setOutFields('*');
    //设置查询条件
    queryObj.setWhere("1=1");
    //执行查询
    queryObj.execute(function (features) {
            for(i in features){
                var feature = features[i];
                var latlng = W.latLng(feature.geometry.coordinates[1],feature.geometry.coordinates[0]);
                var name = feature.properties.name ? feature.properties.name : "";
                var html = "名称:" + name;
                //查询结果添加到地图上
                var marker = W.marker(latlng).bindPopup(html).addTo(map);
            }
    });
                     
                    

详见:数据查询示例 下载

微信

客户服务电话

010-64755462

18610218452

在线客服