快速入门
wsdk是一套JavaScript地图开发工具包，内置地图展示、后台服务封装、前台空间分析等功能，支持所有现代浏览器。
一、准备工作
1.获取二次开发key
登录地图易>个人中心>key管理。
2.获取后台服务路径
如果是在线地图易，后台服务路径为http://api.dituyi.com.cn。
如果是离线部署版本，默认是http://127.0.0.1:22000/api。
3.引入wsdk
想使用wsdk，需要引入wsdk.js。
<script src="../wsdk-1.0.0.js"></script>
4.wsdk初始化
wsdk引入后需要调用init()进行初始，初始化完成后方可进行其他操作。
初始化时需要指定二次开发key、后台服务路径和需要加载的扩展库。
<script>
wsdk.init({
serverBasePath: 'http://127.0.0.1:22000/api',
key: 'XXX',//KEY从地图易的控制台申请
libraries: [],//可根据需要加载需要的扩展库
}).then(() => {
//初始化回调函数
});
</script>
详见：完整示例
二、使用wsdk创建地图
1.引入wmapgl包
创建地图需要先引入wmapgl库：
wsdk.init({
serverBasePath: 'http://127.0.0.1:22000/api',
key: 'XXX',//KEY从地图易的控制台申请
libraries: ['wmapgl'],//可根据需要加载需要的扩展库
}).then(() => {
//初始化回调函数，后续所有操作在该方法中执行
});
2.创建地图容器
创建地图前需要准备一个地图容器，并指定容器大小：
<div id="map" style="width:800px;height:600px"></div>
3.创建地图
容器准备好之后，使用wmapgl.Map类创建一个可交互的地图。
创建地图时需要指定一个默认底图，所有地图易平台都内置一份标准底图，默认访问路径为：http://127.0.0.1:22000/api/styleService/default。
<script>
wsdk.init({
serverBasePath: 'http://127.0.0.1:22000/api',
key: 'XXX',//KEY从地图易的控制台申请
libraries: ['wmapgl'],//可根据需要加载需要的扩展库
}).then(() => {
let map = new wmapgl.Map({
container: 'map', // 地图容器 ID
style: 'http://127.0.0.1:22000/api/styleService/default', // 底图地址，可从地图易控制台获取更多底图
center: [116, 40], // 地图中心点
zoom: 10, // 地图缩放级别
minZoom: 1, // 地图最小缩放级别
maxZoom: 11, // 地图最大缩放级别
});
});
</script>
详见：完整示例
4.在地图上显示标记
使用wmapgl.Marker类在地图上显示标记：
let marker = new wmapgl.Marker()
.setLngLat([116, 40])
.addTo(map);
详见：完整示例
5.在地图上显示弹出气泡
使用wmapgl.Popup类在地图上显示弹出气泡。
弹出气泡可以直接在地图上显示：
let popup = new wmapgl.Popup()
.setLngLat([116, 40])
.setHTML('<h1>Hello World!</h1>')
.addTo(map);
详见：完整示例
也可弹出气泡和Marker关联，点击Marker时自动显示气泡。
let popup = new wmapgl.Popup()
.setHTML('<div>Hello World!</div>');
let marker = new wmapgl.Marker()
.setLngLat(map.getCenter())
.setPopup(popup)
.addTo(map);
详见：完整示例
三、后台数据交互
1.创建图层
使用图层管理工具创建一个点图层，访问路径为：登录地图易>地图工具>图层管理。
详见图层管理。
2.采集数据
新创建的图层没有数据，可使用图层采集工具添加数据。
详见数据采集。
3.引入wserver库
采集完数据之后，可以使用wserver库查询数据。
使用wserver之前需要引入wserver库：
wsdk.init({
serverBasePath: 'http://127.0.0.1:22000/api',
key: 'XXX',
libraries: ['wserver'],
}).then(() => {
});
4.使用wserver查询图层中的数据
引入wserver库之后，调用相关类和方法查询图层。
let wServer = new wserver.WServer();
let service = wServer.createFeatureService();
//创建查询对象
let layerName = "point_layer";
let queryObj = service.createQueryObject(layerName);
//设置查询返回字段，返回所有字段
queryObj.setOutFields('*');
//设置查询条件，返回所有数据
queryObj.setWhere("1=1");
//执行查询
queryObj.execute(function (features) {
//查询回调函数
});
5.在地图上显示查询结果
点图层查询结果可以以Marker方式在地图上显示。
let wServer = new wserver.WServer();
let service = wServer.createFeatureService();
//创建查询对象
let layerName = "point_layer";
let queryObj = service.createQueryObject(layerName);
//设置查询返回字段，返回所有字段
queryObj.setOutFields('*');
//设置查询条件，返回所有数据
queryObj.setWhere("1=1");
//执行查询
queryObj.execute(function (features) {
for (var i in features) {
var feature = features[i];
var latlng = feature.geometry.coordinates;
let marker = new wmapgl.Marker()
.setLngLat(latlng)
.addTo(map);
}
});
详见完整示例。