openLayer加载KML,画出省及省下的边界区域,并设置样式、各种标注及提示信息
最近在做气象的项目，项目要求使用地图显示气象数据。最开始使用百度地图实现了基本功能，后来改用openLayers，又改用静态图实现了，最终还是改用了openLayers实现。
openLayers研究了有将近10天的样子，基本功能终于实现了，在这期间也查了很多资料，感觉找些技术资料太费劲了，并且也遇到了一些好心的人，所以将自己做的东西分享一下。
由于是第一次使用播客，并且本人语文也很烂，讲的不清楚，请见量.
首先看下我实现的功能效果图：
实现过程：
1、首先通过百度地图里边的API，根据行政区域名称得到呼和浩特以及呼和浩特市下的9个行政区域的所有边界点，然后根据边界点数据编写KML文件，共10个KML文件，一个呼和浩特的，9个行政区域的。
2、然后通过openLayers分别加载这10个KML文件，其中呼和浩特市的Vector图层为基础图层，到此页面已经能够显示出呼和浩特市的基本行政区域图。
3、最后就是设置地图的样式，包括每一块的填充色，边框颜色、图片标注、提示信息、文本信息等。
下边是详细代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TMS示例</title></head><link rel="stylesheet" type="text/css" href="OpenLayer/theme/default/style.css"/><script src="OpenLayer/lib/OpenLayers.js" type="text/javascript"></script><script type="text/javascript">var lon = 111.6595458984375;//经度var lat = 40.50;//纬度var zoom = 9;var map, layer, markers;AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {'autoSize': true});function init(){var geographic = new OpenLayers.Projection("EPSG:4326");var geographic2 = new OpenLayers.Projection("EPSG:900913");map = new OpenLayers.Map('map',{numZoomLevels:12}); var bouchina = new OpenLayers.Layer.Vector("KML_huhehaote", {//加载呼和浩特市边界KML
projection: map.displayProjection,isBaseLayer: true,styleMap: new OpenLayers.StyleMap({pointRadius: 3,fillColor: "white",strokeColor: "black",strokeWidth: 2}),strategies: [new OpenLayers.Strategy.Fixed()],protocol: new OpenLayers.Protocol.HTTP({url: "kml/hhhtPro.kml",format: new OpenLayers.Format.KML({extractStyles: true, extractAttributes: true,maxDepth: 2})})});map.addLayer(bouchina);var hlgexVector = new OpenLayers.Layer.Vector("KML_hlgex", {//加载和林县边界KML
isBaseLayer: false,styleMap: new OpenLayers.StyleMap({pointRadius: 3,fillColor: "white",strokeColor: "black",strokeWidth: 2}),strategies: [new OpenLayers.Strategy.Fixed()],protocol: new OpenLayers.Protocol.HTTP({url: "kml/hlgex.kml",format: new OpenLayers.Format.KML({extractStyles: false, extractAttributes: false,maxDepth: 2})})});map.addLayer(hlgexVector);var hmqVector = new OpenLayers.Layer.Vector("KML_hmq", {//加载回民区边界KML
isBaseLayer: false,styleMap: new OpenLayers.StyleMap({pointRadius: 3,fillColor: "black",strokeColor: "black",strokeWidth: 2}),strategies: [new OpenLayers.Strategy.Fixed()],protocol: new OpenLayers.Protocol.HTTP({url: "kml/hmq.kml",format: new OpenLayers.Format.KML({extractStyles: false, extractAttributes: false,maxDepth: 2})})});map.addLayer(hmqVector);var qshxVector = new OpenLayers.Layer.Vector("KML_qshx", {//加载清水河边界KML
isBaseLayer: false,styleMap: new OpenLayers.StyleMap({pointRadius: 3,fillColor: "white",strokeColor: "black",strokeWidth: 2}),strategies: [new OpenLayers.Strategy.Fixed()],protocol: new OpenLayers.Protocol.HTTP({url: "kml/qshx.kml",format: new OpenLayers.Format.KML({extractStyles: false, extractAttributes: false,maxDepth: 2})})});map.addLayer(qshxVector);var shqVector = new OpenLayers.Layer.Vector("KML_shq", {//加载赛罕区边界KML
isBaseLayer: false,styleMap: new OpenLayers.StyleMap({pointRadius: 3,fillColor: "white",strokeColor: "black",strokeWidth: 2}),strategies: [new OpenLayers.Strategy.Fixed()],protocol: new OpenLayers.Protocol.HTTP({url: "kml/shq.kml",format: new OpenLayers.Format.KML({extractStyles: false, extractAttributes: false,maxDepth: 2})})});map.addLayer(shqVector);var tktxVector = new OpenLayers.Layer.Vector("KML_tktx", {//加载托克托县边界KML
isBaseLayer: false,styleMap: new OpenLayers.StyleMap({pointRadius: 3,fillColor: "white",strokeColor: "black",strokeWidth: 2}),strategies: [new OpenLayers.Strategy.Fixed()],protocol: new OpenLayers.Protocol.HTTP({url: "kml/tktx.kml",format: new OpenLayers.Format.KML({extractStyles: false, extractAttributes: false,maxDepth: 2})})});map.addLayer(tktxVector);var tzqVector = new OpenLayers.Layer.Vector("KML_tzq", {//加载土左旗边界KML
isBaseLayer: false,styleMap: new OpenLayers.StyleMap({pointRadius: 3,fillColor: "white",strokeColor: "black",strokeWidth: 2}),strategies: [new OpenLayers.Strategy.Fixed()],protocol: new OpenLayers.Protocol.HTTP({url: "kml/tzq.kml",format: new OpenLayers.Format.KML({extractStyles: false, extractAttributes: false,maxDepth: 2})})});map.addLayer(tzqVector);var wcxVector = new OpenLayers.Layer.Vector("KML_wcx", {//加载武川县边界KML
isBaseLayer: false,styleMap: new OpenLayers.StyleMap({pointRadius: 3,fillColor: "white",strokeColor: "black",strokeWidth: 2}),strategies: [new OpenLayers.Strategy.Fixed()],protocol: new OpenLayers.Protocol.HTTP({url: "kml/wcx.kml",format: new OpenLayers.Format.KML({extractStyles: false, extractAttributes: false,maxDepth: 2})})});map.addLayer(wcxVector);var yqqVector = new OpenLayers.Layer.Vector("KML_yqq", {//加载玉泉区边界KML
isBaseLayer: false,styleMap: new OpenLayers.StyleMap({pointRadius: 3,fillColor: "white",strokeColor: "black",strokeWidth: 2}),strategies: [new OpenLayers.Strategy.Fixed()],protocol: new OpenLayers.Protocol.HTTP({url: "kml/yqq.kml",format: new OpenLayers.Format.KML({extractStyles: false, extractAttributes: false,maxDepth: 2})})});map.addLayer(yqqVector);var xcqVector = new OpenLayers.Layer.Vector("KML_xcq", {//加载新城区边界KML
isBaseLayer: false,styleMap: new OpenLayers.StyleMap({pointRadius: 3,fillColor: "white",strokeColor: "black",strokeWidth: 2}),strategies: [new OpenLayers.Strategy.Fixed()],protocol: new OpenLayers.Protocol.HTTP({url: "kml/xcq.kml",format: new OpenLayers.Format.KML({extractStyles: false, extractAttributes: false,maxDepth: 2})})});map.addLayer(xcqVector);var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {styleMap: new OpenLayers.StyleMap({'default':{strokeColor: "white",strokeOpacity: 1,strokeWidth: 3,fillColor: "white",fillOpacity: 0.5,pointRadius: 6,pointerEvents: "visiblePainted",// label with \n linebreaks
label : "name: ${name}\n\nage: ${age}",fontColor: "${favColor}",fontSize: "12px",fontFamily: "Courier New, monospace",fontWeight: "bold",labelAlign: "${align}",labelXOffset: "${xOffset}",labelYOffset: "${yOffset}",labelOutlineColor: "white",labelOutlineWidth: 3}}),renderers: renderer});// create a point feature 添加一个文本标注var point = new OpenLayers.Geometry.Point(111.47,41.08).transform(geographic,map.getProjectionObject());var pointFeature = new OpenLayers.Feature.Vector(point);pointFeature.attributes = {name: "toto",age: 20,favColor: 'black',align: "cm",// positive value moves the label to the right
xOffset: 50,// negative value moves the label down
yOffset: -15};map.addLayer(vectorLayer);vectorLayer.addFeatures([pointFeature]);//添加图片标注及提示信息 这里使用的是弹出框的方式，没有使用图片标注
markers = new OpenLayers.Layer.Markers( "Markers" );map.addLayer(markers);popupClass = AutoSizeFramedCloud;popupContentHTML = '<img src="img/small.jpg"></img>';//popupContentHTML = '<di>fsdfsdfdsfdfdfsffsafasad</br>fsddafsdfdsafasa</div>';var lonlat1 = new OpenLayers.LonLat(111.65,40.75).transform(geographic,map.getProjectionObject());//玉泉区
addMarkerInfo(lonlat1, popupClass, popupContentHTML, true, true);var lonlat2 = new OpenLayers.LonLat(111.65,40.82).transform(geographic,map.getProjectionObject());//回民区
addMarkerInfo(lonlat2, popupClass, popupContentHTML, true, true);var lonlat3 = new OpenLayers.LonLat(111.89,40.84).transform(geographic,map.getProjectionObject());//赛罕区
addMarkerInfo(lonlat3, popupClass, popupContentHTML, true, true);var lonlat4 = new OpenLayers.LonLat(111.69,40.87).transform(geographic,map.getProjectionObject());//毫沁营乡
addMarkerInfo(lonlat4, popupClass, popupContentHTML, true, true);var lonlat5 = new OpenLayers.LonLat(111.15,40.68).transform(geographic,map.getProjectionObject());//土左旗
addMarkerInfo(lonlat5, popupClass, popupContentHTML, true, true);var lonlat6 = new OpenLayers.LonLat(111.70,40.75).transform(geographic,map.getProjectionObject());//呼市郊区站
addMarkerInfo(lonlat6, popupClass, popupContentHTML, true, true);var lonlat7 = new OpenLayers.LonLat(111.18,40.27).transform(geographic,map.getProjectionObject());//托县
addMarkerInfo(lonlat7, popupClass, popupContentHTML, true, true);var lonlat8 = new OpenLayers.LonLat(111.82,40.40).transform(geographic,map.getProjectionObject());//和林县
addMarkerInfo(lonlat8, popupClass, popupContentHTML, true, true);var lonlat9 = new OpenLayers.LonLat(111.47,41.08).transform(geographic,map.getProjectionObject());// 武川县
addMarkerInfo(lonlat9, popupClass, popupContentHTML, true, true);var lonlat10 = new OpenLayers.LonLat(111.67,39.92).transform(geographic,map.getProjectionObject());// 清水河
addMarkerInfo(lonlat10, popupClass, popupContentHTML, true, true);var lonlat11 = new OpenLayers.LonLat(111.80,40.83).transform(geographic,map.getProjectionObject());// 昭君博物院
addMarkerInfo(lonlat11, popupClass, popupContentHTML, true, true);var lonlat12 = new OpenLayers.LonLat(111.44,39.64).transform(geographic,map.getProjectionObject());// 老牛湾旅游景区
addMarkerInfo(lonlat12, popupClass, popupContentHTML, true, true);var lonlat13 = new OpenLayers.LonLat(110.99,40.63).transform(geographic,map.getProjectionObject());// 哈素海旅游区
addMarkerInfo(lonlat13, popupClass, popupContentHTML, true, true);var lonlat14 = new OpenLayers.LonLat(111.38,40.27).transform(geographic,map.getProjectionObject());// 托克托县电厂
addMarkerInfo(lonlat14, popupClass, popupContentHTML, true, true);var lonlat15 = new OpenLayers.LonLat(111.47,40.76).transform(geographic,map.getProjectionObject());// 金山开发区
addMarkerInfo(lonlat15, popupClass, popupContentHTML, true, true);var lonlat16 = new OpenLayers.LonLat(111.92,40.62).transform(geographic,map.getProjectionObject());// 蒙牛工业园区
addMarkerInfo(lonlat16, popupClass, popupContentHTML, true, true);var lonlat17 = new OpenLayers.LonLat(111.71,40.01).transform(geographic,map.getProjectionObject());// 中棚马铃薯基地
addMarkerInfo(lonlat17, popupClass, popupContentHTML, true, true);var lonlat18 = new OpenLayers.LonLat(111.99,40.50 ).transform(geographic,map.getProjectionObject());// 古城镇伊利奶牛场
addMarkerInfo(lonlat18, popupClass, popupContentHTML, true, true);map.setCenter(new OpenLayers.LonLat(lon, lat).transform(geographic,map.getProjectionObject()), zoom);map.addControl(new OpenLayers.Control.LayerSwitcher({})); //map.zoomToMaxExtent();
}function addMarkerInfo(ll, popupClass, popupContentHTML, closeBox, overflow) {var feature = new OpenLayers.Feature(markers, ll); feature.closeBox = closeBox;feature.popupClass = popupClass;feature.data.popupContentHTML = popupContentHTML;feature.data.overflow = (overflow) ? "auto" : "hidden";var marker = feature.createMarker();var markerClick = function (evt) {if (this.popup == null) {this.popup = this.createPopup(this.closeBox);//this为feature对象
map.addPopup(this.popup);this.popup.show();} else {this.popup.toggle();}currentPopup = this.popup;OpenLayers.Event.stop(evt);};marker.events.register("mousedown", feature, markerClick);markers.addMarker(marker);}</script><body onLoad="init()">
<div id="map" style="width:1000px; height:700px;background:url(middle_bg.png) repeat-y;"> </div></body>
</html>下面是呼和浩特市的KML文件：至于其他行政区域的9个KML文件都是通过百度地图的API里的Boundies类得到的，这里不再列出，coordinates标签里的所有坐标是通过百度地图API获得的所有边界点。在上面的地图中点击图标会出现提示信息。
<kml xmlns="http://earth.google.com/kml/2.0"><Folder><name>OpenLayers export</name><description>Exported on Tue Jan 08 2013 10:43:29 GMT+0800</description><Placemark><name>OpenLayers.Feature.Vector_2464</name><description>No description available</description><Polygon><outerBoundaryIs><LinearRing><coordinates>
112.122968, 39.983955 112.126747, 39.993288 112.138764, 40.004805 112.139713, 40.015134 112.148957, 40.033417 112.169523, 40.051103 112.192192, 40.095314 112.203892, 40.101958 112.232453, 40.13828 112.234073, 40.15887 112.240937, 40.178007 112.274457, 40.194075 112.304124, 40.216973 112.296302, 40.229852 112.307258, 40.23955 112.315369, 40.259393 112.309291, 40.279674 112.291974, 40.284777 112.298138, 40.312948 112.294215, 40.317854 112.283593, 40.322486 112.283662, 40.33147 112.272755, 40.334836 112.272884, 40.350287 112.277186, 40.360433 112.244985, 40.361647 112.249561, 40.373212 112.265669, 40.389639 112.250067, 40.413875 112.225738, 40.432578 112.223773, 40.452241 112.211093, 40.462162 112.185813, 40.473196 112.169793, 40.486561 112.161684, 40.501182 112.146316, 40.51356 112.131273, 40.516733 112.119338, 40.53246 112.094996, 40.542414 112.07733, 40.558288 112.060972, 40.562453 112.05718, 40.572715 112.064975, 40.588414 112.095, 40.587704 112.102595, 40.598118 112.103126, 40.604224 112.093159, 40.626498 112.046259, 40.653714 112.041071, 40.670396 112.081735, 40.670679 112.089353, 40.673704 112.111439, 40.662529 112.122031, 40.664427 112.118165, 40.691833 112.129527, 40.696584 112.137125, 40.706223 112.132366, 40.709344 112.12665, 40.722626 112.112793, 40.725576 112.111591, 40.737625 112.100276, 40.746417 112.109381, 40.753141 112.137629, 40.758183 112.158957, 40.770356 112.15831, 40.786786 112.164386, 40.801165 112.189896, 40.818478 112.190253, 40.83511 112.178381, 40.849109 112.182139, 40.853555 112.193619, 40.856337 112.170836, 40.882259 112.161636, 40.887122 112.172718, 40.906736 112.171241, 40.908821 112.164755, 40.908172 112.149835, 40.9211 112.151494, 40.945184 112.141478, 40.948856 112.142262, 40.954585 112.134511, 40.964791 112.102299, 40.954514 112.048364, 40.977642 112.040103, 40.988407 112.04214, 40.994935 112.026904, 41.00767 112.030257, 41.011726 112.025796, 41.018434 112.033079, 41.033346 112.043042, 41.042958 112.040687, 41.05404 112.028362, 41.056679 112.022166, 41.066089 112.011572, 41.071374 112.000418, 41.074652 111.991176, 41.069492 111.975622, 41.086582 111.949459, 41.095408 111.920303, 41.115358 111.902986, 41.120546 111.883761, 41.144397 111.878599, 41.157912 111.881768, 41.167974 111.87426, 41.176761 111.876666, 41.187026 111.869681, 41.197708 111.875382, 41.207894 111.87343, 41.215972 111.862922, 41.230157 111.853003, 41.225562 111.846456, 41.227153 111.847751, 41.25524 111.839292, 41.265413 111.812918, 41.264074 111.797887, 41.270355 111.782637, 41.281834 111.770946, 41.297167 111.745915, 41.295465 111.74063, 41.302255 111.741496, 41.312179 111.736454, 41.317024 111.640334, 41.306012 111.589622, 41.311818 111.55603, 41.323513 111.548776, 41.332688 111.540971, 41.336755 111.531601, 41.33708 111.518622, 41.33143 111.505929, 41.331907 111.503931, 41.337679 111.498873, 41.340629 111.486718, 41.339243 111.476343, 41.330073 111.456524, 41.337317 111.439375, 41.326038 111.419643, 41.324125 111.403839, 41.317643 111.395177, 41.322202 111.394182, 41.331004 111.384225, 41.329834 111.379339, 41.319004 111.362046, 41.3183 111.34098, 41.296998 111.317279, 41.305418 111.304089, 41.303068 111.300265, 41.298492 111.286493, 41.29558 111.289008, 41.285975 111.278013, 41.27735 111.261189, 41.275713 111.262694, 41.26938 111.272861, 41.25966 111.271322, 41.254336 111.257064, 41.251279 111.246821, 41.242659 111.230879, 41.2555 111.193531, 41.271979 111.168535, 41.279624 111.160447, 41.289118 111.128952, 41.300433 111.125154, 41.304073 111.126674, 41.309235 111.093605, 41.314367 111.087306, 41.310607 111.059676, 41.309042 111.036144, 41.323607 111.028692, 41.336503 111.012905, 41.340374 111.005559, 41.339409 111.002882, 41.344196 110.996267, 41.344489 110.987695, 41.352413 110.981021, 41.352349 110.971347, 41.345633 110.967426, 41.332242 110.953864, 41.321742 110.932375, 41.319406 110.918695, 41.322418 110.89604, 41.34243 110.895667, 41.347871 110.874085, 41.362939 110.841897, 41.36613 110.828279, 41.387064 110.821946, 41.391308 110.77618, 41.382969 110.766731, 41.38557 110.751987, 41.384789 110.739086, 41.391719 110.73165, 41.390951 110.724278, 41.384474 110.713857, 41.380782 110.705662, 41.367702 110.663044, 41.34591 110.653744, 41.332046 110.644813, 41.325543 110.616681, 41.324231 110.60608, 41.325863 110.595372, 41.333003 110.581266, 41.333075 110.575979, 41.328732 110.580951, 41.32043 110.580386, 41.312713 110.560277, 41.294777 110.537382, 41.301907 110.52509, 41.298391 110.526089, 41.292869 110.540224, 41.282123 110.571177, 41.268493 110.567032, 41.257844 110.570347, 41.247382 110.565757, 41.240076 110.569072, 41.229099 110.588428, 41.222488 110.606769, 41.22519 110.610871, 41.223304 110.626383, 41.201303 110.632264, 41.174441 110.653251, 41.162475 110.653898, 41.108565 110.660814, 41.101824 110.672228, 41.070981 110.684945, 41.061096 110.664073, 41.043476 110.669329, 41.034796 110.664152, 41.02652 110.666868, 41.014298 110.661187, 41.012501 110.651029, 40.999941 110.633064, 40.991352 110.63296, 40.966078 110.639006, 40.939959 110.652852, 40.925548 110.663793, 40.926545 110.668305, 40.924028 110.689903, 40.935203 110.699519, 40.932619 110.708775, 40.934346 110.719205, 40.94364 110.728687, 40.944934 110.732129, 40.943147 110.731006, 40.936382 110.751101, 40.926593 110.749071, 40.919364 110.752532, 40.912809 110.744545, 40.903329 110.74544, 40.893532 110.737373, 40.889251 110.735393, 40.877549 110.729554, 40.870734 110.737187, 40.868659 110.742462, 40.862435 110.737674, 40.838521 110.741373, 40.832326 110.735798, 40.831037 110.727362, 40.822341 110.716358, 40.82308 110.712613, 40.817575 110.719286, 40.814801 110.718411, 40.810098 110.724541, 40.807171 110.728796, 40.797604 110.738193, 40.792977 110.746589, 40.794341 110.75862, 40.803848 110.76812, 40.79873 110.780525, 40.80154 110.7925, 40.796587 110.788063, 40.791994 110.795356, 40.787536 110.802495, 40.768655 110.797487, 40.75963 110.802863, 40.752236 110.799412, 40.7315 110.815623, 40.7143 110.810052, 40.701817 110.802411, 40.702868 110.795759, 40.693141 110.806994, 40.678631 110.812014, 40.662265 110.810024, 40.633404 110.790795, 40.62324 110.791776, 40.621022 110.796409, 40.617567 110.807193, 40.617249 110.822016, 40.602926 110.830604, 40.60039 110.862673, 40.601702 110.867187, 40.599166 110.873078, 40.576993 110.857679, 40.563551 110.85819, 40.54046 110.863969, 40.528193 110.89045, 40.512348 110.908114, 40.497625 110.911941, 40.495996 110.952206, 40.499062 110.963097, 40.495731 110.967688, 40.491776 110.972649, 40.476108 111.014943, 40.465519 111.030185, 40.454585 111.045652, 40.449277 111.034663, 40.436784 111.041052, 40.429083 111.100554, 40.435381 111.094643, 40.429025 111.094798, 40.413748 111.108952, 40.390963 111.128241, 40.381857 111.12851, 40.355116 111.109732, 40.339406 111.073779, 40.330017 111.037804, 40.307608 111.038208, 40.302458 111.055587, 40.301366 111.055899, 40.274282 111.061234, 40.270362 111.094956, 40.268149 111.123684, 40.261029 111.198745, 40.220521 111.220151, 40.190896 111.245462, 40.173805 111.284075, 40.167128 111.321796, 40.15412 111.343275, 40.125413 111.362041, 40.112955 111.387512, 40.082857 111.403489, 40.05548 111.417956, 40.050157 111.417728, 40.039627 111.42474, 40.030741 111.430979, 40.013435 111.427748, 40.005344 111.434761, 39.954895 111.445299, 39.948563 111.447939, 39.933905 111.452967, 39.9263 111.4475, 39.917071 111.451263, 39.903999 111.432602, 39.892712 111.424045, 39.875374 111.419774, 39.852967 111.424849, 39.839395 111.423443, 39.834303 111.416239, 39.831532 111.405345, 39.831993 111.406582, 39.809425 111.379163, 39.798619 111.383019, 39.780563 111.368092, 39.765479 111.363925, 39.753322 111.366418, 39.737526 111.382583, 39.725551 111.385285, 39.71619 111.399623, 39.712217 111.412806, 39.695414 111.448102, 39.678369 111.445535, 39.672001 111.433967, 39.673479 111.429467, 39.671622 111.430746, 39.664424 111.444466, 39.648388 111.457725, 39.64916 111.497888, 39.666272 111.518272, 39.66957 111.53192, 39.668067 111.5531, 39.659157 111.566624, 39.659449 111.576617, 39.649084 111.592856, 39.651327 111.602219, 39.64979 111.625062, 39.639249 111.631695, 39.639836 111.638259, 39.647213 111.65346, 39.65014 111.708224, 39.631388 111.729098, 39.612383 111.745874, 39.609245 111.768833, 39.59958 111.782168, 39.599597 111.790202, 39.594605 111.810228, 39.60345 111.842105, 39.626412 111.876238, 39.618357 111.885492, 39.61176 111.891984, 39.618336 111.898721, 39.617791 111.90866, 39.622881 111.919344, 39.619139 111.925611, 39.621607 111.934777, 39.616302 111.944787, 39.629274 111.943639, 39.634571 111.936587, 39.637785 111.944374, 39.650824 111.93294, 39.66237 111.930474, 39.671654 111.948001, 39.687239 111.96186, 39.693474 111.976405, 39.718306 111.970905, 39.731609 111.977306, 39.772299 111.973886, 39.788968 111.976931, 39.802713 111.987792, 39.807655 112.012454, 39.826559 112.040894, 39.858948 112.048362, 39.878248 112.049107, 39.892034 112.057243, 39.904843 112.077237, 39.917942 112.098885, 39.958873 112.122968, 39.983955
</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark></Folder></kml>
在做地图的过程中还实现了添加文本标注。
注意：如果没有把该页面放在服务器中进行访问，加载KML还是GML文件，在IE中会出现拒绝访问的问题，但是在firefox上显示正常。
如果出现拒绝访问，请将该页面放在服务器上进行访问，比如本人是做java web的，我会建立一个webProject，然后把相关文件放在工程下，加载到tomcat上，然后启动服务器进行访问。
源码下载地址:http://files.cnblogs.com/song555/weatherMap.rar (不好意思,一直未提供,因为总是静不下心)
转载于:https://www.cnblogs.com/song555/archive/2013/01/12/2857732.html
openLayer加载KML,画出省及省下的边界区域,并设置样式、各种标注及提示信息相关推荐
- 第5章【思考与练习2】将数据集划分为训练集与测试集，查看决策树分类器的性能。 将例5-3中的分类器保存到文件中，然后重新加载预测给出的新数据。
P101思考与练习2 1.将数据集划分为训练集与测试集,查看决策树分类器的性能. #1. #划分为测试集与训练集 import pandas as pd data = pd.read_csv('dat ...
- 正在载入java_如何实现程序加载时弹出正在加载对话框
我们做的很多应用程序,很多功能都需要较长的加载时间,比如下载功能,转换页面等等.在程序进行后台处理的时候,前台的ui是没有反应的.如果在这段时间内我们不作任何处理就让程序停在那的话.第一,用户体验会很 ...
- mysql导出kml,加载KML文件到MySQL/XPath和X奎雷斯
你好IM跨越了几个问题来上加载一个大型KML文件 我本来用冷聚变,但它只是无法处理大量的XML/KML文件加载KML文件到MySQL/XPath和X奎雷斯 所以我以为ID使用PHP给它一个bash我是 ...
- PyQt5（一）：加载图片画框框并保存
PyQt5(一):加载图片画框框并保存 环境 设计界面 重写QLabel 主函数 效果 参考 环境 Win10 PyCharm2019 社区版 PyQt5 Qt Designer 设计界面 使用Qt ...
- 使用OpenLayer加载百度地图（无偏移）
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...
- python 画出决策边界_python 画出使用分类器得到的决策边界
python 画出使用分类器得到的决策边界 发布时间:2020-09-25 21:10:09 来源:脚本之家 阅读:113 作者:星之空殇 获取数据集,并画图代码如下: import numpy as ...
- openlayer加载矢量切片
数据是GIS的灵魂,没有数据也就谈不上GIS了,数据分为矢量数据和栅格数据,栅格数据也有一些短处,缺乏灵活性.实时性,数据完整性受损是比较突出的问题,矢量数据不同于栅格数据,比较灵活,数据完整,将两者 ...
- openlayer 加载4547坐标系 以及 wfs服务数据（或其他坐标系）
1.首先查看坐标系基础信息如范围等:如下图: 2.若将地图设置成4547坐标系: 核心代码: proj4.defs("EPSG:4547","+proj=tmerc +l ...
- html 弹出加载页面,magnific popup：将整个html页面加载到弹出窗口中
我想用弹出的插件在弹出窗口中加载一个完整的html页面.如果我尝试: Edit images $('#edit-images-btn').magnificPopup({ type: 'ajax' }) ...
最新文章
- h5 一镜到底_传说中的一镜到底效果，到底是怎么玩的？
- 数论题目入门 基础积攒
- Android逆向之路---脱壳360加固
- 如何清除word复制过来的文字背景色的好方法？
- http 使用curl发起https请求
- spring学习（40）:注入数组类型
- python连接impala_python连接impala（安装impyla）
- Objective C 总结（十）：Conventions
- 云网络的守护神：主动链路监控
- 智能门禁（6）---调用face++实现人脸检测
- matplotlib color 参数
- Toggle和Slider组件
- nmea怎么转wgs84坐标c语言源码,NMEA-0813数据格式说明
- WEP密码破解BT3-spoonwep2教程及下…
- matlab 求导的一个简单程序
- 计算机中.dll文件检查,在电脑中查看并打开dll文件类型的具体方法
- 国内先进的光电转换器件设计和单光子检测成像技术 1DTof 3DTof 激光测距传感器
- xgene：WGS，突变与癌，RNA-seq，WES
- 在上海，你可以直接用高德地图打一辆无人驾驶出租车去上班了
- Vue.js实战——表单与v-model