Display the map weather forecast and implement the map weather forecast.

Display the map weather forecast and implement the map weather forecast.

Overview: in many cases, MAP and weather forecasting are used in combination. This article integrates the web weather plug-in to realize the combined reality of map weather forecasting.

1. Weather Forecast plug-in

After searching for half a day, I finally found a good weather forecast plug-in. The URL is http://www.tianqi.com/dingzhi/. the format is as follows:

<iframe width="1000"        scrolling="no"        height="500"        frameborder="0"        src="http://i.tianqi.com/index.php?c=code&id=22&icon=1&py=haerbin">

Parameter description:

Width: width

Scrolling: whether a scroll bar exists

Height: height

Frameborder: whether to display the border

Src: URL, where id is the style, icon is the icon style, and py is the city code.

2. Publish a service

Before publishing the service, you need to process the layers. In the previous blog, I explained how to extract pinyin from different cities by using Chinese characters, and add it to the shp file field. The specific operation is as follows:

A. Export the shp Attribute Table

B. Extract pinyin

C. Add the py field to the shp data. The field type is text and the length is 100.

D. Add an excel file to arcmap;

E. join horizontally with excel and assign values to the py Field

3. Call and implement,

Add featurelayer to the map and add a click event. The Code is as follows:

            var pro = new FeatureLayer("http://localhost:6080/arcgis/rest/services/city/MapServer/0",{                outFields: ["*"]            });            map.addLayer(pro);            pro.on("click",function(evt){                console.log(evt);                var url = "http://i.tianqi.com/index.php?c=code&id=19&color=%23&bgc=%23&icon=2&py="+evt.graphic.attributes.pinyin+"&temp=1&num=1";                var title = evt.graphic.attributes.name;                var content = $("<div />");                var weatherIframe = $("<iframe />").attr("width","320")                    .attr("height","120")                    .attr("frameborder","0")                    .attr("scrolling","no")                    .attr("src",url);                content.append(weatherIframe);                map.infoWindow.setTitle(title);                map.infoWindow.setContent(content[0]);                map.infoWindow.resize(340,125);                map.infoWindow.show(evt.graphic.geometry);            });

After implementation, the effect is as follows: