arcgis jsapi接口入门系列(4):用代码在地图画点线面

PS:用代码画点这样写是为了跟后面的用鼠标画点线面区分出来

画点

        drawPointGraphic: function () {
            //点有多种样式:一般的点,显示文字,显示图片

            //一般的点
            let wkt = "POINT(113.566806 22.22445)";

            //样式
            //PS:其他高级样式配置请看样式的章节
            let style = {
                //点样式,值有:circle=圆,cross=十字,diamond=菱形,square=正方形,x=X
                style: "circle",
                //点填充颜色
                color: "blue",
                //点大小
                size: "8px",
                //边框线样式,具体同线的样式
                outline: {
                    color: [255, 255, 0],
                    width: 3
                }
            };

            //通过wkt生成线图形(graphic)
            //PS:图形(graphic)是一个可以加载到地图或图层的几何对象,包括的几何对象的坐标,样式,属性字段值等
            // * @param apiInstance api
            //     * @param wkt wkt
            //     * @param style 样式
            //     * @param sr 空间参考
            //     * @param attributes 属性字段值(可空)
            let graphic = mapUtil.geometry.wktToPointGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);

            //把图形添加到地图的图形集合
            //PS:图形要在地图上显示,可以添加到两种地方。一是mapView的graphics,这是地图的图形容器。第二是创建图形图层(GraphicsLayer),然后把图形加入到图层里
            this.mapView.graphics.add(graphic);

            //显示文字的点
            wkt = "POINT(113.57418 22.22342)";

            //样式
            //PS:其他高级样式配置请看样式的章节
            style = {
                //字体颜色
                color: "black",
                //文字内容
                text: "文字demo",
                //字体样式
                font: {
                    //字体大小
                    size: 12,
                    //字体名称
                    family: "sans-serif",
                }
            };

            //wkt转点的文字的图形(graphic)
            //PS:图形(graphic)是一个可以加载到地图或图层的几何对象,包括的几何对象的坐标,样式,属性字段值等
            // * @param apiInstance api
            //     * @param wkt wkt
            //     * @param style 样式
            //     * @param sr 空间参考
            //     * @param attributes 属性字段值(可空)
            graphic = mapUtil.geometry.wktToTextGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);

            //把图形添加到地图的图形集合
            //PS:图形要在地图上显示,可以添加到两种地方。一是mapView的graphics,这是地图的图形容器。第二是创建图形图层(GraphicsLayer),然后把图形加入到图层里
            this.mapView.graphics.add(graphic);

            //显示图片的点
            wkt = "POINT(113.59281 22.22685)";

            //样式
            //PS:其他高级样式配置请看样式的章节
            style = {
                //图片url
                url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
                //图片大小
                width: "64px",
                height: "64px"
            };

            //wkt转点的图片的图形(graphic)
            //PS:图形(graphic)是一个可以加载到地图或图层的几何对象,包括的几何对象的坐标,样式,属性字段值等
            // * @param apiInstance api
            //     * @param wkt wkt
            //     * @param style 样式
            //     * @param sr 空间参考
            //     * @param attributes 属性字段值(可空)
            graphic = mapUtil.geometry.wktToPicGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);

            //把图形添加到地图的图形集合
            //PS:图形要在地图上显示,可以添加到两种地方。一是mapView的graphics,这是地图的图形容器。第二是创建图形图层(GraphicsLayer),然后把图形加入到图层里
            this.mapView.graphics.add(graphic);
        },

画线

        //代码在地图上添加线
        drawPolylineGraphic: function () {
            //wkt,代表线的坐标
            //PS:线坐标传入还支持其他格式,具体请看几何对象的章节
            let wkt = "LINESTRING(113.545949 22.24015749,113.56989 22.24916,113.55324 22.220588)";
            //样式
            //PS:其他高级样式配置请看样式的章节
            let style = {
                //线颜色
                color: "dodgerblue",
                //线宽
                width: 3,
                //线样式
                style: "solid"
            };

            //通过wkt生成线图形(graphic)
            //PS:图形(graphic)是一个可以加载到地图或图层的几何对象,包括的几何对象的坐标,样式,属性字段值等
            //     * @param apiInstance api
            //     * @param wkt wkt
            //     * @param style 样式
            //     * @param sr 空间参考
            //     * @param attributes 属性字段值(可空)
            let graphic = mapUtil.geometry.wktToPolylineGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);

            //把图形添加到地图的图形集合
            //PS:图形要在地图上显示,可以添加到两种地方。一是mapView的graphics,这是地图的图形容器。第二是创建图形图层(GraphicsLayer),然后把图形加入到图层里
            this.mapView.graphics.add(graphic);

            //图形添加到图形图层

            //新建图形图层
            let layer = new this.apiInstance.GraphicsLayer({
                //空间参考,一般要跟地图的一样
                spatialReference: this.mapView.spatialReference,
            });
            //图层添加到地图
            //PS:GraphicsLayer也是图层之一,因此也支持通用的图层功能
            this.map.add(layer);

            wkt = "LINESTRING(113.52535 22.2372,113.54320285 22.2299436)";
            graphic = mapUtil.geometry.wktToPolylineGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);

            //生成图形后,把图形添加到图层
            layer.add(graphic);
        },

画面

        //代码在地图上添加面
        drawPolygonGraphic: function () {
            //wkt,代表坐标
            //PS:线坐标传入还支持其他格式,具体请看几何对象的章节
            let wkt = "POLYGON((113.527839 22.27028,113.527238 22.2557786,113.5437178 22.2597268,113.54423 22.2730306,113.527839 22.27028))";
            //样式
            //PS:其他高级样式配置请看样式的章节
            let style = {
                //线颜色
                color: [50, 205, 50, 0.3],
                outline: {
                    color: [255, 0, 0],
                    width: 1
                }
            };

            //wkt转面的图形(Graphic)
            //PS:图形(graphic)是一个可以加载到地图或图层的几何对象,包括的几何对象的坐标,样式,属性字段值等
            //     * @param apiInstance api
            //     * @param wkt wkt
            //     * @param style 样式
            //     * @param sr 空间参考
            //     * @param attributes 属性字段值(可空)
            let graphic = mapUtil.geometry.wktToPolygonGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);

            //把图形添加到地图的图形集合
            //PS:图形要在地图上显示,可以添加到两种地方。一是mapView的graphics,这是地图的图形容器。第二是创建图形图层(GraphicsLayer),然后把图形加入到图层里
            this.mapView.graphics.add(graphic);
        },

猜你喜欢

转载自my.oschina.net/u/1251858/blog/2248141