openlayers+geojson

投影, projection: new OpenLayers.Projection(“EPSG:4326”)//900913

要么不要,要么是4326,不然绘制的json对象不会显示。

最后一句   map.zoomToMaxExtent();

必须加,不然地图不能缩放。

如果用gmap第三版,用IE,会出现vector图层和底图拖动不一致的情况,第二版不会。

tmd,openlayers调googlemap,总是会出这样那样的问题。

/**
 * 使用了openlayers、xuhy.VT.js,
 */
var xuhy = xuhy ? xuhy : {};
xuhy.Map = xuhy.Map ? xuhy.Map
: {

   Map: function() {
       var _this = this;
       var gmap,styles,map, draw, modify, snap, split, vectors;
       _this.Fix = function(number, num) {
           with (Math) return round(number.valueOf() * pow(10, num)) / pow(10, num);
       };
       _this.Initialize = function() {
           try {
               OpenLayers.DOTS_PER_INCH = 72; //90.71428571428572;//25.4 / 0.28
               OpenLayers.Util.onImageLoadErrorColor = ‘transparent’;
               OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
               OpenLayers.INCHES_PER_UNIT[“公里”] = OpenLayers.INCHES_PER_UNIT[“km”];
               OpenLayers.INCHES_PER_UNIT[“米”] = OpenLayers.INCHES_PER_UNIT[“m”];
               OpenLayers.INCHES_PER_UNIT[“尺”] = OpenLayers.INCHES_PER_UNIT.m / 3.0;
               styles = new OpenLayers.StyleMap({
                   “default”: new OpenLayers.Style(null, {
                       rules: [
                        new OpenLayers.Rule({
                            symbolizer: {
                                “Point”: {
                                    pointRadius: 5,
                                    graphicName: “square”,
                                    fillColor: “white”,
                                    fillOpacity: 0.25,
                                    strokeWidth: 1,
                                    strokeOpacity: 1,
                                    strokeColor: “#3333aa”
                                },
                                “Line”: {
                                    strokeWidth: 3,
                                    strokeOpacity: 1,
                                    strokeColor: “#6666aa”
                                },
                                “Polygon”: {
                                    strokeWidth: 1,
                                    strokeOpacity: 1,
                                    fillColor: “#9999aa”,
                                    strokeColor: “#6666aa”
                                }
                            }
                        })
                      ]
                   }),
                   “select”: new OpenLayers.Style(null, {
                       rules: [
                        new OpenLayers.Rule({
                            symbolizer: {
                                “Point”: {
                                    pointRadius: 5,
                                    graphicName: “square”,
                                    fillColor: “white”,
                                    fillOpacity: 0.25,
                                    strokeWidth: 2,
                                    strokeOpacity: 1,
                                    strokeColor: “#0000ff”
                                },
                                “Line”: {
                                    strokeWidth: 3,
                                    strokeOpacity: 1,
                                    strokeColor: “#0000ff”
                                },
                                “Polygon”: {
                                    strokeWidth: 2,
                                    strokeOpacity: 1,
                                    fillColor: “#0000ff”,
                                    strokeColor: “#0000ff”
                                }
                            }
                        })
                    ]
                   }),
                   “temporary”: new OpenLayers.Style(null, {
                       rules: [
                        new OpenLayers.Rule({
                            symbolizer: {
                                “Point”: {
                                    graphicName: “square”,
                                    pointRadius: 5,
                                    fillColor: “white”,
                                    fillOpacity: 0.25,
                                    strokeWidth: 2,
                                    strokeColor: “#0000ff”
                                },
                                “Line”: {
                                    strokeWidth: 3,
                                    strokeOpacity: 1,
                                    strokeColor: “#0000ff”
                                },
                                “Polygon”: {
                                    strokeWidth: 2,
                                    strokeOpacity: 1,
                                    strokeColor: “#0000ff”,
                                    fillColor: “#0000ff”
                                }
                            }
                        })
                    ]
                   })
               });

           } catch (e) {
               throw new Error(“Initialize->:\n” + e.name + “:” + e.message)
           }
       };

       _this.MousePositionFormatOutput = function(lonLat) {
           var templon = “东经:”
           var templat = “北纬:”
           if (lonLat.lon < 0) {
               templon = “西经:”;
           }
           if (lonLat.lat < 0) {
               templat = “南纬:”
           }
           templon += _this.Fix(Math.abs(lonLat.lon), 4);
           templat += _this.Fix(Math.abs(lonLat.lat), 4);
           return templon + “,” + templat;
       };

       //加载google地图
       _this.loadMap = function() {
       try {
           var options = {

               controls: [
       new OpenLayers.Control.Navigation(),
new OpenLayers.Control.MousePosition({formatOutput: _this.MousePositionFormatOutput}),
new OpenLayers.Control.LayerSwitcher()
, new OpenLayers.Control.PanZoomBar()//
               , new OpenLayers.Control.OverviewMap({ maximized: true })
               , new OpenLayers.Control.ScaleLine({ topOutUnits: “公里”, topInUnits: “米”, bottomOutUnits: “米”, bottomInUnits: “尺” })
   ]
               //,allOverlays: true
                   , projection: new OpenLayers.Projection(“EPSG:4326”)//900913
                   , displayProjection: new OpenLayers.Projection(“EPSG:4326”)
                   , units: “m”
                   , maxResolution: 156543.034
                   , maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)//20037508.34

           };
           map = new OpenLayers.Map(‘map’, options);
               gmap =  new OpenLayers.Layer.Google(
                   xuhy.Map.MapName_Road, // the default
                   {numZoomLevels: 20
                   , isBaseLayer: true }
               );
                       map.addLayer(gmap);

               // create three vector layers
               vectors = new OpenLayers.Layer.Vector(“Lines”, {
                  
                   strategies: [new OpenLayers.Strategy.Fixed()],
                   protocol: new OpenLayers.Protocol.HTTP({
                       url: “../data/test.json”,
                       format: new OpenLayers.Format.GeoJSON()
                   }),
                   styleMap: styles
                  // ,maxExtent: new OpenLayers.Bounds(1549471.9221, 6403610.94, 1550001.32545, 6404015.8)
               });
               map.addLayer(vectors);

               map.zoomToMaxExtent();
           } catch (e) {
               throw new Error(“loadMap->:\n” + e.name + “:” + e.message)
           }
       };

   }

}

