OpenLayers根据两点连线

我会带着你远行 2022-08-20 12:25 490阅读 0赞

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>根据经度纬度连线</title>
        <link rel="stylesheet" href="OpenLayers-2.13/theme/default/style.css" type="text/css">
    	<script src="OpenLayers-2.13/lib/OpenLayers.js" type="text/javascript"></script>
      </head>
      <body>
      	<div id="map" class="smallmap"></div>
      	<script type="text/javascript">
      		/*
      		OpenLayers.Feature.Vector构造方法有三个参数：geometry、attributes、style。
      		geometry：此功能表示的几何图形。
      		OpenLayers.Geometry.fromWKT：给定一个给定的文本字符串的几何结构。它的参数为String,一个表示已知文本的几何结构的字符串。
      		OpenLayers.Geometry.LineString：一个线是一条曲线，一旦两点已被添加到它，不能少于二点长。构造方法为points，用于生成线点的数组。
      		*/
      		var points="-90 90,90 -90,100 50,150 80.66666";
      		var features=[
      			new OpenLayers.Feature.Vector(
      				OpenLayers.Geometry.fromWKT("LineString("+points+")"))
        	];
        	var layer=new OpenLayers.Layer.Vector(null, 
        	{
        		styleMap:new OpenLayers.StyleMap(
        		{
            		strokeWidth:1,
            		strokeColor:"blue"
        		}),
        		isBaseLayer: true,  //该层是基层。默认为假
        		renderers:["Canvas"], //支持的渲染器类的列表
        		rendererOptions:{hitDetection:true}  //允许点击检测功能
    		});
    		layer.addFeatures(features);
    		var map=new OpenLayers.Map(
    		{
    			div: "map",
        		layers: [layer],
        		center: new OpenLayers.LonLat(0, 0),
        		zoom: 0
    		});
    	</script>
      </body>
    </html>

所需的OpenLayers可以从这里下载：[Openlayers][]

实现效果如下图所示：

![20160228115141484][]

[Openlayers]: http://download.csdn.net/download/asuyunlong/9446561
[20160228115141484]: /images/20220731/fd206f81512941a1b5ce366327a3854a.png