作者：Lily
背景
SuperMap iClient for JavaScript 9D客户端产品：Leaflet，OpenLayaers，MapboxGL，Classic。想必大家都有所了解，可能对于熟悉8c产品的同学来说，还是习惯用Classic，对于其他三款产品不是特别熟悉，但是有的时候项目需求又需要使用leaflet的功能，有些功能范例里面没有，就比较头疼，比如前两天就有人问如何用leaflet画椭圆，针对这个问题，leaflet并没有原生的绘制椭圆接口，所以绘制起来还是比较麻烦，下面我给大家介绍一种简易的绘制方法。
绘制方法
1.下载椭圆绘制插件
https://download.csdn.net/download/supermapsupport/10321709
2.调用leaflet接口
由于插件中需要用到leaflet的相关接口，所以必须先引用leaflet.js，插件才可以使用
3.引入插件
4.调用iclient
for leaflet接口
要对接supermap
iserver服务，还需要引用超图客户端产品包中带的iclient9-leaflet.js
5.添加地图
由于动态标绘只是渲染矢量数据，所以不能作为底图，我们需要在map上添加一个
TiledDynamicRESTLayer做为底图
var
host = window.isLocal ? window.server :
"http://support.supermap.com.cn:8090";
var map, resultLayer,
baseUrl = host +
"/iserver/services/map-world/rest/maps/World",
url = host + "/iserver/services/data-world/rest/data";
map = L.map('map', {
preferCanvas: true,
crs: L.CRS.EPSG4326,
center: { lon: 0, lat: 0 },
maxZoom: 18,
zoom: 2
});
L.supermap.tiledMapLayer(baseUrl).addTo(map);
6.调用绘制方法，并将结果绘制到地图上
//latlng：椭圆的位置；经纬度坐标
//radii：长半轴，短半轴；二维数组
//tilt:倾斜角度；度
//options：其他一些属性，如fill，startAngle，endAngle
L.ellipse(latlng,
radii, tilt, options).addTo(map);
7.绘制结果
上图示例代码如下：
链接：https://pan.baidu.com/s/1ZtIVhfEbPAW1WzDoaO6AeQ
密码：eqi7
网友评论