openlayers

OpenLayers根据两点连线

by giser · 2019-04-03

<%@ 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

实现效果如下图所示：

转载自：https://blog.csdn.net/asuyunlong/article/details/50759423

相关推荐

Tags: openlayers

You may also like...