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/imag ... ot%3B,
                //图片大小
                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);
        }

 

92 Responses

  1. Btrcla说道:

    escitalopram 10mg us sarafem cheap buy generic naltrexone for sale

  2. Wcciza说道:

    lasix 40mg usa buy acticlate generic order ventolin 2mg online cheap

  3. Eczogl说道:

    strattera 10mg pills brand quetiapine 100mg zoloft 100mg for sale

  4. Ucumhk说道:

    urso cost oral urso cetirizine 5mg for sale

  5. Vxytcd说道:

    order zithromax 500mg generic buy azithromycin 500mg order neurontin 800mg generic

  6. Aozxuq说道:

    over the counter heartburn remedies why do some farts smell so bad medication to make you fart

  7. Uihnnk说道:

    order prednisone generic buy prednisone 10mg online cheap buy amoxicillin medication

  8. Ydmvzp说道:

    planned parenthood online appointments how to increase sperm count naturally best semen volume enhancer

  9. Cmdvcm说道:

    order promethazine online buy ed pills gb buy stromectol canada

  10. Netgog说道:

    medicine good for stomach ulcers most successful blood pressure medication types of urinary bacterial infections

  11. Rqflsc说道:

    cymbalta 40mg for sale duloxetine 20mg pill buy modafinil medication

  12. Hlqlfy说道:

    vitality health fungus clear reviews suppression therapy for herpes 2 best blood pressure medicine no side effects

  13. Esowry说道:

    periactin 4 mg generic buy nizoral no prescription ketoconazole 200mg cost

  14. Wthstc说道:

    how do antiviral drugs work asthma inhalers for sale online feline insulin dosage chart

  15. Eoahvk说道:

    order provera 5mg generic oral praziquantel 600 mg order hydrochlorothiazide 25mg

  16. Eesjdl说道:

    prescribed medication to stop smoking list of medicine for arthritis ordering pain pills online

  17. Ilhwjo说道:

    cost letrozole 2.5mg buy aripiprazole without prescription aripiprazole 30mg drug

  18. Bkjvkb说道:

    online sleep medication perscriptions online pharmacies diet pills can i buy wegovy without a prescription

  19. Jpuash说道:

    buy generic uroxatral over the counter cheap uroxatral 10mg is omeprazole a promotility drug

  20. Jqrgdj说道:

    buy minocin 100mg generic terazosin canada order ropinirole 1mg pills

  21. Wmswsr说道:

    hormonal acne treatment near me acne medications list order trileptal sale

  22. Hwsaeg说道:

    clonidine 0.1 mg uk buy meclizine pill buy cheap generic spiriva

  23. Llhjyy说道:

    buy rocaltrol pill brand labetalol buy tricor 160mg sale

  24. Gowbgc说道:

    brand amoxicillin 250mg order biaxin online cheap buy macrobid online

  25. Dhaucy说道:

    help writing a paper for college write papers for me real money online casino

  26. Slkntz说道:

    academic writing college essays edited order suprax online

  27. Kkgrok说道:

    buy aspirin 75 mg sale order generic aspirin 75 mg no deposit casino

  28. Yzpata说道:

    purchase terbinafine sale card games online blackjack vegas free online games

  29. Wuizhv说道:

    buy desyrel 100mg sildenafil order online buy generic clindamycin online

  30. Vvtvib说道:

    ceftin 500mg cost ceftin 500mg sale robaxin 500mg tablet

  31. Mdqwic说道:

    tadacip 10mg usa buy diclofenac online cheap indocin sale

  32. Wxlhzm说道:

    nolvadex where to buy nolvadex 10mg price budesonide cost

  33. Ibdjrr说道:

    brand retin gel oral tadalafil 20mg stendra medication

  34. Wsadlr说道:

    generic clindamycin where can i buy erythromycin buy fildena pill

  35. Howjfj说道:

    lamictal 200mg pills prazosin 2mg pills vermox 100mg generic

  36. Qirzag说道:

    metronidazole 400mg pills flagyl pills keflex order online

  37. Hnczao说道:

    order sildenafil 50mg online buy generic estrace for sale yasmin order

  38. Duxspi说道:

    forcan pill brand ampicillin 500mg ciprofloxacin 500mg uk

  39. Cuhema说道:

    essay helper how to write an about me essay my friend essay writing

  40. Neerun说道:

    spironolactone pill finpecia for sale propecia 5mg pills

  41. Oimqud说道:

    buy motilium online buy domperidone 10mg without prescription tetracycline us

  42. Unkcuw说道:

    buy tamsulosin generic buy flomax 0.2mg where can i buy zocor

  43. Btqjtm说道:

    buy buspar without prescription purchase buspin without prescription amiodarone online buy

  44. Zomjrd说道:

    zantac order online buy mobic 7.5mg online cheap celecoxib 200mg canada

  45. Hclspl说道:

    allopurinol 300mg pills order crestor 20mg rosuvastatin 10mg tablet

  46. Ozgdqi说道:

    buy sumatriptan no prescription buy sumatriptan generic dutasteride for sale

  47. Otlqjt说道:

    nexium pills mirtazapine 30mg price topiramate pills

  48. Npmejb说道:

    azelastine 10 ml canada astelin online order order avapro 300mg pills

  49. Kuhoet说道:

    buy pepcid no prescription buy losartan 25mg pill buy prograf 1mg for sale

  50. Mvfxah说道:

    coumadin for sale purchase coumadin pills order reglan without prescription

  51. Bgalht说道:

    pamelor ca buy generic pamelor buy cheap anacin

  52. Kuspmh说道:

    order inderal 10mg online oral ibuprofen 600mg order plavix 75mg without prescription

  53. Vxlsox说道:

    amaryl cheap buy glimepiride generic arcoxia 60mg generic

  54. Bfahrs说道:

    fosamax online order oral alendronate order generic furadantin 100mg

  55. Miqhhn说道:

    ozobax cost ozobax cost purchase toradol pills

  56. Ujaaqo说道:

    loratadine drug order tritace online buy priligy 60mg generic

  57. Sqqvcf说道:

    cost phenytoin dilantin 100 mg for sale oxybutynin 5mg cheap

  58. Knsdha说道:

    buy coversum generic clarinex 5mg over the counter fexofenadine canada

  59. Ynisgy说道:

    order generic levitra 20mg cost levitra 20mg buy zanaflex without a prescription

  60. Gwgftx说道:

    buy methylprednisolone 8 mg oral adalat buy aristocort 4mg generic

  61. Hrwiko说道:

    clomid without prescription order isosorbide 40mg for sale order generic azathioprine 50mg

  62. Iqdmeb说道:

    no deposit free spins buy augmentin 625mg pill buy generic synthroid

  63. Shgyld说道:

    buy generic amantadine 100 mg cheap amantadine 100mg avlosulfon 100 mg pills

  64. Gnhvmw说道:

    hard rock casino online poker online game fda ivermectin

  65. Ehjvqw说道:

    play blackjack online for real money purchase vibra-tabs without prescription buy ventolin inhaler

  66. Jghhvf说道:

    protonix 40mg price protonix 40mg for sale buy pyridium 200mg generic

  67. Jlynyr说道:

    that roulette free online poker games purchase furosemide online

  68. Bjdtvw说道:

    lipitor 10mg cost order albuterol 100 mcg online norvasc order online

  69. Vdttyz说道:

    purchase azipro sale buy azithromycin tablets oral neurontin 800mg

  70. Rtemrh说道:

    order isotretinoin 20mg for sale zithromax 500mg over the counter buy azithromycin online

  71. Mgohyy说道:

    order omnicef 300mg generic lansoprazole cost lansoprazole 15mg drug

  72. Ldqtrm说道:

    purchase provigil sale modafinil 200mg cost deltasone 5mg brand

  73. Ammkpj说道:

    cenforce 50mg tablet order chloroquine chloroquine price

  74. Iztpxn说道:

    cost micardis 20mg brand molnunat order molnunat 200 mg generic

  75. Alvnac说道:

    purchase omeprazole without prescription order prilosec 20mg without prescription order lopressor 50mg generic

  76. Vhzykx说道:

    order premarin online cheap viagra 50mg uk cheap sildenafil 50mg

  77. Whumwe说道:

    betahistine buy online buy haldol without prescription probalan cost

  78. Yvxfud说道:

    xalatan uk xalatan oral buy rivastigmine 3mg online

  79. Xkpquj说道:

    buy vasotec 5mg for sale enalapril for sale buy duphalac for sale

  80. Dbutus说道:

    pyridostigmine over the counter buy generic feldene maxalt us

  81. Iccvuq说道:

    ferrous 100 mg pills buy betapace 40 mg online purchase sotalol online cheap

  82. Tyxyyn说道:

    buy cheap generic prasugrel detrol sale detrol 1mg generic

  83. Wwwokg说道:

    buy generic fludrocortisone cost rabeprazole 10mg imodium drug

  84. Kiukys说道:

    buy duphaston 10 mg online cheap buy jardiance 25mg generic buy jardiance medication

  85. Irglwd说道:

    purchase melatonin pills buy desogestrel generic danazol 100mg brand

  86. Wuagbm说道:

    purchase dipyridamole online cheap dipyridamole 100mg tablet purchase pravastatin online cheap

  87. Ccjyyh说道:

    purchase aspirin online cheap lquin 250mg where to buy imiquimod without a prescription

  88. Lemfdi说道:

    precose price micronase pills buy fulvicin 250mg sale

  89. Xmmvkb说道:

    minoxytop us flomax 0.4mg oral where to buy over the counter ed pills

  90. Ywbqst说道:

    buy ketotifen pills purchase zaditor pills order tofranil 75mg pills

  91. Ytmnsj说道:

    tadalafil over counter buy sildenafil 100mg online cheap real viagra

  92. Efnhyn说道:

    buy tricor online buy tricor 200mg generic order fenofibrate 160mg pill

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

CAPTCHAis initialing...