// 文档初始化
$(document).ready(function() {
   try {
       //
document.body.clientWidth;// ==> BODY对象宽度 
       var newheight = document.documentElement.clientHeight – 2; // ==> BODY对象高度 
       document.getElementById(“map”).style.height = newheight + ‘px’;
       //alert(“create map”);
       var MapInstance = new xuhy.Map.Map();
       MapInstance.Initialize();
       MapInstance.loadMap();

   } catch (e) {
       alert(“初始化出错:\n” + e.name + “:” + e.message)
   }
});
 /*
 
               // configure the snapping agent
               snap = new OpenLayers.Control.Snapping({ layer: vectors });
               map.addControl(snap);
               snap.activate();

               // configure split agent
               split = new OpenLayers.Control.Split({
                   layer: vectors,
                   source: vectors,
                   tolerance: 0.0001,
                   eventListeners: {
                       aftersplit: function(event) {
                           flashFeatures(event.features);
                       }
                   }
               });
               map.addControl(split);
               split.activate();

               // add some editing tools to a panel
               var panel = new OpenLayers.Control.Panel({
                   displayClass: “olControlEditingToolbar”
               });
               draw = new OpenLayers.Control.DrawFeature(
                vectors, OpenLayers.Handler.Path,
                { displayClass: “olControlDrawFeaturePoint”, title: “Draw Features” }
            );
               modify = new OpenLayers.Control.ModifyFeature(
                vectors, { displayClass: “olControlModifyFeature”, title: “Modify Features” }
            );
               panel.addControls([
                new OpenLayers.Control.Navigation({ title: “Navigate” }),
                draw, modify
            ]);
               map.addControl(panel);

               map.addControl(new OpenLayers.Control.MousePosition());
               */

转载自:https://blog.csdn.net/xuhaiyan8825/article/details/6957863

You may also like...