顺德区地理信息公共服务平台

平台首页开发中心 API
事件类API 绘制开始事件
如何获取绘制开始事件？
可以使用map/drawToolbar下activate()方法激活绘制开始事件。
                                                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                                                        <html xmlns="http://www.w3.org/1999/xhtml">
                                                        <head>
                                                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                                                        <title>二次开发Demo </title>
                                                                <!--引入地图框架-->
                                                        <script src="https://tianditu.shunde.gov.cn/portalsys/DCIMapMiddleware.initapi" type="text/javascript">
</script>
                                                                <!--地图边框样式-->
                                                        <style type="text/css">
                                                            .content {
                                                                height: 380px;
                                                                width: 741px;
                                                                text-align: left;
                                                            }

                                                            #map_div {
                                                                position: absolute;
                                                            }

                                                            .bt_div {
                                                                position: absolute;
                                                                bottom: 10px;
                                                                z-index: 2;
                                                                left: 5px;
                                                            }

                                                            .Button {
                                                                bottom: 10px;
                                                                z-index: 2;
                                                                display: inline-block;
                                                                float: left;
                                                                margin-left: 5px;
</style>
                                                            </head>
                                                        <body>
                                                        <div id="map_div" class="content">
                                                        <div class="bt_div">
                                                        <input type="button" class="Button" value="点" onclick="drawLine(this)" id="point" />

                                                        <input type="button" class="Button" value="线" onclick="drawLine(this)" id="line" />

                                                        <input type="button" class="Button" value="面" onclick="drawLine(this)" id="polygon" />

                                                        <input type="button" class="Button" value="圆" onclick="drawLine(this)" id="circle" />

                                                        <input type="button" class="Button" value="矩形" onclick="drawLine(this)" id="rectangle" />

                                                        <input type="button" class="Button" value="取消" onclick="drawLine(this)" id="quxiao" />

                                                        <input type="button" class="Button" value="清除" onclick="drawLine(this)" id="remove" />

                                                                    </div>
                                                                </div>
                                                            </body>
                                                        </html>
                                                        <!--创建地图实例代码-->
                                                        <script type="text/javascript">
                                                            var map = null;
                                                            function showMap() {
                                                                map = new DCIMap("map_div", DCIMapConfig.mapInitParams);
                                                                switch (DCIMapConfig.vecMap.type) {
                                                                    case 0://WMTS
                                                                        var layers = new DCIWMTSLayer(DCIMapConfig.vecMap.Url);
                                                                        break;
                                                                    case 1://1为mapserver切片
                                                                        var layers = new esri.layers.ArcGISTiledMapServiceLayer(DCIMapConfig.vecMap.Url);
                                                                        break;
                                                                }
                                                                map.addLayer(layers, 0);
                                                                map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
                                                            }
                                                            dojo.addOnLoad(showMap);
                                                            //绘制开始事件
                                                            function drawLine(evt) {
                                                                var tool = null;
                                                                switch (evt.id) {
                                                                    case "point": tool = "POINT"; break;
                                                                    case "line": tool = "POLYLINE"; break;
                                                                    case "polygon": tool = "POLYGON"; break;
                                                                    case "circle": tool = "CIRCLE"; break;
                                                                    case "rectangle": tool = "RECTANGLE"; break;
                                                                    case "quxiao": map.drawToolbar.deactivate(); break;
                                                                    case "remove": map.esriMap.graphics.clear(); break;
                                                                }
                                                                if (tool !== null) {
                                                                    map.drawToolbar.activate(esri.toolbars.Draw[tool]);   //激活对应的绘制工具
                                                                    alert("你已经触发了一次绘制开始事件！");
                                                                    map.drawToolbar.on("draw-complete", drawEndEvent);    //绑定绘制开始事件
                                                                }
                                                            }
                                                            //绘制开始事件
                                                            function drawEndEvent(evt) {

                                                                //添加图形到地图
                                                                var symbol;
                                                                if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
                                                                    symbol = map.drawToolbar.markerSymbol;
                                                                } else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") {
                                                                    symbol = map.drawToolbar.lineSymbol;
                                                                }
                                                                else {
                                                                    symbol = map.drawToolbar.fillSymbol;
                                                                }
                                                                map.esriMap.graphics.add(new esri.Graphic(evt.geometry, symbol));
                                                            }
</script>