GIS (4) -- add borders + the final simplified version of Marker and Brand for the js sogou map, gismarker

GIS (4) -- add borders + the final simplified version of Marker and Brand for the js sogou map, gismarker

In GIS (III)-brand logo style for optimizing sogou map of js edition, I shared my changes to Brand style. Now, let's unify the changes made to the Marker and Brand, and then make them a final optimized version.

The main content of this optimization is:

1. Create a boundary first. Adding a boundary to a sogou map is a simple, basic, but user-friendly function. In the instance code on the official website, the 21st sample code of the overlay layer, "Draw a polygon area and auto-Close side example", explains how to draw a polygon area on a map. Given just a few coordinate points, the Polygon object will automatically close the last side. Click here to see instructions on the Polygon class on the official website. The following is the key code in the instance:

We can see that a new Polygon object is displayed. The path parameter is the ordered sequence of the Polygon coordinate. To put it bluntly, it is a coordinate array. StrokeColor indicates the border color, and strokeOpacity indicates the opacity of the border. The value ranges from 0.0 to 1.0. StrokeWeight is the Border width. FillColor is the fill color in the middle, and fillOpacity is the opacity of the fill part. The value range is also 0.0-1.0. Is it easy. The following code sets the border coordinates of Haidian District, Beijing:

// Load the Boundary Coordinate data function loadBound () {B = [{x: 12924312.5, y: 4842937.5}, {x: 12921625, y: 4842750}, {x: 12919812.5, y: 4847062.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: 12933000, 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: 4853250 },{ 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: 12955812.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.25 },{ 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 coordinates, combined with the key code above, write a funciton that draws the boundary on the map:

// Load the 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 );}

In this way, you can draw the border of Haidian District on the map. 2. changing the Marker dynamic image is easy. If you forget it, you just need to look back at the article GIS (1)-Add the Marker mark on the js search map. You can set the image parameter when generating a Marker. The dynamic image to be set is as follows:
The addmarker method modified is as follows (I put the image online ):

// Load the 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. It's easy to change the Brand translucent image. If you forget it, read this article GIS (II)-Add the brand sign to the sogou map of the js version. Since the previous setting pointed to different scenic spots and looked very messy, I decided to move the notification arrow up. The modified image is as follows:
Modify the addbrand method and set the parameter to get_up_spirit (). At the same time, set visible to false, which will be discussed later.

// Load the tag 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" // visible or not. The default value is true, and the default value is false. // The fixed width of the specified content area is 80. If this parameter is not specified, it will automatically adapt according to the content size, fixSize: new sogou. maps. size (80, 0) // specifies css. css must be defined in the style sheet beforehand. css: "brand"}); brands. push (brand); // Add the generated brand to the brands array }}

At the same time, modify the get_up_spirit method to set the background image and adjust anchor to move 7 pixels down. This is because the marker image has been modified. To prevent mutual occlusion, the image is moved down as a whole.

// Arrow up function get_up_spirit () {var spirit = {url: "http://mfxuan.free.800m.net/blogImage/22.png", imgSize: [], clips: [[,], [,], [,], [, 53,], anchor: [17,-7], footOffset: [0,-63]} return spirit ;}

4. Set the signs to switch to the signs in a unified manner, and the signs must be blocked from each other. To avoid clutter, you can display only one brand information at a time, and switch it a few seconds later. In this way, the problems encountered above are solved perfectly. The modification method is very simple. In the addbrand method, set visible of all brands to false, add a changeView method, dynamically change the visible attribute of brand, or directly call hide () and show () to control the display:

// Function changeView () {// when displaying the content of an attraction, the div is hidden due to visible = false in the case of new Brand, so show all the brand div $ (". brand "Maid (" display "," block "); // switch between signs for (var I = 0; I <brands. length; I ++) {brands [I]. setZIndex (15); brands [I]. hide (); // All hidden} if (brandId <brands. length) {brands [brandId]. show (); // display brands [brandId]. setZIndex (20); brandId = (brandId + 1) % brands. length ;}}

Of course, you must first define a variable to store the currently displayed brand:

Var brandId = 0; // record the currently displayed brand

Finally, modify the initialization method initialize and call the added methods here:

// Initialize data function initialize () {// locate the map in the Haidian region 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 the scenic coordinate value loadScenic (); // load the Boundary Coordinate value loadBound (); // load the scenic mark addmarker (); // Add the attraction sign addbrand (); // display a changeView () immediately; // switch the attraction display setInterval (changeView, 1000*3) every 3 seconds ); // load the boundary addbound (map );}

The whole is coming out:
(Click here to view on the website)
Now we have introduced two simple functions of the js version sogou map. Next, I will make another interactive query function.