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);
},
arcgis jsapi接口入门系列(4):用代码在地图画点线面的更多相关文章
- arcgis jsapi接口入门系列(5):几何(点线面)基本操作
点 point: function () { //通过wkt生成点 //wkt,代表点的坐标 let wkt = "POINT(113.566806 22.22445)"; //w ...
- arcgis jsapi接口入门系列(0):总览
开发环境: arcgis jsapi版本4.9 由于我们这套代码是基于vue,webpack开发的,会有少数vue代码,但总体不影响 里面还有些我们公司的js库和html css,给出的代码不能百分百 ...
- arcgis jsapi接口入门系列(2):图层基础操作
//图层相关demo layerFun: function () { //获取地图的所有图层(不包括的图层类型:底图图层(basemaps)) let layers = this.map.layers ...
- arcgis jsapi接口入门系列(10):图形高亮
jsapi也有提供高亮的实现接口,但这里没用,而用的是一种改变图形(graphic)样式的思路 本文实现效果是:地图有多个面图形,当鼠标移动到面的上方,面高亮显示,鼠标移出后高亮解除 初始化 //高亮 ...
- arcgis jsapi接口入门系列(9):可以同时显示多个的地图popup
jsapi有提供popup功能,但缺点很多,例如地图上只能同时显示一个popup,popup内容有限制等 本文提供另一个方法,原理不用jsapi,在地图外用一个普通的div放在地图上面,再监听地图的鼠 ...
- arcgis jsapi接口入门系列(3):各种类型的图层添加
这里说的tomcat切片,是指arcgis server切片后,把切片图片文件用tomcat发布(其他任意web服务器发布都行) //添加tomcat切片图层 addTomcatTileLayer: ...
- arcgis jsapi接口入门系列(8):鼠标在地图画面
初始化,每个map执行一次 PS:画点也差不多,都是用SketchViewModel,因此本demo没有专门写画点的 drawPolygonInit: function () { //画几何对象初始化 ...
- arcgis jsapi接口入门系列(7):鼠标在地图画线
初始化,每个map执行一次就行 drawPolylineInit: function () { //画几何对象初始化 //新建一个图形图层用于存放画图过程中的图形 let layer = new th ...
- arcgis jsapi接口入门系列(6):样式
symbol: function () { //线样式 //样式详情请看官方文档 let style = { //线颜色,支持多种格式: //CSS color string:例如"dodg ...
随机推荐
- map插入与查找
用map构建映射关系可以用来离散化,这里记录一下用法: 插入:将要插入的两个值组成pair,用insert插入map中: 查找:定义iterator,赋成find返回的迭代器,如果没有找到则=mp.e ...
- STL中关于vector的一点有趣的事情
PLZ ADD SOURCE: http://www.cnblogs.com/xdxer/p/4072056.html 今日饭后,一哥发给我一段代码,让我看看会不会有什么问题. #include< ...
- 给DataTable中添加一行数据
一.如果该DataTable有两列,列的名称是Name,Age,且该DataTable的名称是dt; DataRow dr = dt.NewRow(); dr["Name"] = ...
- 11.boolean类型
/* 关于java中的Boolean类型: 1)赋给boolean类型的值只有两个:ture或者false 2)boolean类型的数据主要用在逻辑运算和条件控制语句中.*/ public class ...
- ViewerJS 一个在浏览器上查看 PDF 和电子表格的 JavaScript 库
Viewer.js简介 http://viewerjs.org/ 下载Viewer.js压缩包,解压后将ViewerJS文件夹放在网站根目录下 在浏览器地址栏中输入网址http://172.16.8. ...
- C++STL 求和:accumulate 【转】
该算法在numeric头文件中定义. accumulate()的原型为(文件取自DEV-C++编译器): template<typename _InputIterator, typename _ ...
- Python3.6 的字符串内建函数
1.capitalize(self) 将字符串的第一个字符转换为大写 2.casefold(self) 返回将字符串中所有大写字符转换为小写后生成的字符串 3.center(self, width, ...
- 201621123016 《Java程序设计》第八周学习总结
1. 本周学习总结 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 ArrayList在调用contains方法时会调用indexOf方法得到 ...
- CodeForces717C 【数学】
题意: 给你n个数既表示a类的值也表示b类的值,然后计算a和b类两两搭配相乘相加,使得答案最小: 思路: 显而易见的方案是最小乘最大,次小乘次大,然后依次下去.. 可以那个特例证明这个是对的 #inc ...
- [Xcode 实际操作]七、文件与数据-(15)单例模式的使用
目录:[Swift]Xcode实际操作 本文将演示单例对象的使用. 在项目名称上点击鼠标右键,弹出右键菜单,选择[New File]新建文件命令, 在弹出的模板选项窗口中,选择[Swift]文件选项, ...