博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
arcgis jsapi接口入门系列(4):用代码在地图画点线面
阅读量:6497 次
发布时间:2019-06-24

本文共 6007 字,大约阅读时间需要 20 分钟。

hot3.png

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

 

 

 

转载于:https://my.oschina.net/u/1251858/blog/2248141

你可能感兴趣的文章
jquery对同级的td做radio限制
查看>>
Delphi XE5 常用功具与下载
查看>>
存储过程由结构表生成表
查看>>
C# 批处理制作静默安装程序包
查看>>
柯南君:看大数据时代下的IT架构(5)消息队列之RabbitMQ--案例(Work Queues起航)...
查看>>
2015 Multi-University Training Contest 2 1002 Buildings
查看>>
java 产生的固体物的基础上 增删改的SQL声明
查看>>
在自己的网站添加关注新浪关注按钮
查看>>
【MySQL笔记】mysql来源安装/配置步骤和支持中国gbk/gb2312编码配置
查看>>
一句话的设计模式(转)
查看>>
(剑指Offer)面试题54:表示数值的字符串
查看>>
Centos下安装mysql 总结
查看>>
ORM武器:NHibernate(三)五个步骤+简单对象CRUD+HQL
查看>>
UIScrollView offset in UINavigationController
查看>>
怎么从sqlserver 数据库导出 insert 的数据语句
查看>>
BZOJ4245 : [ONTAK2015]OR-XOR
查看>>
Android Properties 存储
查看>>
setenv 和 set
查看>>
.sh
查看>>
碱基序列的儿子最长上涨
查看>>