GIS (Iv.)--Add boundary +marker and brand's final beautification version for JS version of Sogou map

In the "GIS (third)--optimize the JS version of the Sogou map brand sign style," shared the brand style changes. Now take these several marker and brand changes to beautify again, counted as an ultimate optimized version of it.

The main content of this optimization is:

1. Add a boundary for the entire operational area
2. Change a dynamic picture for marker
3. Replace translucent red images for brand
4. Show only one brand, switch every 3 seconds

1. Draw Boundariesfirst do the first bar, on the Sogou map to add the border, is a very simple, very basic, but very user-friendly function. In the example code of the official website, the 21st example code of the overlay, "draw polygon area, edge auto-close Example", explains how to draw a polygon area on a map. Once you have given a few coordinate points, the Polygon object will automatically close the last side. Click here for a description of the Polygon class in the crossing network. Here is the key code in the instance:

you can see that the new object is a polygon, where the path parameter is an ordered sequence of polygon coordinates, which is plainly an array of coordinates. Strokecolor is the border border color, and strokeopacity is the opacity of the bounding border, with a value of 0.0-1.0. Strokeweight is the width of the border border. FillColor is the middle fill color,Fillopacity is the opacity of the filled part, and the same value range is 0.0-1.0. does it look very simple? The following code is the border coordinates I set for Haidian District, Beijing:

   Loading Haidian District boundary coordinate data function Loadbound () {b = [{x:12924312.5,y:4842937.5}, {x:12921625,y:4842750}, {x:12919812.5,y:484706  2.5}, {x:12919375,y:4849437.5}, {x:12918625,y:4849937.5}, {x:12918000,y:4850937.5},//{x:}, {x:12919750,y:4854187.5}, {x:12920625,y:4856187.5}, {x:12922000,y:4856250}, {x:12927062.5,y:4854812.5}, {x : 12927375,y:4855937.5},//{x:}, {x:12931312.5,y:4856437.5}, {x:12931000,y:4858500}, {x:12933 000,y:4861187.5}, {x:12934812.5,y:4861375}, {x:12935875,y:4858375}, {x:12936812.5,y:4858687.5}, {X:12938437.5,y : 4858000},//{x:}, {x:12940062.5,y:4857812.5}, {x:12939187.5,y:4853875}, {x:12941000,y:48532                      {x:12941062.5,y:4854437.5}, {x:12941937.5,y:4853562.5}, {x:12941562.5,y:4852625},//{x: }, {x:12943125,y:4851000}, {x:12943687.5,y:4849812.5}, {x:12944812.5,y:4850375}, {x:12946000,y:4847187.5}, {x : 12949062.5,y:4846000}, {x:12951687.5,y:4847562.5}, {x:12952812.5,y:4848000},//{x:}, {x:12954750,y:4847000}, {x:12953312.5,y:4845625}, {x:1 2955812.5,Y:4844250}, {x:12956062.5,y:4842937.5}, {x:12951500,y:4841937.5}, {x:12954687.5,y:4836187.5}, {x : 12954875,y:4833375},//{x:}, {x:12953718.75,y:4833406.25}, {x:12953906.25,y:4830593.75}, {x : 12952156.25,y:4830125}, {x:12952062.5,y:4831281.25}, {x:12951593.75,y:4831156.25}, {x:12951625,y:4829812.5},//{x :}, {x:12949000,y:4829750}, {x:12949500,y:4829156.25}, {x:12949875,y:4824531.25}, {x:12949656.25                      , y:4823187.5}, {x:12947187.5,y:4823187.5}, {x:12945343.75,y:4821718.75}, {x:12945375,y:4823156.25},//{x: }, {x:12940718.75,y:4823187.5}, {x:12940687.5,y:4825937.5}, {x:12940375,y:4826125}, {x:12940625,y:4826781 . +}, {x:12938031.25,y:4826375}, {x:12936031.25,y:4826031.25}, {x:12935718.75,y:4826281.25}, {X:12935656.25,y                      : 4827187.5},//{x:}, {x:12936375,y:4827593.75}, {x:12936250,y:4828437.5}, {x:12936468.75,y:4830000}, {x:12936156.25,y:4830062.5}, {x   : 12935031.25,y:4831312.5}, {x:12933843.75,y:4833156.25}, {x:12933187.5,y:4833718.75},//{x:}, {x:12933000,y:4836031.25}, {x:12932406.25,y:4836312.5}, {x:12931250,y:4835125}, {x:12930937.5,y:4836718.75}, {x : 12929968.75,y:4836437.5}, {x:12928843.75,y:4837406.25}, {x:12930906.25,y:4838437.5}, {x:12931250,y:4839375}, {x : 12928375,y:4842031.25}]}

With the coordinates and the key code above, write a funciton that draws the boundary on the map:

Load Boundary  function Addbound () {    var trianglecoords = [];    for (Var i=0;i<b.length;i++) {      Trianglecoords.push (new Sogou.maps.Point (B[I].X,B[I].Y));    }    var bermudatriangle = new Sogou.maps.Polygon ({        path:trianglecoords,        strokecolor: "#7CCD7C",        strokeopacity:0.8,        strokeweight:3,        fillcolor: "#7CFC00",        fillopacity:0.35      });     Bermudatriangle.setmap (map);  }

This makes it possible to draw the border of the Haidian district on the map as soon as it is called.2. Change marker dynamic PictureThis is very simple, if you forget, just look back to the "GIS (a)--in the JS version of the search map add marker mark" This article, you can complete. In fact, when generating marker, the image parameter can be set. The animated picture to be set is as follows:
the modified Addmarker method is as follows (I put the picture on the Internet):

  Load tag   function Addmarker () {for    (var i=0;i<p.length;i++) {      var point = new Sogou.maps.Point (p[i].x,p[i ].Y);      Add an icon      var image = ' http://mfxuan.free.800m.net/blogImage/red.gif ';      var marker = new Sogou.maps.Marker ({        position:point,        map:map,        title:p[i].title,        icon:image,        visible:true      });      Markers.push (marker);    }  }

3. Replace brand Translucent imageThis is also very simple, if you forget, read this article "GIS (ii)--in the JS version of Sogou map add brand sign." Since the last time it was set to point to different sights, it looked very messy, so I decided to notify the arrows upwards. The modified picture is as follows:
Modify the Addbrand method, set the parameter to Get_up_spirit (), and set the love for that visible to false first, as you will see later.

  Load token  function Addbrand () {for    (var i=0;i<p.length;i++) {      var brand = new Sogou.maps.Brand ({        Position:new Sogou.maps.Point (P[I].X,P[I].Y),        Map:map,        spirit:get_up_spirit ()        , content:p[i].title+ " <br/> City: Beijing "        //whether visible, default, default is True        , Visible:false        //Specifies that the content area has a fixed width of 80, if not specified, it will automatically adapt to the content size       , Fixsize:new sogou.maps.Size (80,0)        //Specify CSS,CSS to be defined in the style sheet beforehand        , CSS: "brand"    });    Brands.push (brand);//Add the generated brand to the brands array    }  }

also modifyGet_up_spirit method, sets the background image, and adjusts the anchor to move down by 7 pixels. This is because modified the marker picture, in order to prevent mutual occlusion, the picture is moved down the whole.

  Arrow up  function Get_up_spirit () {    var spirit={        url: "Http://mfxuan.free.800m.net/blogImage/22.png",        imgsize:[140,87],        clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[105,53,33,13]],        anchor:[17,-7],        FOOTOFFSET:[0,-63]    }    return spirit;  }

4. Set the signage switchThe sign is unified upward, each other must be obscured. So to avoid clutter, you can display only one brand message at a time, and then switch after a few seconds. This is the perfect solution to the problems encountered earlier. The method of modification is simple, in the Addbrand method, set all the visible of brand to False, add a ChangeView method to change the Visible property of brand dynamically, or directly call Hide () and show () To control the display:

  Show the content of a certain attraction  function ChangeView () {    ////Due to new brand, Visible=false,div is hidden, so all brand Div displays    $ (". Brand "). Parent (). Parent (). CSS (" Display "," block ");    Toggle sign for    (var i=0;i<brands.length;i++) {      brands[i].setzindex ();      Brands[i].hide ();//All Hidden    }    if (brandid<brands.length) {        brands[brandid].show ();//Display      brands[ Brandid].setzindex (a);        Brandid = (brandid+1)% Brands.length;    }}

Of course, you first define a variable to store which brand is currently displayed:

  var brandid=0;//records the currently displayed brand

Finally, modify the initialization method initialize, and add the method on this side to call:

  Initialize data  function Initialize () {//maps the map in the Haidian area    var point = new Sogou.maps.Point (12939000,4840250);    var myoptions = {      zoom:11,      center:point    }    //load and initialize map    = new Sogou.maps.Map ( document.getElementById ("Map_canvas"), myoptions);    Load attraction coordinates value  loadscenic ();      Load boundary coordinate value    loadbound ();        Load attraction Mark    addmarker ();        Add attraction sign    addbrand ();        Immediately displays a    changeview ();        Every 3 seconds, switch attractions show    setinterval (changeview,1000*3);        Load Boundary    addbound (map);  }

The whole thing came out:
(click here to view on the website)
to this JS version of Sogou map 2 simple functions on the introduction is complete. Next I will do a function of interactive query, please look forward to.

GIS (Iv.)--Add boundary +marker and brand's final beautification version for JS version of Sogou map