快速入门

wsdk是一套JavaScript地图开发工具包,内置地图展示、后台服务封装、前台空间分析等功能,支持所有现代浏览器。

一、准备工作

1.获取二次开发key

登录地图易>个人中心>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.采集数据

新创建的图层没有数据,可使用图层采集工具添加数据。

获取key

详见数据采集

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);
    }
});

详见完整示例

四、更多资料

results matching ""

    No results matching ""