跳转到主要内容

渲染点线面

如果是开发完整项目，强烈建议您使用Webpack结合TypeScript进行开发。

本小节的最终演示效果
关于示例代码

以下代码以二维做讲解，三维思路和用法几乎一致。

添加一个基础在线地图
<script>
        const map = new QE.LMap("map", {crs: L.CRS.EPSG3857,fadeAnimation: false}).setView([35, 110], 5);
        QE.createTileLayer(QE.predefinedImageTiles.tdtSatellite).addTo(map);
</script>
获取一个GeoJSON数据

在QE中，矢量数据内部使用GeoJSON进行表达，对应的数据解析器是GeoJSONFeatureProvider，下面是一个简单的GeoJSON对象，包含了点线面：

const jsonData={
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "properties": {
                    "name": "天府三街"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [104.06303023033792, 30.54675753000589]
                }
            },
              {
                  "type": "Feature",
                  "properties": {
                      "name": "天府五街"
                  },
                  "geometry": {
                      "type": "Point",
                      "coordinates": [104.06056505865428, 30.537889923501893]
                  }
              }
              ,
              {
                  "type": "Feature",
                  "properties": {
                      "name": "银泰城"
                  },
                  "geometry": {
                      "coordinates": [[[104.05734538204854, 30.542126961366336], [104.05733923297134, 30.540628203046936], [104.06044451507631, 30.540659979072146], [104.06041991880102, 30.542142849135033], [104.05734538204854, 30.542126961366336]]],
                      "type": "Polygon"
                  }
              },
              {
                  "type": "Feature",
                  "geometry": {
                      "type": "LineString",
                      "properties": { "name": "天府大道" },
                      "coordinates": [
                          [104.06913702979529, 30.546739585129146],
                          [104.06907454389955, 30.54592791405807],
                          [104.06912588372228, 30.544417223111353],
                          [104.06914299695103, 30.542508560460377]
                      ]
                  }
              }
            ]
        };
对于非GeoJSON格式的数据，只要转换为GeoJSON格式，我们就可以愉快的渲染了！

创建数据解析器
const provider=new QE.GeoJSONFeatureProvider(jsonData);
创建样式

这里我们为点设置一个颜色和描边，设置点的大小为3像素，线条设置虚线样式，多边形设置一个阴影，在QE里面有非常多的效果可以设置，具体的可以查看图层清单中的说明或者参考API手册。

const style={
   point:{
       color:"red",
       size:3,
       strokeColor:"white"
   },
   polyline:{
       color:"yellow",
       width:3,
       dashArray:[5,5,5,5]
   },
   polygon:{
       color:"orange",
       shadowColor:"rgba(200,200,100,0.6)"
   }
 }

在设置点的颜色时，我们没有直接使用固定的颜色，而是使用了一个函数，QE中矢量样式绝大部分都是支持函数的方式动态设置的。

创建图层

图层=数据+样式

有了数据和样式，我们就可以创建图层了，在这里创建一个LGeoJSON图层，并添加到地图：

const layer=new QE.LGeoJSONLayer().setDataSource(provider).setDrawOptions(style);
layer.addTo(map);

现在刷新页面，可以发现一个红色的带描边的点，但是似乎没有看到线和多边形，因为我们地图开始的时候默认的中心和缩放级别并不合适，这里我们进行设置，仍然使用的是Leaflet自带的功能：

map.setView(L.latLng(30.543,104.0639),15);
三维下使用

三维中用法与二维几乎一致，只是用来渲染的图层名称有所区别，部分样式在三维中还不完全支持，具体请参考完整代码示例。

完整代码

最后也许你会发现，这里的效果直接使用Leaflet来实现似乎也并不复杂，是的,这个例子只是为了表达QE的最基本的加载方式，我们的矢量图层完全是基于Canvas重写的，并没有使用Leaflet自带的L.geoJSON的方式来实现，这样做的好处有：

  • 极高的性能。虽然我们使用Canvas2D渲染，但是在渲染过程中做了非常多的优化，可以轻松支持一万个点的实时渲染，如果有更高的需求，还可以后续升级到WebGL引擎来支持更高的性能。
  • 灵活的样式配置。这里只是使用的最基础的字面量来赋值，实际上我们还有很多灵活的配置方式，比如从配置文件加载、使用函数进行动态设置、基于分级规则进行分级渲染、使用loader进行预处理和后处理等等。
  • 支持碰撞检测。因为我们是完全重写，因此直接把这个特性增加进去了。
  • 支持图片渲染。图片和文字在我们的样式概念中没有太多的区别，都是可以直接设置的。
  • 更多精彩等你发现！
无评论
回到顶部