效果；

在此例子基礎上進行；

https://blog.csdn.net/bcbobo21cn/article/details/89085909

?

定義一個js變量testlayer；
地圖服務的url:
host = "http://localhost:8090";
url = host + "/iserver/services/map-china400/rest/maps/China";

加載了layer圖層之后；定義一個Vector類型的圖層，名稱為"測試圖層"，賦值給testlayer；
然后把testlayer也加載到map上；然后調用addGeoTest();
?

function addLayer(){map.addLayer(layer);testlayer = new SuperMap.Layer.Vector("測試圖層");map.addLayer(testlayer);//顯示地圖范圍map.setCenter(new SuperMap.LonLat(0, 0), 1);addGeoTest(); }function addGeoTest() {var points = [new SuperMap.Geometry.Point(0, 4010338),new SuperMap.Geometry.Point(1063524, 4010338),new SuperMap.Geometry.Point(1063524, 3150322),new SuperMap.Geometry.Point(0, 3150322)],linearRings = new SuperMap.Geometry.LinearRing(points),region = new SuperMap.Geometry.Polygon([linearRings]);var regionFeature = new SuperMap.Feature.Vector(region);var styleTest = {strokeColor: "#00DB00",strokeWidth: 3,strokeOpacity: 0.5,fillColor: "#006000",fillOpacity: 1,};regionFeature.style = styleTest;testlayer.addFeatures([regionFeature]); }

?

SuperMap.Layer.Vector，超圖的矢量圖層類。

SuperMap.Geometry.LineString，幾何對象線串類。
SuperMap.Geometry.Polygon，多邊形幾何對象類。
SuperMap.Feature.Vector
? ? 矢量要素類。該類具有 Geometry 屬性存放幾何信息， attributes 屬性存放非幾何信息，另外還包含了 style 屬性，

先定義一個點數組；由點數組構造幾何對象線串對象，由幾何對象線串對象構造多邊形對象；由多邊形對象構造一個矢量要素對象；
定義要素風格，邊界顏色、邊界線寬度、填充顏色、透明度等；
把風格賦給要素;
把要素添加到testlayer圖層；

可以進入前端調試查看一下地圖相關變量的屬性；

console.log()是js調試輸出語句；可在前端調試時使用；

第一個紅線處輸出圖層的名稱；

第二個紅線處輸出圖層的要素個數；

第三個紅線輸出圖層的第一個要素的Geometry屬性；

展開后，第四個紅線處，是Geometry的第一個點；

總結

以上是生活随笔為你收集整理的超图js版本添加矢量图层并在图层上绘一个面要素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。