openlayers 各种图层，持续更新

最新推荐文章于 2025-06-26 11:21:00 发布

转载最新推荐文章于 2025-06-26 11:21:00 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sjfsjf/p/9325186.html

文章标签：

#json

本文介绍了一种使用高德地图API与OpenLayers库结合的方法，实现矢量图层加载及自定义样式的功能。通过设置不同的层级(level)，能够根据不同级别的地理数据应用特定样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1   /*高德地图*/
 2     var vectorLayerLine = new ol.layer.Tile({
 3 
 4           source: new ol.source.XYZ({ 
 5             urls: [
 6                   "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
 7                   "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
 8                   "http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
 9                   "http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
10                ]
11             })         
12     });

矢量图层以及样式设定

 1 nodesLayer:new ol.layer.Vector({
 2          source: new ol.source.Vector({
 3           //读取geojson 的数据
 4               features: (new ol.format.GeoJSON()).readFeatures(JSON.stringify(nodedata))
 5         }),
 6          //根据feature属性来定样式，从来实现整体渲染，而不是进行循环操作
 7          style:function(feature){
 8               
 9              if (feature.get("level")=="2") {
10                   feature.setStyle(stylesjf2);
11                   console.log("first");  
12                
13             }
14             else if (feature.get("level")=="1") {
15                 feature.setStyle(stylesjf1);  
16             }
17             else if (feature.get("level")=="3") {
18                 feature.setStyle(stylesjf3);  
19             }
20          },
21          useSpatialIndex:false
22          //style:ciclestyle
23          //style:stylesjf
24 }),