OpenLayers学习笔记中级篇（二、对矢量地图的操作）

最新推荐文章于 2023-05-14 23:12:10 发布

原创

最新推荐文章于 2023-05-14 23:12:10 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了在OpenLayers中如何操作json格式的矢量地图数据。首先讲解了如何获取矢量地图features的数量，强调了因异步加载需通过事件监听确保数据完整。接着展示了如何改变features的样式，通过设置layer样式实现地图颜色变化，同时也提到可直接设置features样式但相对复杂。

这一节我们主要对上一节我们加载的json格式的矢量地图数据进行一些操作。首先我们来看一下如何获取矢量地图的一些features。话不多说，直接上代码：

1、获取features：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>OpenLayers 3地图加载</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>

<body>
	<div>矢量地图Feature总数： <span id="count"></span></div>
    <div id="map" style="width: 100%"></div>
	
	
	
	<script type="text/javascript">
		var bounds = [73.62004852302096, 3.8378885148431436,
                    134.7684631352655, 53.553741455004214];

    	//创建地图
	    var map = n