iClient for Leaflet之椭圆的简易绘制方法

作者：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，插件才可以使用

<script type="text/javascript" src="https://cdn.bootcss.com/leaflet/1.0.3/leaflet.js">

3.引入插件

<script src="./l.ellipse.js"></script>

4.调用iclient for leaflet接口
要对接supermap iserver服务，还需要引用超图客户端产品包中带的iclient9-leaflet.js

 <script type="text/javascript" src="http://iclient.supermap.io/dist/iclient9-leaflet.js"></script>

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

转载自：https://blog.csdn.net/supermapsupport/article/details/79783838