arcgis jsapi接口入门系列（4）：用代码在地图画点线面
2024-09-30 03:12:35
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);
},
最新文章
- CentOS 7 防火墙 firewall 的使用
- 学习Linux的编码风格
- mysql中影响myisam引擎写入性能的三项设置
- How to install .deb file in Ubuntu
- Returns: range-based (not absolute) index within the current range
- javascript中的原型和闭包
- 对比iOS网络组件：AFNetworking VS ASIHTTPRequest（转载）
- [置顶] cocos2dx sqllite 增删查改等操作
- 那些年,我们一起学WCF--(7)PerSession实例行为
- SQL Server 数据库游标选项
- python _thread模块使用
- hdu3605（最大流+状态压缩）
- 有向图和拓扑排序Java实现
- 【JavaWeb】DbUtils入门之QueryRunner
- java编程思想笔记（1）
- 巧妙解决vue2.0关于set添加属性后视图不能更新的问题
- echart 图例
- 2017-12-18python全栈9期第三天第四节之str的索引与切片
- Kafka笔记1（初步认识）
- django----数据库操作(对model增删改查)